将 chrome.storage 中设置的值从选项页面发送到内容脚本

Question

在较高级别，我希望用户切换页面的背景颜色。我需要用户通过单击选项页面上的按钮来执行此操作。我想让背景颜色立即生效

在低层次上，我明白我需要从选项页面发送消息到内容脚本，读取和写入设置到 chrome.storage。但是，我试过没有消息传递有效。

我读过，要从选项页面向内容脚本发送消息，我需要后台脚本充当中介。我也无法让它工作。

为了让我的例子更清楚，我从下面的所有例子文件中删除了所有的消息传递代码。

`manifest.json`

{
  "manifest_version": 2,
  "name": "Change Background Color",
  "short_name": "Change Background Color",
  "author": "The Author",
  "version": "1.0.0",
  "version_name": "1.0",
  "options_page": "options.html",
  "browser_action": {
    "default_title": "Change the background color of a page."
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "permissions": [
    "background",
    "unlimitedStorage",
    "storage",
    "tabs",
    "activeTab",
    "http://*/",
    "https://*/",
    "*://*/*",
    "<all_urls>"
  ]
}

`options.html`

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Options</title>
</head>
<body>
   <button id="toggle-background-color">Toggle Background Color</button>
   <script src="options.js"></script>
</body>
</html>

`options.js`

var toggle = false;

function saveOptions() {
    toggle = !toggle;

    chrome.storage.sync.set(
        {
            toggleBackgroundColor: toggle
        },
        function () {}
    );
}

function retrieveOptions() {
    chrome.storage.sync.get(
        {
            toggleBackgroundColor: false
        },
        function () {}
    );
}

document.addEventListener('DOMContentLoaded', retrieveOptions);
document.getElementById('toggle-background-color').addEventListener('click', saveOptions);

`content.js`

chrome.storage.sync.get(
    {
        toggleBackgroundColor: true
    },
    function(settings) {
        if (true === settings.toggleBackgroundColor) {
            document.body.style.backgroundColor = 'green';
        } else {
            document.body.style.backgroundColor = 'red';
        }
    }
);

`background.js`

// This file is thus far empty

Answer 1

您不需要发送消息。更改 chrome.storage.local 中的值就足够了。您需要做的就是在您的内容脚本中使用 chrome.storage.onChanged 监听变化。

您可以将您的内容脚本更改为：

content.js:

function updatePage(){
    chrome.storage.sync.get(
        {
            toggleBackgroundColor: true
        },
        function(settings) {
            if (true === settings.toggleBackgroundColor) {
                document.body.style.backgroundColor = 'green';
            } else {
                document.body.style.backgroundColor = 'red';
            }
        }
    );
}
chrome.storage.onChanged.addListener(updatePage);
updatePage();

注意：您可以直接使用传递给 storage.onChnaged 侦听器的更改值。但是，在这个简单的示例中，当您已经拥有从 chrome.storage.local 获取所需数据的代码时，这只会增加复杂性。如果您要做的不仅仅是更改背景颜色，那么优化不重做所有内容可能是更好的解决方案。

将 chrome.storage 中设置的值从选项页面发送到内容脚本

Send a value set in chrome.storage from an options page to a content script

javascript

google-chrome

google-chrome-extension

storage

`manifest.json`

`options.html`

`options.js`

`content.js`

`background.js`