google-chrome-extension Tutorial
Empezando con google-chrome-extension

Observaciones

Ejemplo mínimo absoluto

Cualquier extensión de Chrome se inicia como una extensión desempaquetada : una carpeta que contiene los archivos de la extensión.

Un archivo que debe contener es manifest.json , que describe las propiedades básicas de la extensión. Muchas de las propiedades en ese archivo son opcionales, pero aquí hay un archivo manifest.json mínimo absoluto:

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0"
}

Cree una carpeta (por ejemplo, myExtension ) en algún lugar, agregue manifest.json como se indica arriba.

Luego, necesitas cargar la extensión en Chrome.

1. Abra chrome://extensions/ page, accesible a través de Menú> Más herramientas> Extensiones .
2. Habilite el modo de desarrollador con una casilla de verificación en la parte superior derecha, si aún no está habilitado.
3. Haga clic en el botón Cargar extensión desempaquetada ... y seleccione la carpeta myExtension creada.

¡Eso es! Chrome carga tu primera extensión:

Por supuesto, todavía no hace nada, por lo que es un buen momento para leer una descripción general de la arquitectura de extensión para comenzar a agregar las piezas que necesita.

Importante: cuando realice cambios en su extensión, no olvide volver a chrome://extensions/ y presione el enlace Recargar para su extensión después de realizar los cambios. En el caso de los scripts de contenido, vuelva a cargar la página de destino también.

Página de fondo

Las páginas de fondo son páginas implícitas que contienen scripts de fondo. Una secuencia de comandos de fondo es una secuencia de comandos de larga ejecución para administrar alguna tarea o estado. Existe durante toda la vida de su extensión, y solo una instancia de ella está activa a la vez.

Puedes declararlo así en tu manifest.json :

"background": {
    "scripts": ["background.js"]
}

El sistema de extensión generará una página de fondo que incluye cada uno de los archivos enumerados en la propiedad de scripts.

Tienes acceso a todas las API de chrome.* Permitidas.

Hay dos tipos de páginas de fondo: páginas de fondo persistentes que siempre están abiertas, y páginas de eventos que se abren y cierran según sea necesario.

Si desea que su página de fondo no sea persistente, solo tiene que establecer la persistent -flag en falso:

"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}

Esta secuencia de comandos de fondo solo está activa si se activa un evento en el que tiene un oyente registrado. En general usas un addListener para el registro.

Ejemplo: la aplicación o extensión se instala primero.

chrome.runtime.onInstalled.addListener(function() {
   console.log("The Extension is installed!");
});

Guiones de contenido

Un script de contenido es un código de extensión que se ejecuta junto con una página normal.

Tienen acceso completo al DOM de la página web (y, de hecho, son la única parte de la extensión que puede acceder al DOM de una página ), pero el código JavaScript está aislado, un concepto llamado Mundo aislado . Cada extensión tiene su propio contexto de JavaScript de script de contenido invisible para los demás y la página, lo que evita conflictos de código.

Ejemplo de definición en manifest.json :

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]

Los atributos tienen el siguiente significado:

Los scripts de contenido también se pueden inyectar a pedido mediante chrome.tabs.executeScript , que se denomina inyección programática .

Ver también

• Documentación oficial: Scripts de contenido
• Documentación de desbordamiento de pila: Scripts de contenido

Página de opciones

Las páginas de opciones se utilizan para dar al usuario la posibilidad de mantener la configuración de su extensión.

Versión 2

Desde Chrome 40, existe la posibilidad de tener la página de opciones como un diálogo predefinido en chrome: // extensions .

La forma de definir una página de opciones en manifest.json es como la siguiente:

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}

Esta página de opciones se comportará como un diálogo, se abrirá como una ventana emergente, donde se mostrará el options.html . chrome_style aplicará una hoja de estilo de Chrome por motivos de coherencia de estilo a su página de opciones.

Las opciones se mostrarán automáticamente a través del menú contextual del botón de extensión o la página de extensiones chrome: // .

También puede abrir la página de opciones mediante programación , por ejemplo, desde una interfaz de usuario emergente:

chrome.runtime.openOptionsPage();

Versión 1 ( obsoleta )

Ejemplo de definición en manifest.json :

"options_page": "options.html"

Se recomienda usar la Versión 2, ya que el comportamiento de options_ui se aplicará pronto a las páginas de opciones de la Versión 1.

Almacenamiento

Normalmente, la configuración debe persistir, por lo que se recomienda usar la API chrome.storage . Los permisos se pueden declarar así en el manifest.json :

"permissions": [
   "storage"
]

Documentacion oficial

• Página de opciones - Versión 1
• Página de opciones - Versión 2
• API de almacenamiento

Crear una nueva pestaña

En el código de extensión, puedes usar cualquier API de chrome.* Si has despachado los permisos requeridos. Además, algunas API solo funcionan desde páginas de fondo, y algunas API solo funcionan desde scripts de contenido.

Puede utilizar la mayoría de los métodos chrome.tabs que declaran cualquier permiso. Ahora nos centramos en chrome.tabs.create

_{Nota: la nueva pestaña se abrirá sin ningún aviso popup .}

chrome.tabs.create({
       url:"http://stackoverflow.com",
       selected:false  // We open the tab in the background
})

Puedes aprender más sobre el objeto de pestaña, en el desarrollador oficial de Chrome