内容脚本不与后台脚本通信 - chrome 扩展答案

【问题标题】：Content script doesn't communicate with background script - chrome extension内容脚本不与后台脚本通信 - chrome 扩展
【发布时间】：2021-05-08 19:11:27
【问题描述】：

我正在尝试将新标签 URL 从 background.js 发送到 content.js。 .sendMessage() 执行但没有到达 content.js

背景.js：

chrome.tabs.onUpdated.addListener(
    function (tabId, changeInfo, tab) {
        if (changeInfo.url) {
            chrome.tabs.sendMessage(tabId, {
                url: changeInfo.url
            })
        }
    }
);

content.js：

chrome.runtime.onMessage.addListener(function(request, sender, callback) {
    console.log('here');
  });

manifest.json：

{
  "manifest_version": 2,

  "name": "Url tracker",
  "description": "Track your latest visited URLs",
  "version": "0.0.1",
  "icons": {
    "16": "logo-small.png",
    "48": "logo-small.png",
    "128": "logo-small.png"
  },
  "permissions": [
    "activeTab",
    "tabs"
  ],
  "background": {
    "scripts":["background.js"],
    "persistent": false
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "all_frames": true,
    "js": ["content.js"]
  }]
}

【问题讨论】：

标签： javascript google-chrome-extension background manifest chrome-extension-manifest-v2

【解决方案1】：

默认情况下，内容脚本在 DOMContentLoaded 之后运行 (it can be changed)，但是当标签页开始加载时，即在内容脚本运行之前，URL 会报告给 onUpdated。

解决方案是添加一个检查以跳过第一次更新，因为它不是必需的：内容脚本的一个实例在每个匹配的网页中运行，并且它已经知道其页面的 location.href。
```
if (changeInfo.url && tab.status === 'complete') {
```
在您在 chrome://extensions 页面上重新加载您的扩展程序（或从网上商店更新它）后，其所有内容脚本都会“孤立”并且无法接收消息。

解决办法是re-inject them explicitly。

【讨论】：