Chrome 扩展程序内容脚本在页面刷新之前未加载 [英] Chrome extension Content Script not loaded until page is refreshed

问题描述

我有一个 Chrome 扩展内容脚本，我想在 Trello 板上运行.目前，它只包含:

I have a Chrome extension content script that I want to run on Trello boards. For now, it contains only:

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

当您通过内部链接打开 Trello 看板页面时，例如从我的看板页面，内容脚本不会运行.不过，它确实会在您刷新页面后运行.

When you open the Trello board page through an internal link, like from the My Boards page, the content script does not run. It does run after you refresh the page though.

我的清单文件包含:

{
  "manifest_version": 2,

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

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

谁能帮我弄清楚为什么在最初加载页面时脚本没有运行?

Can anyone help me figure out why the script doesn't run at the time the page is initially loaded?

更正的问题.问题仅在关注内部链接后发生，而不是任何链接.

Corrected question. Issue only occurred after following internal links, not any links.

推荐答案

问题在于 Trello 使用 HTML5 的 pushState 用于页面转换，因此内容脚本并不总是在板打开后运行.

The problem was that Trello uses HTML5's pushState for page transitions, so the content script wasn't always being run after a board was opened.

解决方案

对清单的更改:

{
  "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"});
});

这篇关于Chrome 扩展程序内容脚本在页面刷新之前未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！