google-chrome-extension
Guiones de contenido

Observaciones

Declarar scripts de contenido en el manifiesto.

Los scripts de contenido se pueden declarar en manifest.json para que siempre se inyecten en páginas que coincidan con un conjunto de patrones de URL .

Ejemplo minimo

"content_scripts" : [
  {
    "js": ["content.js"],
    "css": ["content.css"]
    "matches": ["http://example.com/*"]
  }
]

Esta entrada de manifiesto indica a Chrome que inyecte un script de contenido content.js , junto con el archivo CSS content.css , después de cualquier navegación a una página que coincida con el patrón de coincidencia http://example.com/*

Las teclas js y css son opcionales: solo puede tener una o ambas dependiendo de lo que necesite.

content_scripts clave content_scripts es una matriz, y puede declarar varias definiciones de script de contenido:

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]

Tenga en cuenta que tanto js como matches son matrices, incluso si solo tiene una entrada.

Más opciones están disponibles en la documentación oficial y otros ejemplos.

Nota IMPORTANTE

Los scripts de contenido declarados en el manifiesto solo se inyectarán en las nuevas navegaciones después de la carga de extensión . No se inyectarán en las pestañas existentes. Esto también se aplica a las recargas de extensión durante el desarrollo y actualizaciones de extensión después del lanzamiento.

Si necesita asegurarse de que las pestañas abiertas actualmente están cubiertas, considere también realizar una inyección programática en el inicio.

Inyectar scripts de contenido desde una página de extensión

Si, en lugar de tener siempre inyectado un script de contenido basado en la URL, desea controlar directamente cuando se inyecta un script de contenido, puede usar la inyección programática .

Ejemplo minimo

• JavaScript

  chrome.tabs.executeScript({file: "content.js"});
  

• CSS

  chrome.tabs.insertCSS({file: "content.css"});
  

Llamado desde una página de extensión (por ejemplo, fondo o ventana emergente), y suponiendo que tiene permiso para inyectar, esto ejecutará content.js o insertará content.css como un script de contenido en el marco superior de la pestaña actual.

Código en línea

Puede ejecutar código en línea en lugar de un archivo como un script de contenido:

var code = "console.log('This code will execute as a content script');";
chrome.tabs.executeScript({code: code});

Elegir la pestaña

Puede proporcionar una ID de pestaña (generalmente de otros métodos o mensajes de chrome.tabs ) para ejecutar en una pestaña diferente a la activa actualmente.

chrome.tabs.executeScript({
  tabId: tabId,
  file: "content.js"
});

Hay más opciones disponibles en la documentación de chrome.tabs.executeScript() y en otros ejemplos.

Permisos

El uso de chrome.tabs.executeScript() no requiere el permiso de "tabs" , pero requiere permisos de host para la URL de la página.

Comprobando errores

Si la inyección de script falla, se puede detectar en la devolución de llamada opcional:

chrome.tabs.executeScript({file: "content.js"}, function() {
  if(chrome.runtime.lastError) {
    console.error("Script injection failed: " + chrome.runtime.lastError.message);
  }
});

Múltiples scripts de contenido en el manifiesto.

Las mismas condiciones, múltiples scripts.

Si necesita inyectar varios archivos con todas las demás condiciones iguales, por ejemplo, para incluir una biblioteca, puede enumerarlos todos en la matriz "js" :

"content_scripts" : [
  {
    "js": ["library.js", "content.js"],
    "matches": ["http://*.example.com/*"]
  }
]

Asuntos de orden: library.js se ejecutará antes de content.js .

Mismos guiones, múltiples sitios.

Si necesita inyectar los mismos archivos en varios sitios, puede proporcionar múltiples patrones de coincidencia:

"matches": ["http://example.com/*", "http://example.org/*"]

Si necesita insertar básicamente cada página, puede usar patrones de concordancia amplia como "*://*/*" (coincide con todas las páginas HTTP (S)) o "<all_urls>" (coincide con todas las páginas compatibles ).

Diferentes guiones o diferentes sitios.

"content_scripts" sección "content_scripts" es una matriz, por lo que uno puede definir más de un bloque de script de contenido:

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]