Javascript chrome.tabs.query未将消息传递给content.js_Javascript_Google Chrome Extension

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

javascript google-chrome-extension

Javascript chrome.tabs.query未将消息传递给content.js,javascript,google-chrome-extension,Javascript,Google Chrome Extension,就在我开始学习chrome扩展的时候，我被困在了一个基本的程序中。我的程序是建立一个扩展，其中有按钮改变网页的颜色。更改颜色应该是动作驱动的，这就是为什么我没有使用默认css来更改页面加载时的颜色。下面是我的档案。我遇到的问题是background.js中的chrome.tabs.query没有返回tabs数组，我得到了“ID not referenced error” 感谢您的帮助。我在google和StackOverflow上搜索了n篇文章，但没有任何帮助档案： manifest.json

就在我开始学习chrome扩展的时候，我被困在了一个基本的程序中。我的程序是建立一个扩展，其中有按钮改变网页的颜色。更改颜色应该是动作驱动的，这就是为什么我没有使用默认css来更改页面加载时的颜色。下面是我的档案。我遇到的问题是background.js中的chrome.tabs.query没有返回tabs数组，我得到了“ID not referenced error” 感谢您的帮助。我在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"]
}

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>

content.js

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

尝试从回调中删除

选项卡

作为第一个参数

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

尝试从回调中删除

选项卡

作为第一个参数

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

感谢@wOxxOm解决了这个问题。我用错了下面的函数

旧代码：

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

新代码：

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

或

感谢@wOxxOm解决了这个问题。我用错了下面的函数

旧代码：

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

新代码：

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

或

1）

Tab tabs

描述了文档中的类型，它不是有效的JS语法，2）另请参见，3）这里不需要背景脚本，因为您可以在弹出窗口的脚本中执行相同的操作。@wOxxOm我最初只使用了tabs，但仍然不起作用。只是在玩，所以包括标签。反正也不行。我收到了相同的错误“未引用id”。我已经编辑了问题中的代码，因为这就是我使用函数（tab）的方式。我知道我们可以通过不同的方法实现，但这是一个基本的例子，我想在弹出窗口、背景和内容之间建立通信。一旦我能够解决这个基本示例，实际用法就不同了。addEventListener行是错误的，它应该是addEventListener（'click'，（）=>color（'red'）；哇！这起作用了。（）=>color（'red'）@wOxxOm我如何投票给你的答案。我在回答部分提到了你，所以它反映在你的个人资料上。抱歉，因为我是新来的forum1）

选项卡选项卡

描述了文档中的类型，它不是有效的JS语法，2）另请参见，3）这里不需要背景脚本，因为您可以在弹出窗口的脚本中执行相同的操作。@wOxxOm我最初只使用选项卡，但仍然无法工作。只是在玩，所以包括标签。反正也不行。我收到了相同的错误“未引用id”。我已经编辑了问题中的代码，因为这就是我使用函数（tab）的方式。我知道我们可以通过不同的方法实现，但这是一个基本的例子，我想在弹出窗口、背景和内容之间建立通信。一旦我能够解决这个基本示例，实际用法就不同了。addEventListener行是错误的，它应该是addEventListener（'click'，（）=>color（'red'）；哇！这起作用了。（）=>color（'red'）@wOxxOm我如何投票给你的答案。我在回答部分提到了你，所以它反映在你的个人资料上。对不起，因为我是新来的。对不起，我弄糊涂了。我是按照你建议的方式使用的。我应该在发帖前复习一下。我刚刚更新了问题中的代码。它不是那样工作的。我在玩Tabs标签，但实际代码是函数（tab），它不起作用。请让我知道。很抱歉造成混乱。我是按照你建议的方式使用的。我应该在发帖前复习一下。我刚刚更新了问题中的代码。它不是那样工作的。我在玩Tabs标签，但实际代码是函数（tab），它不起作用。请让我知道。