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