javascript - upgrading - La extensión de Chrome Content Script no se carga hasta que la página se actualiza

to view this video please enable javascript and consider upgrading to a web browser that

Question

Tengo una secuencia de comandos de contenido de la extensión de Chrome que quiero ejecutar en los tableros de Trello. Por ahora, contiene solo:

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

Cuando abre la página del tablero de Trello a través de un enlace interno, como en la página Mis tableros, el script de contenido no se ejecuta. Sin embargo, se ejecuta después de actualizar la página.

Mi archivo de manifiesto contiene:

{
  "manifest_version": 2,

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

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

¿Puede alguien ayudarme a averiguar por qué el script no se ejecuta en el momento en que la página se carga inicialmente?

EDITAR: Pregunta corregida. El problema solo ocurrió después de los siguientes enlaces internos, no de ningún enlace.

Answer 1

El problema fue que Trello utiliza el pushState de HTML5 para las transiciones de página, por lo que el script de contenido no siempre se ejecutaba después de abrir un tablero.

Solución

Cambios a manifestar:

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

Añadir script de fondo:

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

Answer 2

Funciona perfectamente para mí. Creé la extensión con dos archivos que mostraste:

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

Luego abro el tercer enlace en este hilo de búsqueda: 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 ") y Chrome DevTools Console escriben" ¡Hola, mundo! "