Firefox 插件需要额外刷新才能工作

Question

我已经开始开发一个插件，可以在 Github 存储库的 package.json 上运行。在加载插件时，它需要额外的页面刷新才能使插件生效，而不是在 url 被识别后立即应用边框。

manifest.json

{
  "manifest_version": 2,
  "name": "Border It",
  "version": "0.0.1",
  "permissions": ["activeTab", "tabs", "https://github.com/*"],
  "content_scripts": [
    {
      "matches": ["https://github.com/*/package.json"],
      "js": ["src/scripts/borderify.js"],
    }
  ]
}

borderify.js

document.body.style.border = '5px solid red';

我做错了什么？

Answer 1

GitHub 动态更新页面内容，因此您需要在每个 GitHub 页面 ("matches": ["https://github.com/*"]) 上运行您的脚本并观察位置变化。这里有更多提示： Event when window.location.href changes

（更新）基于 MutationObserver:

的示例实现

{
  "manifest_version": 2,
  "name": "Border It",
  "version": "0.0.1",
  "permissions": [
    "activeTab",
    "tabs",
    "https://github.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["https://github.com/*"],
      "js": ["borderify.js"]
    }
  ]
}

function onLocationChanged() {
  if (/\/package.json([?#]|$)/.test(location.pathname))
    document.body.style.border = '5px solid red';
  else
    document.body.style.border = '';
}
onLocationChanged(); // executed when the page is initially loaded

let lastUrl;

const observer = new MutationObserver(mutations => {
  // executed on any dynamic change in the page
  if (location.href == lastUrl)
    return;
  lastUrl = location.href;
  onLocationChanged();
});
const config = {
  childList: true,
  subtree: true
};
observer.observe(document.body, config);

Firefox 插件需要额外刷新才能工作

Firefox addon requires additional refresh to work

firefox

add-on

firefox-addon