检测 webextension 中的页面变化

Question

我正在为特定网站构建扩展。它将元素宽度设置为特定大小：

//script.js
document.getElementById('nice header').style.width = "100px";

这是我的清单（相关部分）：

{
    "content_scripts": [
      {
          "matches": [ "https://target_website.com/*" ],
          "js": [ "script.js" ]
      }
    ]
}

调试扩展时，当我第一次输入 target_website.com 时，我看到我的更改已应用。但是，如果我在本网站内的某处导航，例如到 target_website.com/profile，id 为 nice header 的元素 width 被设置为其原始值。如果我随后重新加载此页面，则会再次应用我的扩展程序所做的更改。

如何确保扩展中的更改始终应用到网站？

Answer 1

如果我没理解错的话，您定位的网站使用了某种单页应用程序技术。

要应用简单的样式更改，我建议使用自定义 CSS 文件而不是脚本：

#nice_header {
    width: 100px; /* maybe add an !important here */
}

然后将其包含在您的 manifest.json 中：

...
{
    "content_scripts": [
      {
          "matches": [ "https://target_website.com/*" ],
          "css": [ "style.css" ],
          "js": [ "script.js" ]
      }
    ]
}
...

这不仅会保留您的设置，还会为您的用户节省 CPU 个周期。

如果您想在每次页面更改时执行 JavaScript 功能，您可能需要订阅 webNavigation.onHistoryStateUpdated 事件。此处有更多信息：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webNavigation/onHistoryStateUpdated

检测 webextension 中的页面变化

Detect page changes in webextension

javascript

firefox-addon-webextensions