Chrome 扩展内容脚本从不 运行
Chrome Extension Content Script Never Run
您好，我正在编写一个简单的 chrome 扩展，将用于：
1.打开新网页
2.根据粘贴的字符串数组填写时间表
3. 提交时间表（只需单击表单中的 "ok" 按钮）
4.打开新网页
为此，我的扩展需要包含：
1. popup.html 浏览器操作弹出窗口，输入文本字段 用于字符串数组，提交按钮.
2. timesheet.js - javascript 文件添加逻辑到 popup.html
3. background.js - 填写表格的后台页面，点击提交按钮后
4. content_script.js - 访问新打开的网页DOM，填写表格。
现在，我做了一个简化版本，应该是：
1. 在新标签
中打开www.google.com
2. 等待几秒钟（可选，等待或页面完成加载）
3. 改变背景颜色
一切似乎都很好，除了 content_script.js 侦听器对 background.js[= 发送的消息没有反应71=]
代码如下：
manifest.json:
{
"manifest_version": 2,
"name": "Timesheet Filler",
"description": "Description.",
"version": "1.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["http://www.google.com/*"],
"js": ["content_script.js"]
}],
"browser_action": {
"default_title": "Timesheet Filler",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"activeTab",
"http://www.google.com/*"
]
}
popup.html:
<!DOCTYPE html>
<html>
<body>
<button id="btn" >Click Me!</button>
<script src="timesheet.js"></script>
</body>
</html>
timesheet.js:
document.addEventListener('DOMContentLoaded', function(){
init();
});
function init(){
var btn = document.getElementById('btn');
btn.onclick = function() { onBtnClick(); }
}
function onBtnClick(){
chrome.runtime.sendMessage({action:"btnClick"}, btnClickCallback);
}
function btnClickCallback(any){
alert(any);
}
background.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if(message.action == "btnClick"){
chrome.tabs.create({url: "http://www.google.com", active:true});
setTimeout(function(){ delayed(); }, 3000);
}
});
function delayed(){
chrome.tabs.query({active:true}, queryCallback);
}
function queryCallback(arr){
var tabId = arr[0].id;
console.log("message shown 3 second after clicking button") // THIS IS WORKING
chrome.tabs.sendMessage(tabId, {action:"doSomething"}); // CONTENT SCRIPT DOESNT REACT TO THIS
}
function contentScriptCallback(any){
alert(any);
}
content_script.js:
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if( message.action == "doSomething"){
document.body.style.backgroundColor='#000000';
alert("do something");
}
});
Download all files in one ZIP here
如何让content_script.js对消息做出反应并改变网页背景颜色？
解决方案：
（感谢@wOxxOm）
内容脚本未被调用，因为 content_scripts 部分中的 matches 以及 manifest.json 的 permisions 已定义错误的。
最简单的解决方法是将 URL 范围更改为：<all_urls>
（对于精确的 url 匹配，请参阅 this link）
固定manifest.json:
{
"manifest_version": 2,
"name": "Timesheet Filler",
"description": "Description.",
"version": "1.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}],
"browser_action": {
"default_title": "Timesheet Filler",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"activeTab",
"<all_urls>"
]
}
您好，我正在编写一个简单的 chrome 扩展，将用于：
1.打开新网页
2.根据粘贴的字符串数组填写时间表
3. 提交时间表（只需单击表单中的 "ok" 按钮）
4.打开新网页
为此，我的扩展需要包含：
1. popup.html 浏览器操作弹出窗口，输入文本字段 用于字符串数组，提交按钮.
2. timesheet.js - javascript 文件添加逻辑到 popup.html
3. background.js - 填写表格的后台页面，点击提交按钮后
4. content_script.js - 访问新打开的网页DOM，填写表格。
现在，我做了一个简化版本，应该是：
1. 在新标签
中打开www.google.com
2. 等待几秒钟（可选，等待或页面完成加载）
3. 改变背景颜色
一切似乎都很好，除了 content_script.js 侦听器对 background.js[= 发送的消息没有反应71=]
代码如下：
manifest.json:
{
"manifest_version": 2,
"name": "Timesheet Filler",
"description": "Description.",
"version": "1.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["http://www.google.com/*"],
"js": ["content_script.js"]
}],
"browser_action": {
"default_title": "Timesheet Filler",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"activeTab",
"http://www.google.com/*"
]
}
popup.html:
<!DOCTYPE html>
<html>
<body>
<button id="btn" >Click Me!</button>
<script src="timesheet.js"></script>
</body>
</html>
timesheet.js:
document.addEventListener('DOMContentLoaded', function(){
init();
});
function init(){
var btn = document.getElementById('btn');
btn.onclick = function() { onBtnClick(); }
}
function onBtnClick(){
chrome.runtime.sendMessage({action:"btnClick"}, btnClickCallback);
}
function btnClickCallback(any){
alert(any);
}
background.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if(message.action == "btnClick"){
chrome.tabs.create({url: "http://www.google.com", active:true});
setTimeout(function(){ delayed(); }, 3000);
}
});
function delayed(){
chrome.tabs.query({active:true}, queryCallback);
}
function queryCallback(arr){
var tabId = arr[0].id;
console.log("message shown 3 second after clicking button") // THIS IS WORKING
chrome.tabs.sendMessage(tabId, {action:"doSomething"}); // CONTENT SCRIPT DOESNT REACT TO THIS
}
function contentScriptCallback(any){
alert(any);
}
content_script.js:
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if( message.action == "doSomething"){
document.body.style.backgroundColor='#000000';
alert("do something");
}
});
Download all files in one ZIP here
如何让content_script.js对消息做出反应并改变网页背景颜色？
解决方案：
（感谢@wOxxOm）内容脚本未被调用，因为 content_scripts 部分中的 matches 以及 manifest.json 的 permisions 已定义错误的。
最简单的解决方法是将 URL 范围更改为：<all_urls>
（对于精确的 url 匹配，请参阅 this link）
固定manifest.json:
{
"manifest_version": 2,
"name": "Timesheet Filler",
"description": "Description.",
"version": "1.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}],
"browser_action": {
"default_title": "Timesheet Filler",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"activeTab",
"<all_urls>"
]
}