1

我使用 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"});
  }
    });
  });
});

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 
});

一切正常，但如何保存图标的“状态”？如果用户关闭浏览器并再次打开它，最后使用的 contentscript 应该会加载。

非常感谢您的帮助。

4

1 回答 1

4

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

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

  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);
        });
      });
    });

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

于 2014-04-28T12:25:53.837 回答