Question

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

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

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

我的清单文件包含：

{
  "manifest_version": 2,

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

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

任何人都可以帮我弄清楚为什么脚本在最初加载页面时没有运行吗？

编辑：更正了问题。问题仅在遵循内部链接后发生，而不是任何链接。

Answer 1

问题是Trello uses HTML5's 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"});
});

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！”

在刷新页面之前，Chrome扩展内容脚本未加载

2 个答案: