为网站和 Chrome 中的扩展程序在本地离线存储单个数据？

Question

背景

您好，我目前正在 Chrome 中开发一个网站和一个扩展程序。

目前，它们每个都在本地离线维护一组对象。该网站使用localStorage，而扩展使用chrome.storage。

问题

现在我想在 2 个数组之间进行同步。它提出了一些解决方案：

1)在服务器上建立一个端点来获取/发布数组

2) 编写代码以在 2 个数组之间进行同步，即每次更改 1 个数组时，我们会将更改填充到其他数组，反之亦然。

3) 仅在本地离线存储该数组的单个实例。

=> 我正在尝试实施此解决方案。

我遇到了this 和this。但是那个消息传递解决方案不是我想要的。

问题

那么，有什么方法可以在本地离线存储对象，并且可以在网站和 Chrome 中的扩展程序之间共享？

更新

• 如果将内容脚本与本地存储一起使用会出现问题：

  • 如果我的网站是 abc.com。当用户访问其他站点def.com，使用扩展名并修改数组时，数组将存储在def.com的本地存储中。
  • 现在如果用户返回我的站点 abc.com，那么我无法检索最新的数组，因为它存储在 def.com 的本地存储中。

• 当前用例：

  • 当用户在我的网站上搜索时，我需要存储用户历史搜索，当用户在 Chrome 中搜索扩展程序时，我还需要存储历史搜索
  • 现在2历史搜索数组必须在网站和扩展之间同步，意味着每当用户在浏览其他网站def.com，xyz.com时通过扩展搜索，然后回到我的网站abc.com，用户看到搜索历史他在扩展上执行，反之亦然。

Answer 1

好吧，我想我找到了如下解决方案。使用cross-storage 库

它由一个集线器和许多客户端组成：

• Hub：作为服务器，实际与localStorage API交互

• 客户端：创建 iframe 以在 Hub 上加载文件并发布消息以访问 Hub 中的数据（获取、设置、删除）

示例代码：

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

注意 $ 用于匹配字符串的结尾。上例中的正则表达式将匹配诸如 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
});