在高级别，我希望用户切换页面的背景颜色。我需要用户通过单击选项页面上的按钮来完成此操作。我希望背景颜色立即生效。
在较低级别，我知道我需要从选项页面向内容脚本发送消息，读取并将设置写入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
答案 0 :(得分：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获取所需数据的代码时，这只会增加复杂性。如果你做的不仅仅是改变背景颜色，优化不重做一切都可能是一个更好的解决方案。