为什么我的 content.js 脚本不能与我的 background.js 脚本（chrome 扩展）通信？

Question

我正在尝试在 google chrome 中构建一个基本扩展，其中包括内容和背景脚本。出于某种原因，当创建一个新选项卡并且我尝试从我的后台脚本向内容脚本发送消息时，content.js 中的事件侦听器没有收到消息。我在新标签开发工具中看不到任何 console.log。谁能解释我哪里出错了？

content.js:

//listen to background.js
/* global chrome */


chrome.runtime.onMessage.addListener(request => {
    console.log("message received")
    const el = document.createElement('injected');
    el.id = "injected-element"
    el.innerHTML = `<div> this has been injected </div>`
    document.body.appendChild(el)
    sendResponse({ "message":"sent from content script" });
  }
);

document.addEventListener('click', () => {
  this.setState({ count: this.state.count +1 });
});

background.js

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed successfully")
});

chrome.tabs.onCreated.addListener(tab => {
  chrome.tabs.sendMessage(
    tab.id,
    {"message":"hello from background script"}
  );
});

manifest.json

{
  "manifest_version": 2,
  "name": "Article Scorer",
  "author": "Sean Barker",
  "version": "1.0.1",
  "icons": {
    "192": "logo192.png",
    "512": "logo512.png"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions": ["activeTab", "tabs", "contextMenus"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Answer 1

问题可能是因为当 onCreated 侦听器被触发时，它会尝试将消息发送回选项卡，但是 content.js 尚未加载，因为默认情况下新选项卡不加载有一个 url，并且您的清单声明内容脚本将在匹配 "<all_urls>" 时被注入。 content.js 仅在新选项卡指向某个站点后才加载。

要查看此情况，您可以执行以下操作：

在 background.js 中的 onCreated 侦听器中放置一个断点。
打开一个新标签页（断点会被命中）
在新标签页中，导航到某个站点
打开开发工具并查看 content.js 已加载
取消中断并在 background.js
您会在控制台中看到“收到消息”。

实际上，您的后台脚本正在正确发送消息，但没有任何内容在监听。

为什么我的 content.js 脚本不能与我的 background.js 脚本（chrome 扩展）通信？

Why won't my content.js script communicate with my background.js script (chrome extensions)?

javascript

google-chrome

google-chrome-extension