Question

我正在制作Chrome扩展程序，从API中提取大量数据并使用它来修改页面上的内容。由于数据量太大，我希望能够在浏览器中保存一次，并且每次加载页面时都能够访问它而不是进行API调用。

我理解这可以通过将API调用放在后台页面然后从内容脚本中的后台页面调用变量来完成。我也尝试将数据存储在本地存储中。这两种方法都不适合我，我也不明白我做错了什么。

在后台页面的代码中，我将API结果存储在变量中。我在内容脚本中调用它，如下所示：

var background = chrome.extension.getBackgroundPage();
var myData = background.APIData; //where APIData is the variable I set in the background page

我尝试使用本地存储的方式如下：

//Background page
chrome.storage.sync.set({'value': APIData}, function() {
      // Notify that we saved.
      console.log('APIData saved to storage');
    });

//Content script
var myData = localStorage["APIData"];

截至目前，扩展程序甚至无法使用我尝试访问本地存储的代码加载到页面中。扩展将使用其他方法加载，但数据似乎并不存在。我知道我的API调用正在运行，因为当我将它全部放在内容脚本中时，扩展可以正常工作。但这会产生我每次加载页面时调用API的问题。求救！

Answer 1

仔细检查您的代码。您正在将数据设置为两个不同的区域。

首先，您调用 chrome.storage.sync.set 并将“value”设置为 APIData 的值。

其次，你打电话给 localStorage ['APIData']，它引用一个单独的存储箱和属性名称。

这里有两个解决方案，第一个是在Chrome扩展程序中设置/获取持久数据的首选方式：

A1）用 chrome.storage.sync.set （{value：data}）

设置它

A2）使用 chrome.storage.sync.get （null，function（storage）{storage.value}）获取

B1）使用 localStorage .value = data

进行设置

B2）通过 localStorage .value

获取

保存和访问API会导致Chrome扩展程序中的变量

1 个答案: