chrome.tabs.query 未将消息传递给 content.js答案

【问题标题】：chrome.tabs.query not passing message to content.jschrome.tabs.query 未将消息传递给 content.js
【发布时间】：2020-09-12 16:56:55
【问题描述】：

刚开始学习 chrome 扩展时，我被困在一个基本程序中。我的程序是构建一个扩展，它具有更改网页颜色的按钮。更改颜色应该是动作驱动的，这就是为什么我没有使用默认 css 来更改页面加载时的颜色。以下是我的文件。我遇到的问题是 background.js 中的 chrome.tabs.query 没有返回标签数组，我得到“ID 未引用错误” 任何帮助表示赞赏。我在 google 和 StackOverflow 上搜索了 n 篇文章，但没有任何帮助

文件： manifest.json

    {
"manifest_version": 2,
"name": "Hello world",
"description": "Demo extension",
 "version": "1.0",

 "icons":
{
"16": "images/dog.png", 
"48": "images/dog.png",
"128": "images/dog.png"
},

"background": {
        "persistent": false,
        "scripts": ["background.js"]
    },

"browser_action":
{
"default_icon": "images/dog.png",
"default_popup": "popup.html"
},

"content_scripts": [{
    "js": ["content.js"],
    "matches": ["<all_urls>"]
  }],

"permissions": ["tabs", "http://*/*","activeTab"]
}

background.js

chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
        switch(message.type) {
            case "setcolor":
                chrome.tabs.query({active: true, currentWindow: true}, function(tab){
                chrome.tabs.sendMessage(tab[0].id,{type: "setcolor",color: message.color})
                });
                break;
            default:
                console.error("Unrecognised message: ", message);
        }

popup.html

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<p id="demo">Click below button to change color of page</p>

<button type="button" id = "red"> RED </button>
<script src = "myscript.js"></script>

</body>
</html>

myscript.js（或 popup.js）

function color(colorval) {
    chrome.runtime.sendMessage({type: "setcolor",color: colorval})
}

document.getElementById('red').addEventListener('click', color('red'));

content.js

chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
        document.body.style.backgroundColor = message.color;
        }
);

【问题讨论】：

1) Tab tabs 描述了文档中的类型，它不是有效的 JS 语法，2) 另见 Where to read console messages from background.js in a Chrome extension?，3) 这里不需要后台脚本，因为你可以这样做在弹出窗口的脚本中。
@wOxxOm 我最初只使用标签，但仍然无法工作。只是在玩，所以包含选项卡选项卡。无论如何它都行不通。我得到同样的错误“id not referenced”。我已经编辑了问题中的代码，因为这就是我使用函数（选项卡）的方式。我知道我们可以通过不同的方法来实现，但这是一个基本示例，我想在弹出窗口、背景和内容之间建立通信。一旦我能够解决这个基本示例，实际用法就会有所不同。
addEventListener 行错误，应该是 addEventListener('click', () => color('red'));
哇！这行得通。 () => 颜色('红色')
@wOxxOm 我如何支持您的回答。我在答案部分提到了你，所以它反映在你的个人资料中。抱歉，我是论坛的新手

标签： javascript google-chrome-extension

【解决方案1】：

尝试从回调中删除 Tab 作为第一个参数。

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
   // your message logic
});

【讨论】：

很抱歉给您带来了困惑。我按照你建议的方式使用它。我应该在发布之前进行审查。我刚刚更新了问题中的代码。它不是那样工作的。我在玩 Tabs 选项卡，但实际代码是 function(tab)，它不起作用。请告诉我。

【解决方案2】：

感谢@wOxxOm 解决了这个问题。我以错误的方式使用以下功能。

旧代码：

document.getElementById('red').addEventListener('click', color('red'));

新代码：

document.getElementById('red').addEventListener('click', () => color('red'));

或

document.getElementById('red').addEventListener('click', fucntion() {color('red')});

【讨论】：