Chrome扩展内容脚本从未运行

Chrome Extension Content Script Never Run

本文关键字：运行 脚本 扩展 Chrome      更新时间：2023-09-26

你好，我正在写一个简单的chrome扩展，将用于:
1. 打开新网页
2. 根据粘贴的字符串数组
填写时间表表单3.提交时间表(只需点击表单中的"确定"按钮)
4. 打开新网页

为此工作我的扩展需要包含:
1. popup.html Browser动作弹出，带有输入文本字段用于字符串数组，以及提交按钮。
2. timesheet.js - javascript文件添加逻辑到popup.html
3.background.js -在点击提交按钮后，后台页面负责填写表单
4. content_script.js -访问新打开的网页DOM，填写表单。

现在，我做了一个简化的版本，应该是:
1. 在新选项卡
中打开www.google.com2. 等待几秒钟(可选，等待或页面完成加载)
3.更改背景颜色

一切似乎都很好，除了content_script.js listener不响应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");
    }
});

在这里下载所有文件

如何使content_script.js反应到消息和改变网页bg颜色?

解决方案:

(由于@wOxxOm)

内容脚本自content_scripts部分的matches以及清单的permisions以来未被调用。json定义错误。最简单的修复方法是将URL范围更改为: <all_urls>
(精确的url匹配见此链接)

固定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>"
  ]
}
相关文章：