Question

我正在努力创建一个镀铬扩展，但是我遇到了墙。

我希望能够使用浏览器操作弹出窗口将值写入/修改到本地存储（扩展存储）。

然后，我想在内容脚本中使用存储的值。

从我读过的内容看起来我需要一个背景文件？但我不确定。

非常感谢一些编码示例！

感谢您的帮助！

Answer 1

如果您使用chrome.storage API，则可以避免将后台页面用作代理。它是直接从Content Scripts提供的存储解决方案。

Here是Chrome浏览器扩展程序中与localStorage的比较。

需要注意的一点是，它是异步的，使代码比使用localStorage稍微复杂一些：

/* ... */
chrome.storage.local.get('key', function(value){
  // You can use value here
});
// But not here, as it will execute before the callback
/* ... */

但公平地说，如果你将背景作为数据的代理，那么消息传递仍然是异步的。

有人可能会争辩说，一旦数据通过，localStorage就可以作为同步缓存。

但localStorage对象与网页共享，这是不安全的，并且没有人阻止您拥有自己的同步存储缓存，使用chrome.storage.local.get(null, /*...*/)初始化一次并使用{保持最新{1}}听众。

Answer 2

后台页面可以访问您的扩展程序保存的localStorage变量。您的内容脚本只能访问在特定选项卡中打开的网站的localStorage。因此，您需要将变量从后台页面发送到内容脚本。然后，内容脚本可以访问这些变量。

以下代码将localStorage变量保存在后台脚本中，然后将其发送到内容脚本以供使用。

既然您要求编码示例，我已经写了一封。该项目将具有后台页面和内容脚本。在弹出窗口中使用localStorage将允许后台页面访问这些变量以在内容脚本中使用。

这样的事情：

<强> background.js

// When a tab is updated
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {

    // When the tab has loaded
    if(changeInfo.status == 'complete') {

        // Query open tabs
        chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {

            // Get URL of current tab
            var tabURL = tabs[0].url;

            // If localStorage is not empty
            if(localStorage.length != 0) {

                // Set a local storage variable
                localStorage.helloworld = "Hello World";

                // Send message to content script
                chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

                    // Send request to show the notification
                    chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {

                    });
                });
            }
        });
    }
});

<强> contentscript.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

    // Use the local storage variable in some way
    if(request.greeting == "hello") {

        var hello = localStorage.helloworld;

        // do something with the variable here
    }
});

完成此操作后，请考虑切换到chrome.storage

通过弹出窗口修改本地存储，并在contentscript中使用存储的值

2 个答案: