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宽度的元素将设置为其原始值。如果我随后重新加载此页面，则扩展名中的更改将再次应用。

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

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

检测网页扩展中的页面更改

1 个答案: