Si te estás preguntando cómo hacer una extensión de Chrome, extensiondocumentation de Chrome es ideal para implementaciones básicas. Sin embargo, para usar más funciones avanzadas requiere mucho googleo y desbordamiento de pila. Hagamos una extensión intermedia de Chrome que interactúe con la página: encontrará el primer enlace externo en la página y lo abrirá en una nueva pestaña.

manifiesto.json

El manifiesto.el archivo json le dice a Chrome información importante sobre yourextension, como su nombre y qué permisos necesita.,

la extensión más básica posible es un directorio con un archivo manifest.json.Vamos a crear un directorio y poner la siguiente JSONinto manifest.json:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" }

Eso es lo más básico posible manifest.json, con todos los campos requeridos filledin. El manifest_version siempre debe ser 2, porque la versión 1 no es compatible a partir de enero de 2014. Hasta ahora nuestra extensión no hace absolutamente nada, pero vamos a cargarlo en Chrome de todos modos.,

cargue su extensión en Chrome

para cargar su extensión en Chrome, abra chrome://extensions/ en su navegador y haga clic en «modo de desarrollador» en la parte superior derecha. Ahora haga clic en «Load unpackedextension.» y seleccione el directorio de la extensión. Ahora deberías ver yourextension en la lista.

Cuando cambie o agregue código en su extensión, simplemente regrese a esta página y cargue la página. Chrome recargará tu Extensión.

scripts de contenido

un script de contenido es «un archivo JavaScript que se ejecuta en el contexto de las páginas web.,»Esto significa que un script de contenido puede interactuar con las páginas web que el navegador visita. No todos los archivos JavaScript en una extensión de Chrome pueden hacer esto; veremos por qué más adelante.

agreguemos un script de contenido llamado content.js:

// content.js alert("Hello from your Chrome extension!")

para inyectar el script, necesitamos decirle a nuestro archivo manifest.json sobre él.,

Agregar esto a su manifest.json archivo:

"content_scripts": , "js": } ]

Este le dice a Chrome para inyectar content.js en cada página que visita el uso de thespecial <all_urls> patrón de URL. Si queremos inyectar el script solo en algunas páginas, podemos usar patrones de coincidencia. Estos son algunos ejemplos de valores para"matches":

recargar la extensión de Chrome. Cada página que visita ahora aparece una alerta. Vamos a registrar la primera URL en la página en su lugar.,

registrar la URL

jQuery no es necesario, pero hace que todo sea más fácil. Primero, descargue aversion of jQuery desde la CDN de jQuery y colóquela en la carpeta de su extensión. Idownloaded la última versión minificada, jquery-2.1.3.min.js. Para cargarlo, addit a manifest.json antes de "content.js"., Todo su manifest.json debería tener este aspecto:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] }

ahora que tenemos jQuery, usémoslo para registrar la URL del primer enlace externo en la página en content.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref);

tenga en cuenta que no necesitamos usar jquery para comprobar si el documento se ha cargado. Bydefault, Chrome inyecta scripts de contenido después de completar el DOM.

pruébelo-debería ver la salida en su consola en cada página que visite.,

acciones del navegador

Cuando una extensión agrega un pequeño icono junto a la barra de direcciones, esa es una acción del navegador. Su extensión puede escuchar los clics en ese botón y luego hacer algo.

poner el icono.png del tutorial de extensión de Google en su carpeta de extensión y agregue esto a manifest.json:

"browser_action": { "default_icon": "icon.png" }

para usar la acción del navegador, necesitamos agregar el paso de mensajes.

paso de mensajes

un script de contenido tiene acceso a la página actual, pero está limitado en las API a las que puede acceder., Por ejemplo, no puede escuchar los clics en la acción del navegador. Necesitamos agregar un tipo diferente de script a nuestra Extensión, un script en segundo plano,que tenga acceso a todas las API de Chrome pero no pueda acceder a la página actual. AsGoogle lo pone:

Los scripts de contenido tienen algunas limitaciones. Se puede usar chrome.* Api, conla excepción de extension, i18n, runtime y storage.,

por lo que el script de contenido podrá extraer una URL de la página actual, pero tendrá que entregar esa URL al script de fondo para hacer algo útil con ella. Para comunicarnos, usaremos lo que Google llama paso de mensajes, que permite a los scripts enviar y escuchar mensajes. Es la única manera de interactuar entre scripts de contenido y scripts de fondo.,

agregue lo siguiente para decirle a manifest.json sobre el script de fondo:

"background": { "scripts": }

ahora agregaremos background.js:

esto envía una carga JSON arbitraria a la pestaña actual. Las claves de JSONpayload pueden ser cualquier cosa, pero elegí "message" por simplicidad. Ahora necesitamos tolisten para ese mensaje en content.js:

tenga en cuenta que todo nuestro código anterior se ha movido al receptor, por lo que solo se ejecuta cuando se recibe la carga útil., Cada vez que haga clic en el icono browseraction, debería ver una URL que se registra en la consola. Si no funciona, intente recargar la extensión y luego recargar la página.

Abrir una nueva pestaña

podemos utilizar la etiqueta chrome.tabs API para abrir una nueva pestaña:

chrome.tabs.create({"url": "http://google.com"});

Pero chrome.tabs sólo puede ser utilizado por background.js, así que vamos a añadir somemore paso de mensajes desde background.js puede abrir la ficha, pero no puede agarrar theURL., Esta es la idea:

  1. escucha para hacer clic en la acción del navegador en background.js. Cuando esté pulsado, envíe un evento clicked_browser_action a content.js.
  2. cuando content.js recibe el evento, toma la URL del primer enlace en la página. Luego envía open_new_tab de vuelta a background.js con la URL toopen.
  3. background.js escucha open_new_tab y se abre una nueva pestaña con el givenURL cuando se recibe el mensaje.,

Al hacer clic en la acción del navegador se activarábackground.js, que enviará un mensaje acontent.js, que enviará una URL de vuelta abackground.js, que abrirá una nueva pestaña con la URL dada.

primero, necesitamos decirle a content.jspara enviar la URL a background.js., Cambiarcontent.js para usar este código:

Ahora necesitamos agregar algún código para decirle a background.js para escuchar ese evento:

Ahora cuando hace clic en el icono de acción del navegador, se abre una nueva pestaña con la primera URL externa en la página.

conclusión

completa content.js y background.js están por encima., Aquí está el manifest.json:

y aquí está la estructura de directorios completa:

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json

más sobre cómo hacer una extensión de Chrome

para obtener más información, pruebe la documentación oficial de la extensión de Chrome.