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

Question

I am trying to build a basic extension in google chrome which includes a content and background script. For some reason, when a new tab is created and i try to send a message from my background script to the content script, the event listener in content.js is not receiving the message. I can't see any console.log in the new tabs dev tools. Can anyone explain where i am going wrong?

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

The problem is probably because when the onCreated listener is triggered, it attempts to send the message back to the tab, but content.js has not been loaded yet since new tabs by default do not have a url, and your manifest declares that the content script will be injected when it matches "<all_urls>" . content.js is only loaded once the new tab is directed to some site.

To see this happening you can do the following:

1. Place a breakpoint in the onCreated listener in background.js .
2. Open a new tab (breakpoint will get hit)
3. In the new tab, navigate to some site
4. Open dev tools and see content.js is loaded
5. Unbreak and continue exection in background.js
6. You'll see "message received" printed in the console.

In effect, your background script is sending the message properly, but nothing is listening.