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

Question

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

Answer 1

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

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

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

• chrome.tabs.create创建一个非事件选项卡，可能在使用 chrome.tabs.query 找到的非事件窗口中.
• 实验性 offscreenTabs API(实验性的，因此尚未准备好在生产中使用)。查看一些 examples我在 SO 上发帖。
• 创建一个 IFrame 并将其插入当前页面。
• window.open(不推荐...)

当你决定打开一个页面时，选择一个轻量级的。 /robots.txt 通常是一个不错的选择:它存在于大多数站点上，并且它是一个纯文本文件。

1. 激活页面的内容脚本。您可以使用 list 文件并使用 messaging API，或向 chrome.tabs.create 方法添加回调，该方法以编程方式插入内容脚本 ( chrome.tabs.executeScript)。

这是一个简单的例子。它需要 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);
    });
});

---

更新 (2022)

自 Manifest version 3 chrome.tabs.executeScript API was replaced with the chrome.scripting.executeScript API ，因此上面的代码可以改成这样:

function saveToLocalStorage() {
    localStorage.setItem("key", "value");
}

chrome.tabs.create({
    active: false,
    url: 'http://stackoveflow.com/robots.txt'
}, function(tab) {
    chrome.scripting.executeScript({
        target: {tabId: tab.id},
        func: saveToLocalStorage,
    }, function() {
        chrome.tabs.remove(tab.id);
    });
});

请注意，您需要将 "scripting" 权限添加到您的 manifest.json 文件中才能使用此 API。