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

我正在尝试创建一个chrome扩展，但是遇到了麻烦

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

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

据我所知，我需要一个背景文件？但我不确定

一些编码的例子将不胜感激

---

谢谢你的帮助

后台页面可以访问扩展保存的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) {

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

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

contentscript.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) {

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

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扩展的上下文中，它与

localStorage

进行了比较

---

需要注意的一点是，它是异步的，使得代码比使用

localStorage

稍微复杂一些：

/**/
chrome.storage.local.get（'key'，函数（值）{
//您可以在这里使用value
});
//但不是在这里，因为它将在回调之前执行
/* ... */

但公平地说，如果您使用后台作为数据代理，那么消息传递仍然是异步的

---

可以说，一旦数据被传递，

localStorage

就可以作为同步缓存使用

---

但是，

localStorage

对象与网页共享，这是不安全的，没有人阻止您拥有自己的同步存储缓存，使用

chrome.storage.local.get（null，/*…*/）

初始化一次，并使用

chrome.storage.onChanged

侦听器保持最新状态。

如果改用，你不会有这个问题。看@Xan这看起来像我想要的！但是get和set上的回调函数是怎么处理的？我从来没有遇到过这样的事情，文档有点不祥。我想我在拍摄现场做得很好，但我是否为拍摄做了一些特别的事情？再次感谢！Rob W虽然处理另一个API函数，但很好地解释了回调的陷阱。“你只要把脑袋绕一圈就行了。@Xan，我现在正在读和写呢。”。没有点击我必须在回调中编写代码。谢谢你的帮助@Xan请你重述你的评论作为回答，这样我就可以把这个问题标记为结束了？再次感谢！