火狐插件需要额外刷新才能使用

Question

我已经开始开发一个附加组件，它可以在 package.json 的Github repo。在加载add-on时，它需要额外的页面刷新才能生效，而不是在识别到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"],
    }
  ]
}

边界化.js

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

我做错了什么？

Answer 1

GitHub会动态更新页面内容，所以你需要在每个GitHub页面上运行你的脚本("matches": ["https://github.com/*"])并观察位置的变化。这里有更多的提示。当window.location.href改变时的事件

(更新)基于以下内容的实施示例 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);