網站和Chrome瀏覽器擴展程序是否在本地離線存儲單個數據？

Question

背景

嗨，我目前正在開發一個網站和一個Chrome擴展程序。

當前，它們每個都在本地離線維護一系列對象。 該網站使用localStorage ，而擴展使用chrome.storage 。

問題

現在，我想在2個數組之間進行同步。 它帶有一些解決方案：

1）在服務器上建立一個端點來獲取/發布數組

2）編寫代碼以在2個數組之間進行同步，即，每次更改1個數組時，我們會將更改填充到其他數組中，反之亦然。

3）僅在本地離線存儲該陣列的單個實例。

=>我正在嘗試實施此解決方案。

我碰到這個和這個 。 但是該消息傳遞解決方案不是我想要的。

題

因此，是否有任何方法可以在本地離線存儲對象，並且可以在網站和Chrome擴展程序之間共享該對象？

更新資料

• 如果將內容腳本與本地存儲一起使用，則會出現問題：

  • 如果我的網站是abc.com。 當用戶訪問其他站點def.com時，使用擴展名並修改陣列，該陣列將存儲在def.com的本地存儲中。
  • 現在，如果用戶回到我的網站abc.com，則我無法檢索最新的數組，因為它存儲在def.com的本地存儲中。

• 當前用例：

  • 當用戶在我的網站上搜索時，我需要存儲用戶歷史記錄搜索，當用戶在Chrome中的擴展程序上搜索時，我還需要存儲歷史記錄搜索
  • 現在，兩個歷史記錄搜索數組必須在網站和擴展名之間同步，這意味着每當用戶在瀏覽其他站點def.com，xyz.com時按擴展名搜索時，然后返回我的站點abc.com，用戶就會看到他執行的搜索歷史記錄擴展名，反之亦然。

Answer 1

好吧，我想我找到了以下解決方案。 使用跨存儲庫

它由一個中心和許多客戶組成：

• 集線器：充當服務器，實際上與localStorage API交互

• 客戶：創建一個iframe以將文件加載到集線器上並發布消息以訪問集線器中的數據（獲取，設置，刪除）

樣例代碼：

Hub

// Config s.t. subdomains can get, but only the root domain can set and del
CrossStorageHub.init([
  {origin: /\.example.com$/,            allow: ['get']},
  {origin: /:\/\/(www\.)?example.com$/, allow: ['get', 'set', 'del']}
]);

請注意，$用於匹配字符串的結尾。 上例中的RegExps將匹配源，例如valid.example.com，但不會匹配invalid.example.com.malicious.com。

Client

var storage = new CrossStorageClient('https://store.example.com/hub.html');

storage.onConnect().then(function() {
  return storage.set('newKey', 'foobar');
}).then(function() {
  return storage.get('existingKey', 'newKey');
}).then(function(res) {
  console.log(res.length); // 2
}).catch(function(err) {
  // Handle error
});