我是Chrome扩展程序开发的新手,我从简单的要求开始,在Chrome扩展程序中单击按钮将更改当前选项卡中所有DIV
的颜色。
的manifest.json
{
"name": "BrowserExtension",
"version": "0.0.1",
"manifest_version": 2,
"description" : "Description ...",
"browser_action": {
"default_icon": "icon.png",
"default_title": "That's the tool tip",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"]
}]
}
popup.html
<script type="text/javascript" src="popup.js"></script>
<div style="width:200px">
<button id="button">Color all the divs</button>
</div>
popup.js
window.onload = function() {
document.getElementById("button").onclick = function () {
chrome.extension.sendMessage({
type: "color-divs"
});
}
}
background.js
// listening for an event / one-time requests
// coming from the popup
chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
switch (request.type) {
case "color-divs":
alert('on mesg');
colorDivs();
break;
}
return true;
});
// send a message to the content script
var colorDivs = function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
var tab = tabs[0];
alert("tabs[0] " + tab.id);
chrome.tabs.sendMessage(tab.id, { type: "colors-div" }, function (response) {
alert("response: " + response);
chrome.browserAction.setBadgeText({ text: "red!" });
});
});
}
content.js
chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
alert('recieve msg' + message);
switch (message.type) {
case "colors-div":
console.log('color message');
var divs = document.querySelectorAll("div");
if(divs.length === 0) {
alert("There are no any divs in the page.");
} else {
for(var i=0; i< divs.length; i++) {
divs[i].style.backgroundColor = message.color;
}
}
break;
}
});
我陷入Content.js
,我无法收到background.js
发送的邮件。
请帮助我找到解决方案,我可以通过按钮点击background.js
onMessage
然后转到content.js
onMessage
来接收消息。