Chrome扩展:在后台存储数据(Chrome extension: store data on b

2019-07-30 04:11发布

我希望能够存储在背景(在我的扩展)的数据,所以我可以访问多个域之间这个数据。

哪里是我在做什么:

内容的script.js

function setItem(name, data) {
    chrome.extension.sendMessage({ command: 'setItem', name: name, data: data });
}

function getItem(name) {
    chrome.extension.sendMessage({ command: 'getItem', name: name }, function(response) {
        return response;
    });
}

背景的script.js

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    switch (request.command) {
        case 'setItem':
            localStorage.setObject(request.name, request.data);
            return;
        case 'getItem':
            sendResponse(localStorage.getObject(request.name));
            return;
    }
});

但是,如果没有sucess,因为我不能从的getItem回调中返回。

我得到的内部数据function(response) { }回调,我只是不能返回它的getItem的回报。

我应该怎么办呢?

Answer 1:

这个问题2012被带到了一个向上的最新答案。 好吧..

眼下正确的答案是使用chrome.storage API 。 这对于分机页面和内容脚本访问的API,它提供了异步存储。 它要求"storage"权限,但此权限不产生警告。

// Setting
chrome.storage.local.set({key: data}, function() {
  if(chrome.runtime.lastError) {
    console.error(
      "Error setting " + key + " to " + JSON.stringify(data) +
      ": " + chrome.runtime.lastError.message
    );
  }
});

// Getting
chrome.storage.local.get("key", function(data) {
  // Do something with data.key
});

另见实例文件的一部分。

请注意,在这两种情况下(这种做法,或消息最背景的方法),你不能让一个函数getData 返回结果,因为调用是异步的。

一些提示和技巧:

  1. 您可以设置或通过传递一个对象或数组作为查询得到一次多个值。 你可以通过读所有值null查询。

  2. 您可以为一个默认值get() ,通过传递查询像时动作没有保存键值{key: defaultValue}

  3. 可以通知您的所有更改与存储chrome.storage.onChanged事件。

  4. chrome.storage.local服从"unlimitedStorage"权限。

  5. chrome.storage.sync将传播价值登录到同谷歌帐户的所有配置文件,如果Chrome同步的扩展功能。 然而,保持配额记在心里。

  6. 如果你绝对需要同步访问,您可以通过支持本地高速缓存中捏造事实chrome.storage 。 有,但是,限制:而在同步代码块,缓存也不会与其他页面的变化更新,你需要阅读的价值观一旦异步填充缓存。



Answer 2:

Content.js

var someVar = "hey hey!";

chrome.extension.sendRequest({method: "fromContentScript",greeting: someVar}, function(response) {

    console.log(response.data); // response back from BG

    if(response.who == 'bg'){ // checks if the response is from BG
            //Something happened ...
    }

    var responseFromBg = response.data; // the response incase we need to use the message sent back... in this case should be 'hey yourself'


});

Background.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  // From content script.
  if (sender.tab) {
    if (request.method == "fromContentScript"){

        localStorage.setItem("welcome-message",request.greeting); // in this case there will now be a localStorage variable called 'welcome-message' set with the value of 'hey hey!'. This will be viewable in the chrome:extensions page, click on the 'background.html / generated background.html' then view the 'Development Tools' or in Windows hit 'CTRL + SHIFT + I' and look at the 'LocalStorage' tab...

      sendResponse({who: "bg",data: "hey yourself"}); // this is the response sent back, 'who' tells the content page where is responding, so it can do something with the response if needed.
        }else{
      sendResponse({}); // snub them.
        }
  }
});

manifest.json中//只是柜面它是你有一个明显的问题...这里是最雷的..

{
  "name": "Name here",
  "version": "1",
  "manifest_version": 2,
  "description": "Enter desc here.",  
    "browser_action": {
    "default_icon": "img/icon16.png",
    "default_popup": "popup.html"
  },    
    "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "tabs", "*://*/*"
  ],
    "icons": { "16": "img/icon16.png",
           "48": "img/icon48.png",
          "128": "img/icon128.png" },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["js/jquery-1.7.2.min.js","content_script.js"],
      "run_at": "document_end"
    }
  ]
}

会用你的榜样,但我有急事这个早晨。 我试图尽量仔细解释所有的瓦尔地 - 对不起:(



Answer 3:

背景的script.js:

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    switch (request.command) {
        case 'setItem':
            localStorage[request.name] = JSON.stringify(request.data));
            return;
        case 'getItem':
            var retValue;
            if (typeof(localStorage[request.name]) === 'string') {
                retValue = JSON.parse(localStorage[request.name]);
            }
            sendResponse(retValue);
            return;
        case 'deleteItem':
            if (typeof localStorage[request.name] !== 'undefined') {
                delete localStorage[request.name];
            }
            return;
    }
});

如果该键不在本地存储,将的getItem回报undefined 。 相反定义功能getItem你的方式,你应该将消息发送到同一个回调的背景,然后做回调时被称为价值的东西。 你不能从函数返回值getItem ,但你可以在回调使用的值时,它被称为:

function getItem(name, callback) {
    chrome.extension.sendMessage({command: 'getItem', name: name}, function(response) {
        if (typeof(callback) === "function") {
            callback(response);
        }
    });
}


文章来源: Chrome extension: store data on background