Chrome扩展程序：在背景上存储数据

Question

我希望能够在后台（在我的扩展上）存储数据，以便我可以在多个域之间访问这些数据。

哪里是我在做什么：

内容的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

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 2

这个问题，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 
}); 

也见的的Examples部分文档。

请注意，在任何一种情况下（这种方法或消息传递背景方法），都不能使函数getData返回的结果，因为该调用是异步的。

的一些技巧：

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

2. 您可以为get()操作的情况下，有没有存储密钥值的默认值，通过传递查询像{key: defaultValue}

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

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

5. chrome.storage.sync会将值传播给登录到同一Google帐户的所有配置文件（如果启用了Chrome同步扩展功能）。但是，请记住quotas。

6. 如果您绝对需要同步访问，则可以使用由本地缓存chrome.storage支持的本地缓存来伪装它。但是，有一些限制：在同步代码块中，缓存不会随其他页面的更改而更新，并且您需要异步读取值以填充缓存。

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