Chrome擴展程序 - 寫入不同域的本地存儲

Question

如何寫入不同域的本地存儲。我的想法是，我需要我的Chrome擴展在本地存儲中寫入內容，並且當用戶訪問關聯的網站時，站點站點可以讀取本地存儲的內容。我試圖在用戶的個人數據之間進行同步，而不必將其存儲在服務器中。

Answer 1

我認爲唯一的解決方案是通過跨域限制的腳本注入。

var s = document.createElement('script'); 
s.src = chrome.extension.getURL("script.js"); 
s.onload = function() { 
    this.parentNode.removeChild(this); 
}; 
(document.head||document.documentElement).appendChild(s); 

添加文件script.js您的分機訪問其他網站的本地存儲，你必須在你的清單文件添加到script.js「web_accessible_resources」。

請注意，在腳本完全加載後腳本會自動刪除，因此請確保您要執行的代碼包含在自執行功能中。

Answer 2

Content scripts直接訪問頁面的localStorage。

如果您想要存儲特定域的值，只需打開一個窗口或框架，然後寫入窗口/頁面的本地存儲。

1. 選擇您喜歡的選項來激活頁面：

   • chrome.tabs.create創建活動標籤，也許在使用chrome.tabs.query發現的非活動窗口。
   • 實驗offscreenTabs API（實驗，所以沒有準備好在生產中使用）。看到我發佈在SO上的一些examples。
   • 創建一個IFrame並將其插入當前頁面。
   • window.open（不推薦...）

   當你決定打開一個頁面，挑選一個是重量輕。 /robots.txt通常是一個不錯的選擇：它存在於大多數網站上，和它是一個純文本文件。

2. 激活頁面的內容腳本。您可以使用清單文件並使用messaging API，或將回調添加到以編程方式插入內容腳本（chrome.tabs.executeScript）的chrome.tabs.create方法中。

下面是一個簡單的例子。它需要tabs API，因爲我使用的是chrome.tabs.executeScript。此外，您想訪問的來源也應該添加到權限列表中。

chrome.tabs.create({ 
    active: false, 
    url: 'http://stackoveflow.com/robots.txt' 
}, function(tab) { 
    chrome.tabs.executeScript(tab.id, { 
     code: 'localStorage.setItem("key", "value");' 
    }, function() { 
     chrome.tabs.remove(tab.id); 
    }); 
});