Chrome extension Content Script not loaded until page is refreshed

问题

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

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

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.

My manifest file contains:

{
  \"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?

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

回答1:

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.

Solution

Changes to manifest:

{
  "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"
  ]
}

Add background script:

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

回答2:

It works perfectly for me. I created extension with two files you showed:

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!");

Then I open third link in this search thread: https://www.google.ca/search?q=trello+board+game&oq=trello+board+game&aqs=chrome..69i57.5037j0j1&sourceid=chrome&ie=UTF-8 ("Game of Thrones: the Board Game - Trello") and Chrome DevTools Console writes "Hello, world!"

来源：https://stackoverflow.com/questions/20865581/chrome-extension-content-script-not-loaded-until-page-is-refreshed

标签

javascript

google-chrome-extension

trello