以下是代码：

Question

您好，我正在编写一个简单的Chrome扩展程序，用于：
1.打开新网页
2.基于粘贴的字符串数组填充时间表格式 3.提交时间表（只需点击＆＃34;确定＆＃34;表格中的按钮）
4.打开新网页

为了实现此功能，我的扩展程序需要包含：
1. popup.html 浏览器操作弹出窗口，输入文本字段表示字符串数组，提交按钮。
2. timesheet.js - 将逻辑添加到 popup.html 的javascript文件 3. background.js - 点击提交按钮后填写表单的背景页
4. content_script.js - 访问新打开的网页DOM，填写表格。

现在，我做了一个简化版本，应该是：
1.在新标签页面中打开www.google.com 2.等待几秒钟（可选择等待或页面完成加载）
3.改变背景颜色

除了 content_script.js 听众对 background.js

发送的消息没有反应之外，其他所有内容似乎都很好。

以下是代码：

的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 对邮件作出反应并更改网页bg颜色？

Answer 1

解决方案：

（感谢@wOxxOm）

由于matches部分中的content_scripts以及 manifest.json 的permisions定义错误，因此未调用内容脚本。最简单的修复方法是将网址范围更改为： <all_urls>
（对于精确的网址匹配，请参阅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 个答案:

解决方案：