Chrome 扩展程序在重定向后不会注入内容脚本

Question

我正在开发一个 Chrome 扩展，它与 Twitter 交互并在用户访问 twitter.com/home 时注入内容脚本。我在 manifest.json 中声明了 content_scripts，并且在 twitter.com/home 上一切正常。但是，当我访问 twitter.com 时，它会重定向到 twitter.com/home 并且扩展程序不会注入内容脚本。将“twitter.com”添加到 manifest.json 中的“匹配”列表中可以解决问题，但我希望扩展仅在 twitter.com/home 加载时注入脚本。我正在考虑使用 webNavigation API 来检测重定向，但我想知道是否有更有效的方法来实现这一点。谢谢！

清单.json

  "name": "xxx",
  "version": "1.0",
  "description": "abc",
  "permissions": [
    "activeTab",
    "declarativeContent",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["https://twitter.com/home", "https://twitter.com/"],
      "run_at": "document_idle",
      "js": ["script.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

Answer 1

Twitter 通过 ajax 加载页面，而不是页面重新加载。因此，当您单击页面上的项目时，页面内容会发生变化，URL 也会发生变化。但页面实际上不会重新加载，这就是您的内容脚本不起作用的原因。

这样做：将您的更改matches为https://twitter.com/*. 这将使内容脚本注入到所有 Twitter 页面。

在您的内容脚本中script.js，您需要添加一些逻辑来检测用户是否在页面上home。由于页面不会重新加载，因此您需要使用MutationObserver之类的工具来检测页面内容更改（例如home链接是否突出显示）。这样你的脚本就知道当前页面是home页面并执行你想做的事情。