Chrome擴展：在內容腳本訪問的localStorage

Question

所以，我有一個選項頁面，用戶可以定義某些選項並保存它的localStorage：options.html

現在，我也有一個需要得到一個內容腳本在options.html頁面中定義的選項，但是當我嘗試從內容腳本訪問localStorage時，它不返回選項頁面中的值。

如何讓我的內容腳本從localStorage，選項頁面甚至背景頁面獲取值？

Answer 1

更新2016年

谷歌瀏覽器發佈了存儲API：http://developer.chrome.com/extensions/storage.html

這是很容易使用像其他瀏覽器的API，你可以從在Chrome中的任何頁面的上下文中使用它。

// Save it using the Chrome extension storage API. 
    chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() { 
     console.log('Settings saved'); 
    }); 

    // Read it using the storage API 
    chrome.storage.sync.get(['foo', 'bar'], function(items) { 
     message('Settings retrieved', items); 
    }); 

要使用它，請確保您在清單中定義它：

"permissions": [ 
     "storage" 
    ], 

有一些方法來「刪除」，「清除」，「getBytesInUse」，以及事件偵聽器來偵聽改變存儲 「調用onChanged」

使用本機的localStorage（從2011舊回覆）

內容腳本的網頁上下文中運行，不是擴展頁面。因此，如果您從內容中訪問localStorage，它將成爲該網頁的存儲空間，而不是擴展頁面存儲空間。

現在，要讓您的內容腳本讀取您的擴展存儲（從您的選項頁面設置它們），您需要使用擴展名message passing。

你要做的第一件事就是告訴你的內容腳本的請求發送到您的擴展來獲取一些數據，而這些數據可以是您擴展的localStorage：

contentscript.js

chrome.runtime.sendMessage({method: "getStatus"}, function(response) { 
    console.log(response.status); 
}); 

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
    if (request.method == "getStatus") 
     sendResponse({status: localStorage['status']}); 
    else 
     sendResponse({}); // snub them. 
}); 

你可以做一個API一個可以將通用localStorage數據轉換爲內容腳本，或者獲取整個localStorage數組。

我希望能幫助您解決問題。

被看中和通用...

contentscript.js

chrome.runtime.sendMessage({method: "getLocalStorage", key: "status"}, function(response) { 
    console.log(response.data); 
}); 

背景。js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
    if (request.method == "getLocalStorage") 
     sendResponse({data: localStorage[request.key]}); 
    else 
     sendResponse({}); // snub them. 
}); 

Answer 2

另一種選擇是使用chromestorage API。這允許在跨會話進行可選同步的情況下存儲用戶數據。

一個缺點是，它是異步的。

https://developer.chrome.com/extensions/storage.html

Answer 3

有時，它可能是更好的使用chrome.storage API。這是更好的話，localStorage，因爲您可以：從您的內容腳本

• 存儲信息，無需 消息內容腳本和擴展之間傳遞;
• 店你如JavaScript數據對象沒有他們序列化到JSON（localStorage only stores strings）。

下面是一個演示使用chrome.storage的簡單代碼。內容腳本獲取訪問過的頁面和時間戳的url並存儲它，popup.js從存儲區域獲取它。

content_script.js

(function() { 
    var visited = window.location.href; 
    var time = +new Date(); 
    chrome.storage.sync.set({'visitedPages':{pageUrl:visited,time:time}}, function() { 
     console.log("Just visited",visited) 
    }); 
})(); 

popup.js

(function() { 
    chrome.storage.onChanged.addListener(function (changes,areaName) { 
     console.log("New item in storage",changes.visitedPages.newValue); 
    }) 
})(); 

「更改」 這裏是包含給定鍵新舊值的對象。 「AreaName」參數是指存儲區域的名稱，可以是「本地」，「同步」或「託管」。

記住申報存儲許可manifest.json中。

manifest.json的

... 
"permissions": [ 
    "storage" 
], 
...