Javascript Chrome扩展-写入不同域的本地存储

如何写入不同域的本地存储。我的想法是，我需要我的chrome扩展在本地存储中写入内容，当用户访问相关网站时，站点可以读取本地存储的内容。我正在尝试在用户的个人数据之间进行同步，而不必将其存储在服务器中。

由于跨域限制，我认为唯一的解决方案是通过脚本注入

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

添加到您访问其他站点localStorage的扩展中，您必须将

script.js

添加到清单文件中的“web可访问资源”中

请注意，脚本完全加载后会自动删除，因此请确保要执行的代码包含在自执行函数中。

可以直接访问页面的本地存储

如果要存储特定域的值，只需打开一个窗口或框架，然后写入窗口/页面的本地存储

选择您喜爱的选项以激活页面：

• 要创建非活动选项卡，可以在通过使用找到的非活动窗口中创建
• 实验性的

  offscreenTabs

  API（实验性的，所以还没有准备好用于生产）。看到一些我贴在SO上的
• 创建IFrame并将其插入当前页面

• 窗口。打开

  （不推荐…）

当你决定打开一个页面时，选择一个较轻的页面

/robots.txt

通常是一个不错的选择：它存在于大多数网站上，是一个纯文本文件

激活页面的内容脚本。您可以使用清单文件并使用API，也可以向

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

---

当然，这看起来是一个可行的解决方案。虽然我现在的问题是，我需要从背景页开始。创建一个交互式选项卡将向用户显示一些内容。屏幕外的标签不适用于背景页。Window.open（）显然不是解决方案。不过，我将尝试iFrame，并让您知道它是如何运行的。这里有点晚了，但如果您控制要写入的域（如OP的情况），则不需要内容脚本。只需宿主一个微小的.html脚本，该脚本读取消息并将其写入本地存储（您可以验证域以防止滥用），然后创建一个指向该脚本的iframe，并通过常规

frame.contentWindow.postMessage

发送数据。