Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 477
Natalie Chouinard Avatar asked Jan 01 '14 04:01

Natalie Chouinard


1 Answers

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"});
});
like image 195
Natalie Chouinard Avatar answered Oct 23 '22 07:10

Natalie Chouinard