Chrome extension Content Script not loaded until page is refreshed

Natalie Chouinard picture Natalie Chouinard · Jan 1, 2014 · Viewed 25.9k times · Source

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.

Answer

Natalie Chouinard picture Natalie Chouinard · Jan 12, 2014

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