Question

我使用chrome扩展来触发两个内容脚本来注入css。如果用户打开页面，则加载contentscript-on.js（在我的manifest.json中定义）：

的manifest.json

{
    "name": "tools",
    "version": "1.1",
    "description": "tools",
    "browser_action": {
        "default_icon": "icon-on.png",
        "default_title": "tools"
    },
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [ "*://*/*" ],
            "include_globs": [ "*://app.example.*/*" ],
            "js": ["jquery-1.11.0.min.js", "contentscript-on.js"]
        }
    ],
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "permissions": [
        "storage",
        "https://*.app.example.de/*", "tabs", "webNavigation"
    ]   
}

background.js

function getToggle(callback) { // expects function(value){...}
  chrome.storage.local.get('toggle', function(data){
    if(data.toggle === undefined) {
      callback(true); // default value
    } else {
      callback(data.toggle);
    }
  });
}

function setToggle(value, callback){ // expects function(){...}
  chrome.storage.local.set({toggle : value}, function(){
    if(chrome.runtime.lastError) {
      throw Error(chrome.runtime.lastError);
    } else {
      callback();
    }
  });
}

chrome.browserAction.onClicked.addListener( function(tab) {
  getToggle(function(toggle){
    toggle = !toggle;
    setToggle(toggle, function(){
      if(toggle){
    //change the icon after pushed the icon to On
    chrome.browserAction.setIcon({path: "icon-on.png", tabId:tab.id});
    //start the content script to hide dashboard
    chrome.tabs.executeScript({file:"contentscript-on.js"});
  }
  else{

    //change the icon after pushed the icon to Off
    chrome.browserAction.setIcon({path: "icon-off.png", tabId:tab.id});
    //start the content script to hide dashboard
    chrome.tabs.executeScript({file:"contentscript-off.js"});
  }
    });
  });
});

contentscript-on.js

$(document).ready(function() {

    chrome.storage.local.get('toggle', function(data) {
        if (data.toggle === false) {
            return;
        } else {
            // do some css inject
        }
    });

});

contentscript-off.js

$(document).ready(function() {
  // set css to original 
});

一切正常，但我怎样才能保存图标的“状态”？如果用户关闭浏览器并再次打开它，则应加载上次使用的内容。

非常感谢你的帮助。

Answer 1

你有两种方法（至少），一种是＃34;旧的＆＃34;一个是＆＃34;新＆＃34;。

旧：localStorage

您的扩展程序页面共享一个可以读取/写入的公共localStorage对象，并且通过浏览器重新启动它是持久的。

使用它是同步的：
```
var toggle;
if(localStorage.toggle === undefined){
  localStorage.toggle = true;
}
toggle = localStorage.toggle;

chrome.browserAction.onClicked.addListener( function(tab) {
  var toggle = !toggle;
  localStorage.toggle = toggle;
  /* The rest of your code; at this point toggle is saved */
});
```
使用起来很简单，但有一些缺点：内容脚本的localStorage上下文不同，因此需要通过Messaging进行通信以从后台脚本中获取值;此外，如果在隐身模式下使用扩展程序，也会出现复杂情况。

新：chrome.storage API

要使用新方法，您需要清单中的权限"storage"（不会生成警告）。

此外，与localStorage不同，使用它是异步的，即您需要使用回调：

function getToggle(callback) { // expects function(value){...}
  chrome.storage.local.get('toggle', function(data){
    if(data.toggle === undefined) {
      callback(true); // default value
    } else {
      callback(data.toggle);
    }
  });
}

function setToggle(value, callback){ // expects function(){...}
  chrome.storage.local.set({toggle : value}, function(){
    if(chrome.runtime.lastError) {
      throw Error(chrome.runtime.lastError);
    } else {
      callback();
    }
  });
}

chrome.browserAction.onClicked.addListener( function(tab) {
  getToggle(function(toggle){
    toggle = !toggle;
    setToggle(toggle, function(){
      /* The rest of your code; at this point toggle is saved */
    });
  });
});

异步代码有点难以使用，但是你会获得一些优势。也就是说，内容脚本可以直接使用chrome.storage而不是与父级进行通信，您可以使用onChanged来监视更改，并且可以使用chrome.storage.sync代替（或与...一起）{{1}将更改传播到用户登录的所有浏览器。

修改

我包括一个完整的解决方案，因为OP错误地将每个标签状态和全局状态混合在一起。

contentscript.js

chrome.storage.local

background.js：

$(document).ready(function() { chrome.storage.local.get('toggle', function(data) { if (data.toggle === false) { return; } else { /* do some css inject */ } }); chrome.storage.onChanged.addListener(function(changes, areaName){ if(areaName == "local" && changes.toggle) { if(changes.toggle.newValue) { /* do some css inject */ } else { /* set css to original */ } } }); });

这样，您只需要一个内容脚本。

记住状态镀铬扩展

1 个答案: