Javascript 检测webextension中的页面更改

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

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

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

调试扩展时，当我第一次进入

target_website.com

时，我看到我的更改已应用。但是，如果我在该站点内的某个位置导航，例如到

target\u website.com/profile

，则id为

nice header

width的元素将设置为其原始值。如果重新加载此页面，则会再次应用来自扩展的更改

---

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

如果我理解正确，您的目标网站使用某种单页应用技术

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

#漂亮的头{
宽度：100px；/*可能在此处添加一个！重要信息*/
}

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

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

这不仅可以保持您的设置，还可以为用户节省CPU周期

如果希望在每次页面更改时执行JavaScript功能，可能需要订阅

webNavigation.onHistoryStateUpdated

事件。

---

更多信息请点击此处：

尝试添加

“所有帧”：true

@PrerakSola感谢您的回复，但没有帮助。当您导航到

/profile

时，页面是否重新加载？或者只是像angular应用程序中的路径更改？@PrerakSola我相信只是路径更改，而不是整个页面重新加载。在这种情况下，您需要在后台脚本中收听

chrome.tabs

API的事件。并在检测到时向内容脚本发送消息以执行所需代码。

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