Chrome扩展程序内容脚本直到页面刷新后才加载

Question

我有一个Chrome扩展程序内容脚本，我想在Trello看板上运行它。目前，它只包含以下内容：

console.log("Hello, world!");

当您通过内部链接（例如从“我的面板”页面）打开Trello面板页面时，内容脚本不会运行。但是，在刷新页面后它会运行。

我的manifest文件包含：

{
  "manifest_version": 2,

  "name": "Temp Ext",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["*://trello.com/b/*"],
      "js":["contentscript.js"]
    }
  ]
}

有人可以帮忙解决为什么脚本不能在页面最初加载时运行吗？

编辑：更正问题，问题仅在跟随内部链接后出现，而非任何链接。

- Natalie Chouinard

Answer 1

问题是Trello使用HTML5的pushState进行页面转换，因此内容脚本并不总是在打开面板后运行。 解决方案 清单更改：

{
  "manifest_version": 2,

  "name": "Temp Ext",
  "version": "1.1",

  "content_scripts": [{
    "matches": ["*://trello.com/*"],
    "js":["contentscript.js"]
  }],

  "background": {
    "scripts": ["background.js"]
  },

  "permissions": [
    "*://trello.com/*", "tabs", "webNavigation"
  ]
}

添加背景脚本：

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
    chrome.tabs.executeScript(null,{file:"contentscript.js"});
});

- Natalie Chouinard

---

这对我非常有用。GitHub也是一样的。我的唯一区别是我必须在我的manifest.json中更改“matches”属性。以前，我只加载了*://github.com/*/*.wiki的内容脚本。我正在捕捉从github.com/*页面转换到另一个页面的状态推送，但由于我没有加载维基页面，因此无法调用内容脚本。我将manifest.json更改为 { "matches": ["*://github.com/*"], ...``` - PMorganCA

终于，一个真正有效的方法。你不知道我已经寻找这样的东西有多久了。那么多无用的“解决方案”在那里。 - oldboy

也适用于我，但我需要它用于Firefox。我将其更改为：browser.webNavigation.onHistoryStateUpdated.addListener(function(details) {browser.tabs.executeScript(null,{file:"contentscript.js"});}); 权限很重要。我忘记设置它们并得到了未定义的错误。 - Mike

想要说一下，这个解决方案非常棒。它在程序化和声明性内容脚本之间取得了很好的平衡。你可以将声明式注入的内容脚本用于页面重新加载事件，这非常棒，因为它们更容易调试。同时也能处理推送边缘情况！ - Christoph Hansen

Answer 2

对我来说它完美地运作。我使用了你展示的两个文件创建了扩展：

manifest.json:

{
  "manifest_version": 2,

  "name": "Temp Ext",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["*://trello.com/b/*"],
      "js":["contentscript.js"]
    }
  ]
}

contentscript.js:

console.log("Hello, world!");

然后我在这个搜索线程中打开第三个链接：https://www.google.ca/search?q=trello+board+game&oq=trello+board+game&aqs=chrome..69i57.5037j0j1&sourceid=chrome&ie=UTF-8（“权力的游戏：Trello版”），Chrome DevTools控制台输出“Hello, world！”

- gthacoder