Chrome扩展程序 - 写入其他域的本地存储

Question

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

Answer 1

内容脚本直接访问页面的localStorage.

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

1. 选择您喜欢的选项以激活页面:

   • chrome.tabs.create创建一个非活动选项卡,可能在使用的非活动窗口中找到chrome.tabs.query.
   • 实验offscreenTabsAPI(实验,因此尚未准备好用于生产).查看我在SO上发布的一些示例.
   • 创建一个IFrame并将其插入当前页面.
   • window.open (不建议...)

   当您决定打开一个页面时,选择一个重量轻的页面./robots.txt通常是一个不错的选择:它存在于大多数的网站,并且它是一个纯文本文件.

2. 激活页面的内容脚本.您可以使用清单文件并使用消息传递 API,也可以向以chrome.tabs.create编程方式插入内容脚本(chrome.tabs.executeScript)的方法添加回调.

这是一个简单的例子.它需要tabsAPI,因为我正在使用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);
    });
});

Answer 2

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

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_accessible_resources”。

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