Question

我在这里已经阅读了很多其他类似问题的答案，但我仍然遇到麻烦。我希望用户可以通过单击图标随时关闭我的chrome扩展程序。我编写的扩展程序将在每次加载页面时执行一次，因此当单击该图标时，它应禁用下一页加载时发生的代码。单击图标时，它会变为灰色以显示它已关闭或返回颜色。这部分代码可以工作，但它也应该将localStorage变量更新为off / on。然后，当用户启动新页面并再次运行内容脚本时，内容脚本会检查localStorage变量，理想情况下，只有在变量设置为“on”时才会执行。但相反，它每次都会执行，即使图标是灰色的。我在控制台中检查了localStorage，变量每次都显示为“on”。我做错了什么？

P.S。我还检查了内容脚本是否始终将存储变量设置为“on”（因为它检查是否还没有保存变量），但事实并非如此。

的manifest.json

{
"manifest_version": 2,
"name": "My Extension",
"version": "0.1",

"icons":
{
 "128": "128.png",
 "48": "48.png",
 "16": "16.png"
 },

"content_scripts": [
{
"matches": [
    "<all_urls>"
       ],
"js": ["jquery-3.1.1.min.js", "content.js"]
}
],

"browser_action": {
   "default_icon": "16.png"
  },

"background": {
    "scripts": ["background.js"],
    "persistent": true
  },

"permissions": ["tabs", "storage"],

"web_accessible_resources": [
    "spritesheet.png"
 ]

}

背景页

chrome.browserAction.onClicked.addListener(function(tab) {

  //if on, turn off
  if (localStorage.onoff == "on") {

    chrome.browserAction.setIcon({path:{"16": "16grey.png", "48": "48grey.png","128": "128grey.png"}});
    localStorage.onoff = "off";

   //if off, turn on
   } else {

    chrome.browserAction.setIcon({path:{"16": "16.png", "48": "48.png","128": "128.png"}});
    localStorage.onoff = "on";
   }


});

内容脚本

if (!localStorage.onoff) {
 localStorage.onoff = "on";
}


if (localStorage.onoff == "on") {
  //execute the extension
}

Answer 1

使用`chrome.storage.local`

您无法使用localStorage在后台脚本和内容脚本之间移动数据。在您的内容脚本中，它将访问您注入脚本的页面的页面/域的localStorage。这是应该的。您的内容脚本应该用于影响其注入的页面。因此，不属于Chrome API的功能应该更多或更少，就像在页面脚本中编写的那样。

要在加载内容脚本之前在后台脚本中设置数据值，您应该使用chrome.storage.local。

您可以使用chrome.storage.local.set()：

进行设置

chrome.storage.local.set({
    onOff: 'on'
}, function(){
    console.log('Data saved');
});

您可以使用chrome.storage.local.get()：

阅读

chrome.storage.local.get({
    onOff: 'off'
}, function(data) {
    if(data.onOff === 'on') {
        //Do your code
    }
});

其他问题

加载jQuery：
您正在每个页面上加载jQuery。特别是考虑到你在每个页面上注入脚本，你应该认真考虑不使用jQuery。 jQuery是85KiB的最小化代码。添加到用户加载的每个页面是一个相当沉重的负担。

由于您正在编写一个扩展程序，非常具体地说，只能在一个浏览器（或极少数的浏览器）中运行，因此不需要jQuery的主要优点之一，即跨浏览器兼容性。因此，这个主要好处对您的代码没有任何价值。

您在代码中使用jQuery所做的一切都可以使用vanilla JavaScript编写。这通常会花费你很少的额外代码，特别是与最小化的jQuery代码的85KiB相比。因此，虽然你可能会节省一些编码，但代价是迫使用户在他们查看的每个页面上加载和评估85KiB的jQuery代码。

我不知道你在代码中使用jQuery是什么。实际上可能需要某些东西。另一方面，更有可能加载它只是为了方便（有些人使用它只是因为它使代码看起来更干净）。如果您只使用一些基本的jQuery，您可能会发现用this other answer of mine编写的queryAll()函数为您提供了一些经常查找的功能。

在<all_urls>中注入您的内容脚本：
您应该认真考虑是否需要在每个页面中注入用户访问。很可能是。您没有说明您的代码在做什么。因此，我们无法分辨。如果您的扩展程序实际上并未影响所有网址，请考虑限制注入代码的网址。

此外，您使用browserAction按钮启用了内容脚本功能。因此，您应该考虑使用tabs.executeScript()仅在启用扩展程序时注入内容脚本。

如何在后台页面中使用本地存储打开/关闭chrome扩展？

1 个答案:

使用`chrome.storage.local`

其他问题

如何在后台页面中使用本地存储打开/关闭chrome扩展？

1 个答案:

使用chrome.storage.local

其他问题

使用`chrome.storage.local`