记住状态 chrome 扩展

Question

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

清单.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"
    ]   
}

背景.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"});
  }
    });
  });
});  

内容脚本-on.js

$(document).ready(function() {

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

});

内容脚本-off.js

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

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

非常感谢您的帮助。

Answer 1

你有两种方法（至少），一种是“旧”，一种是“新”。

1. 老的：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内容脚本的上下文不同，因此它们需要通过消息进行通信以从后台脚本获取值；此外，如果在隐身模式下使用扩展程序，也会出现复杂情况。

2. 新：chrome.storageAPI

   要使用新方法，您需要"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代替（或与）chrome.storage.local将更改传播到用户登录的所有浏览器。

编辑

我提供了一个完整的解决方案，因为 OP 犯了混合每个选项卡状态和全局状态的错误。

内容脚本.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 */
      }
    }
  });
});

背景.js：

    /* getToggle, setToggle as above */

    function setIcon(value){
      var path = (value)?"icon-on.png":"icon-off.png";
      chrome.browserAction.setIcon({path: path});
    }

    getToggle(setIcon); // Initial state

    chrome.browserAction.onClicked.addListener( function(tab) {
      getToggle(function(toggle){
        setToggle(!toggle, function(){
          setIcon(!toggle);
        });
      });
    });

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