Compartir a través de

Crear un tutorial de extensión, parte 2

  • Artículo

Para ver el origen del paquete de extensión completado para esta parte del tutorial, vaya a Extensión del repositorio > MicrosoftEdge-Extensions-getting-started-part2.

En este tutorial se tratan las siguientes tecnologías de extensión:

  • Inserción de bibliotecas de JavaScript en una extensión.
  • Exposición de recursos de extensión a pestañas del explorador.
  • Incluir páginas de contenido en pestañas de explorador existentes.
  • Hacer que las páginas de contenido escuchen los mensajes de los elementos emergentes y respondan.

Aprenderá a actualizar el menú emergente para reemplazar la imagen de estrellas estáticas por un título y un botón HTML estándar. Ese botón, cuando se selecciona, pasa esa imagen de estrellas a la página de contenido. Esta imagen ahora se inserta en la extensión y se inserta en la pestaña del explorador activo. Estos son los pasos.

Estos pasos requieren que complete los pasos iniciales del paquete de extensión, en el tutorial Creación de una extensión, parte 1.

Paso 1: Actualizar pop-up.html para incluir un botón

En la carpeta emergente donde creó el popup.html archivo, hará lo siguiente:

  1. Agregue el etiquetado que muestra un título con un botón.
  2. Incluya una referencia a un archivo popup.jsJavaScript vacío.
  3. Programe ese botón.

A continuación se muestra un archivo HTML actualizado de ejemplo:

<html>
    <head>
        <meta charset="utf-8" />
        <style>
            body {
                width: 500px;
            }
            button {
                background-color: #336dab;
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h1>Display the NASA picture of the day</h1>
        <h2>(select the image to remove)</h2>
        <button id="sendmessageid">Display</button>
        <script src="popup.js"></script>
    </body>
</html>

Después de actualizar y abrir la extensión, se abre un elemento emergente con un botón para mostrar:

popup.html mostrar después de seleccionar el icono De extensión

Paso 2: Actualizar popup.html para mostrar la imagen en la parte superior de la pestaña del explorador

Después de agregar el botón, la siguiente tarea consiste en hacer que aparezca el images/stars.jpeg archivo de imagen en la parte superior de la página de pestaña activa.

Cada página de tabulación (y extensión) se ejecuta en su propio subproceso. Cree un script de contenido que se inserte en la página de tabulación. A continuación, envíe un mensaje desde el elemento emergente a ese script de contenido que se ejecuta en la página de pestaña. El script de contenido recibirá el mensaje, que describe qué imagen se debe mostrar.

Paso 3: Crear el javaScript emergente para enviar un mensaje

Cree el popup/popup.js archivo y agregue código para enviar un mensaje al script de contenido no creado aún que debe crear e insertar momentáneamente en la pestaña del explorador. Para ello, el código siguiente agrega un onclick evento al botón mostrar emergente:

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
  sendMessageId.onclick = function() {
    // do something
  };
}

En el onclick evento , busque la pestaña del explorador actual. A continuación, use la chrome.tabs.sendmessage API de extensión para enviar un mensaje a esa pestaña.

En ese mensaje, debe incluir la dirección URL de la imagen que desea mostrar. Asegúrese de enviar un identificador único para asignarlo a la imagen insertada.

Para enviar un identificador único para asignar a la imagen insertada, es posible un par de enfoques diferentes:

  • Enfoque 1: permita que la inserción de contenido de JavaScript genere ese identificador de imagen. No usaremos ese enfoque aquí, por razones que se vuelven evidentes más adelante.
  • Enfoque 2: genere ese identificador único aquí en popup.jsy, a continuación, pase ese identificador al script de contenido que aún no se ha creado. Usaremos este enfoque.

En el código siguiente se describe el código actualizado en popup/popup.js. También se pasa el identificador de pestaña actual, que se usará más adelante en este artículo:

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
    sendMessageId.onclick = function() {
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {
                    url: chrome.runtime.getURL("images/stars.jpeg"),
                    imageDivId: `${guidGenerator()}`,
                    tabId: tabs[0].id
                },
                function(response) {
                    window.close();
                }
            );
            function guidGenerator() {
                const S4 = function () {
                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                };
                return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
            }
        });
    };
}

Paso 4: Hacer que esté stars.jpeg disponible desde cualquier pestaña del explorador

Para que esté images/stars.jpeg disponible desde cualquier pestaña del explorador, debe usar la chrome.runtime.getURL API.

Nota: Si usa Manifiesto V2, use chrome.extension.getURLen su lugar . Ese prefijo adicional lo devuelve getURL con la imagen adjunta y tiene un aspecto similar al siguiente: httpextension://inigobacliaghocjiapeaaoemkjifjhp/images/stars.jpeg

El motivo es que va a insertar la imagen mediante el src atributo del img elemento en la página de contenido. La página de contenido se ejecuta en un subproceso único que no es el mismo que el subproceso que ejecuta la extensión. Debe exponer el archivo de imagen estática como un recurso web para que funcione correctamente.

Agregue otra entrada en el manifest.json archivo para declarar que la imagen está disponible para todas las pestañas del explorador. Esa entrada es la siguiente (debería verla en el archivo completo manifest.json siguiente cuando agregue la declaración de script de contenido que aparece):

"web_accessible_resources": [
    {
      "resources": ["images/*.jpeg"],
      "matches": ["<all_urls>"]
    }
  ]

Ahora ha escrito el código en popup.js el archivo para enviar un mensaje a la página de contenido que está incrustada en la página de pestaña activa actual, pero no ha creado ni insertado esa página de contenido. Hazlo ahora.

Paso 5: Actualización del manifest.json nuevo contenido y acceso web

La actualización manifest.json que incluye y web_accessible_resources es la content-scripts siguiente:

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "js": ["lib/jquery.min.js","content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["images/*.jpeg"],
            "matches": ["<all_urls>"]
        }
    ]
}

El matches atributo se establece <all_urls>en , lo que significa que todos los archivos de se insertan en content_scripts todas las páginas de pestaña del explorador cuando se carga cada pestaña. Los tipos de archivos permitidos que se pueden insertar son JavaScript y CSS. También agregó lib\jquery.min.js. Puede incluirlo en la descarga mencionada en la parte superior de la sección.

Agregar jQuery

En los scripts de contenido que va a insertar, planee el uso de jQuery ($). Ha agregado una versión minificada de jQuery y la ha colocado en el paquete de extensión como lib\jquery.min.js. Estos scripts de contenido se ejecutan en espacios aislados individuales, lo que significa que jQuery insertado en la popup.js página no se comparte con el contenido.

Descripción del subproceso

Incluso si la pestaña del explorador tiene JavaScript en ejecución en la página web cargada, cualquier contenido insertado no tiene acceso a ese JavaScript. JavaScript insertado solo tiene acceso al DOM real que se carga en esa pestaña del explorador.

Paso 6: Agregar el agente de escucha del mensaje de script de contenido

Este es el content-scripts\content.js archivo que se inserta en cada página de pestaña del explorador en función de la manifest.jsoncontent-scripts sección:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    $("body").prepend(
        `<img  src="${request.url}" id="${request.imageDivId}"
               class="slide-image" /> `
    );
    $("head").prepend(
        `<style>
          .slide-image {
              height: auto;
              width: 100vw;
          }
        </style>`
    );
    $(`#${request.imageDivId}`).click(function() {
        $(`#${request.imageDivId}`).remove(`#${request.imageDivId}`);
    });
    sendResponse({ fromcontent: "This message is from content.js" });
});

Tenga en cuenta que lo único que hace javaScript anterior es registrar mediante listener el método de la chrome.runtime.onMessage.addListener API de extensión. Este agente de escucha espera mensajes como el que envió desde el popup.js descrito anteriormente con el chrome.tabs.sendMessage método de la API de extensión.

El primer parámetro del addListener método es una función cuyo primer parámetro, request, es los detalles del mensaje que se pasa. Recuerde que, desde popup.js, cuando usó el sendMessage método , esos atributos del primer parámetro son url y imageDivId.

Cuando el agente de escucha procesa un evento, se ejecuta la función que es el primer parámetro. El primer parámetro de esa función es un objeto que tiene atributos asignados por sendMessage. Esa función simplemente procesa las tres líneas de script de jQuery.

  • La primera línea de script anexa un img elemento justo debajo de la body pestaña del explorador que tiene la slide-image clase asignada, así como el imageDivId identificador de ese elemento de imagen.

  • La segunda línea de script inserta dinámicamente en el encabezado DOM una <sección de estilo> que debe asignar como clase slide-image al img elemento.

  • La tercera línea de script agrega un click evento que cubre toda la imagen, lo que permite al usuario seleccionar en cualquier lugar de la imagen y esa imagen se quita de la página (junto con ella es agente de escucha de eventos).

  1. Agregar funcionalidad para quitar la imagen mostrada cuando se selecciona

Ahora, cuando vaya a cualquier página y seleccione el icono De extensión , el menú emergente se muestra de la siguiente manera:

popup.html mostrar después de seleccionar el icono De extensión

Al seleccionar el Display botón, obtendrá lo que se muestra a continuación. Si selecciona en cualquier lugar de la stars.jpeg imagen, ese elemento de imagen se quita y las páginas de tabulación se contraen a lo que se mostró originalmente:

Imagen que se muestra en el explorador

Enhorabuena. Ha creado una extensión que envía correctamente un mensaje desde la ventana emergente del icono de extensión e inserta dinámicamente JavaScript que se ejecuta como contenido en la pestaña del explorador. El contenido insertado establece el elemento de imagen para mostrar el archivo de estrellas .jpeg estáticas.

Vea también