Chrome扩展程序内容脚本,用于访问chrome.storage

时间:2016-07-15 21:51:41

标签: jquery google-chrome google-chrome-extension

我创建了一个使用Chrome Extensions内容脚本附加到页面的自定义菜单。扩展程序很棒,菜单就像我想要的那样出现。

我想更进一步,添加一个带有开/关开关的选项页面,该开关将var menuToggle 定义为1或0,并且该var将附加到IF条件:

IF menuToggle == 1 // Do something 
ELSE // console.log("var is 0, menu not loaded");

我能够使用“localstorage.menuToggle = 1;”在扩展环境中进行此工作,但我知道这只适用于我的扩展中的实例和内容脚本将无法访问此var。

我通过了official docs获取了chrome.storage API,但说实话,我对编程的早期阶段并不了解。

从我看到的,我应该使用 chrome.storage.sync.set ,但我没有完全了解如何正确设置它以及如何在内部检索数据内容脚本。我尝试了类似下面的东西,但它不起作用:

chrome.storage.sync.set({'menuToggle': '1'}, function(){});

问题:我需要在sync.set之后定义一个函数吗?是否可以在没有任何功能的情况下存储数据?

Bellow是我与 localstorage

一起使用的代码
var varMenuToggleDefault = 1;
localStorage.varMenuToggle = 1;

$("input:checkbox[name=onoffswitch]").change(function() {
  if ($(this).is(':checked')) {
    localStorage.varMenuToggle = varMenuToggleDefault;
    console.log('Switch is ON');
    console.log("Var is: " + localStorage.varMenuToggle);
  } else {
    localStorage.varMenuToggle = "0";
    console.log('Switch is OFF');
    console.log("Var is: " + localStorage.varMenuToggle);
  }

if (localStorage.varMenuToggle == 1) {
 // Load the menu
} else {
 // console.log("varMenuToggle is 0. Menu NOT loaded");
};

我做错了什么/失踪了?

1 个答案:

答案 0 :(得分:2)

chrome.storage函数是异步的。括号后的函数称为回调函数,并在操作完成时触发。您不必具有回调函数。

获取数据有点不同。您可以这样访问您的数据:

chrome.storage.sync.get("menuToggle", function(data) {
    var menuToggle = data.menuToggle;
}

由于这些函数是异步的,如果您想要获取数据,必须具有回调函数。回调函数接收一个具有menuToggle属性的对象,该属性包含您设置的值。