Compartir a través de

Ejemplo: Insertador de imágenes mediante script de contenido

  • Artículo

En este ejemplo se usa código JavaScript para insertar la stars.jpeg imagen en la parte superior de la página web actual, dentro del <body> elemento . El elemento emergente de la extensión contiene un título y un botón HTML con la etiqueta Insertar imagen. Al hacer clic en el botón Insertar imagen , el código JavaScript de la extensión envía un mensaje desde el elemento emergente del icono de extensión e inserta dinámicamente JavaScript que se ejecuta en la pestaña del explorador.

En este ejemplo se muestran las siguientes características 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 web de contenido en pestañas de explorador existentes.
  • Hacer que las páginas web de contenido escuchen los mensajes de los elementos emergentes y respondan.

Vista previa del ejemplo

Para instalar el ejemplo de extensión, use la pestaña Administrar extensiones del explorador, haga clic en el botón Extensiones (icono Extensiones) para mostrar la lista de extensiones instaladas y, a continuación, haga clic en esta extensión de ejemplo:

Hacer clic en el icono de la extensión para abrir la extensión

La extensión muestra una página web HTML pequeña en un elemento emergente, que contiene un título, un botón Insertar imagen e instrucciones:

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

Al hacer clic en el botón Insertar imagen , el código JavaScript se stars.jpeg inserta temporalmente en la parte superior de la página web actual e inserta el contenido de la página web en debajo de la imagen. El contenido insertado establece el elemento image para mostrar la imagen stars.jpeg estática en la parte superior de la página web actual:

Imagen que se muestra en el explorador

Al hacer clic en la imagen, javaScript insertado quita la imagen del árbol DOM y de la página web.

Obtenga, instale y ejecute el ejemplo como se indica a continuación.

Clonación del repositorio de MicrosoftEdge-Extensions

Puede usar varias herramientas para clonar un repositorio de GitHub. Puede descargar un directorio seleccionado o clonar todo el repositorio.

Clone el repositorio MicrosoftEdge-Extensions en la unidad local y, a continuación, cambie a una rama de trabajo, como se indica a continuación.

  1. En un símbolo del sistema, escriba git para comprobar si git está instalado.

  2. Si aún no ha terminado, descargue git e instálelo.

  3. Si aún no ha terminado, inicie un símbolo del sistema en el que esté instalado Git.

  4. Cambie al directorio en el que desea clonar el repositorio MicrosoftEdge-Extensions . Por ejemplo:

    cd C:/Users/localAccount/GitHub/

  5. En Microsoft Edge, vaya al repositorio MicrosoftEdge-Extensions .

  6. Haga clic en la flecha abajo del lado derecho del botón verde Código y, a continuación, en la sección Clonar mediante la dirección URL web , haga clic en el botón Copiar dirección URL al Portapapeles junto a https://github.com/microsoft/MicrosoftEdge-Extensions.git.

  7. En la ventana del símbolo del sistema, escriba el comando:

    git clone https://github.com/microsoft/MicrosoftEdge-Extensions.git

    El /MicrosoftEdge-Extensions/ directorio se agrega dentro del directorio especificado.

Crear una rama de trabajo y cambiar a ella

  1. Compruebe la lista de directorios:

    ls

    Se /MicrosoftEdge-Extensions/ muestra el directorio.

  2. Cambie al nuevo directorio:

    cd MicrosoftEdge-Extensions

  3. Cree una rama de trabajo:

    git branch test

  4. Cambie a la rama de trabajo:

    git switch test

    Devuelve: Switched to branch 'test'

Ahora puede modificar el código de la rama de trabajo sin modificar el código que se encuentra en la rama "principal" del repositorio. Más adelante es posible que quiera volver a la rama "principal" o crear una rama diferente basada en la rama "principal".

Instalar el ejemplo localmente

En lugar de instalar el ejemplo desde la Tienda, instalará el ejemplo localmente, para que pueda modificarlo y probar rápidamente los cambios. A veces, la instalación local se denomina instalación local de una extensión.

  1. En Microsoft Edge, haga clic en el botón Extensiones (icono Extensiones), junto a la barra Dirección, si se muestra este icono. O bien, seleccione Configuración y mucho más (el icono >Icono extensionesExtensiones. Se abre el elemento emergente Extensiones :

    El elemento emergente Extensiones cuando no se instala ninguna extensión

  2. Haga clic en Administrar extensiones. La página Administración de extensiones se abre en una nueva pestaña:

    Activar el modo de desarrollador

  3. Active el botón de alternancia Modo de desarrollador .

  4. Al instalar la extensión de ejemplo por primera vez, haga clic en el botón Cargar desempaquetado (el icono "). Se abre el cuadro de diálogo Seleccionar el directorio de extensión .

  5. Seleccione el directorio que contiene los archivos de origen de la extensión, como manifest.json.

    Ruta de acceso de ejemplo:

    C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script

  6. Haga clic en el botón Seleccionar carpeta .

    Se cierra el cuadro de diálogo Seleccionar el directorio de extensión .

    La extensión se instala en el explorador, de forma similar a una extensión instalada desde el almacén:

    Página De extensiones instaladas, que muestra una extensión de prueba

Ejecutar el ejemplo

  1. Vaya a una página web, como la aplicación TODO, en una nueva ventana o pestaña. La pestaña no debe estar vacía y no debe ser la página Administrar extensiones, ya que este ejemplo inserta contenido en la página web actual.

  2. Actualice la página web. Esto a veces es necesario después de volver a cargar una extensión.

  3. En Microsoft Edge, a la derecha de la barra de direcciones, si se muestra este icono, haga clic en el botón Extensiones (icono Extensiones). O bien, seleccione Configuración y mucho más (el icono >Extensiones.

    Se abre el elemento emergente Extensiones :

    Hacer clic en el icono de la extensión para abrir la extensión

  4. Haga clic en el icono o el nombre de la extensión (insertador de imágenes mediante el script de contenido).

    Se abre la extensión y el icono de la extensión se agrega junto a la barra de direcciones y el icono Extensiones (extensiones).

    Se abre un elemento emergente que contiene una página web HTML pequeña con un título, un botón Insertar imagen e instrucciones:

    popup.html después de hacer clic en el icono de la extensión

  5. Haga clic en el botón Insertar imagen . stars.jpeg se inserta en la parte superior de la página web actual en la pestaña actual, insertando el contenido de la página web debajo de la imagen:

    Imagen que se muestra en el explorador

  6. Haga clic en la stars.jpeg imagen que rellena la parte superior de la página web. Ese elemento de imagen se quita del árbol DOM y la página web, y se restaura la página web actual, desplazando su contenido hacia arriba hasta la parte superior de la pestaña.

La extensión envía un mensaje desde el elemento 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 que se va a mostrar stars.jpeg en la parte superior de la página web actual y, a continuación, quita la imagen al hacer clic en la imagen.

Vea también:

Estudio del ejemplo

En las secciones siguientes, estudiará el ejemplo. Después, para desarrollar su propia extensión de Microsoft Edge, puede copiar y modificar el directorio del ejemplo e instalar y probar la extensión resultante.

Archivos y directorios

El ejemplo tiene la siguiente estructura de directorios y archivos.

Ruta de acceso de ejemplo para el ejemplo:

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script

Directorios y archivos en el /picture-inserter-content-script/ directorio:

/content-scripts/
   content.js
/icons/
   extension-icon16x16.png
   extension-icon32x32.png
   extension-icon48x48.png
   extension-icon128x128.png
/images/
   stars.jpeg
/popup/
   popup.html
   popup.js
manifest.json
  • El /content-scripts/ directorio contiene content.js, que es el script que se inserta en la página web actual.
  • El /icons/ directorio contiene versiones de un .png archivo que se usa para representar la extensión cerca de la barra de direcciones del explorador, en el elemento emergente Extensiones y en la página Administración de extensiones .
  • El /images/ directorio contiene stars.jpeg, que se muestra en el elemento emergente de la extensión.
  • El /popup/ directorio contiene los archivos:
    • popup.html define el contenido de la página web emergente inicial de la extensión (un título, un botón e instrucciones).
    • popup.js para la página web emergente inicial envía un mensaje al script de contenido (content.js) que se ejecuta en la página de pestaña, especificando qué archivo de imagen se va a mostrar.
  • manifest.json contiene información básica sobre la extensión.

Estrategia para actualizar la página web para insertar la imagen en la parte superior (stars.jpeg)

Este ejemplo incluye un script de contenido que se inserta en la página web que se carga en la pestaña del explorador actual.

  1. Al ejecutar el ejemplo de extensión, se muestra la página HTML emergente inicial (popup.html), que muestra un título, instrucciones y el botón Insertar imagen .

  2. Al hacer clic en el botón Insertar imagen , JavaScript (popup.js) de la página emergente inicial envía un mensaje al script de contenido (content.js) que se ejecuta en la página de pestaña. El mensaje especifica qué archivo de imagen se va a mostrar.

  3. El script de contenido (content.js) que se ejecuta en la página de pestaña recibe el mensaje y muestra el archivo de imagen especificado (stars.jpeg).

Página web emergente inicial (popup.html)

/popup/popup.html se especifica en el archivo de manifiesto como la página web que se va a mostrar en el elemento emergente inicial de la extensión. El archivo de manifiesto contiene el campo "default_popup": "popup/popup.html"clave . El archivo de popup.html este ejemplo es una página web pequeña que contiene un título, un botón Insertar imagen e instrucciones.

popup.html:

<!DOCTYPE html>
<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>Picture inserter using a content script</h1>
        <button id="sendmessageid">Insert picture</button>
        <script src="popup.js"></script>
        <p>Click the displayed image to remove it from the webpage.</p>
    </body>
</html>

JavaScript (popup.js) para la página emergente inicial, para enviar un mensaje al Código JavaScript insertado

/popup/popup.js envía un mensaje al script de contenido (content.js) que se inserta temporalmente en la pestaña del explorador. Para ello, popup.js agrega un onclick evento al botón Insertar imagen de la página web emergente, que tiene el identificador sendmessageid:

popup.js (parte):

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

En popup.js, chrome.tabs.query busca la pestaña del explorador actual y, a continuación, chrome.tabs.sendMessage envía un mensaje a esa pestaña. El ejemplo pasa el identificador de la pestaña actual. El mensaje debe incluir la dirección URL de la imagen que se mostrará.

Debe enviar un identificador único para asignarlo a la imagen insertada, con el fin de volver a encontrar el elemento image más adelante y eliminarlo. Para enviar un identificador único para asignarlo a la imagen insertada, el identificador único se genera en popup.js y se pasa al script de contenido.

popup.js (completado):

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: crypto.randomUUID(),
                    tabId: tabs[0].id
                },
                function(response) {
                    window.close();
                }
            );
        });
    };
}

Agente de escucha de mensajes de script de contenido (content.js)

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

content.js (completado):

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  const img = document.createElement("img");
  img.id = request.imageDivId;
  img.src = request.url;
  img.style = "height: auto; width: 90vw;";
  document.body.prepend(img);

  img.addEventListener("click", () => {
      img.remove();
  }, { once: true });

  sendResponse({ fromcontent: "This message is from content.js" });
});

content.js registra un agente de escucha mediante el método de la chrome.runtime.onMessage.addListener API de extensión. Este agente de escucha espera el mensaje que se envía cuando popup.js llama a chrome.tabs.sendMessage.

En content.js, el addListener método toma un único parámetro que es una función. El primer parámetro de esa función, request, contiene los detalles del mensaje que se pasa.

En content.js, cuando el agente de escucha procesa un evento, se ejecuta la función de agente de escucha a addListener la que se pasa. El primer parámetro de la función de escucha pasada es un request objeto que tiene atributos asignados por sendMessage.

En popup.js, para la chrome.tabs.sendMessage llamada al método, los atributos del segundo parámetro para sendMessage son url, imageDivIdy tabId.

Esta es la función de agente de escucha aislada que se pasa a addListener:

content.js (parte)

function(request, sender, sendResponse) {
  const img = document.createElement("img");
  img.id = request.imageDivId;
  img.src = request.url;
  img.style = "height: auto; width: 90vw;";
  document.body.prepend(img);

  img.addEventListener("click", () => {
      img.remove();
  }, { once: true });

  sendResponse({ fromcontent: "This message is from content.js" });
}

Las cinco primeras líneas de la función de agente de escucha anexan un img elemento inmediatamente debajo del body elemento de la pestaña del explorador.

La segunda línea de la función de agente de escucha, img.id = request.imageDivId;, establece el identificador del img elemento en el imageDivId de la solicitud pasada.

En la función de agente de escucha, la addEventListener llamada agrega una click función de agente de escucha de eventos que cubre toda la imagen, lo que permite al usuario hacer clic en cualquier lugar de la imagen. Al hacer clic en la imagen insertada, la línea img.remove();quita la imagen de la página web actual y también se quita el agente de escucha de eventos, especificando { once: true }.

Cómo stars.jpeg está disponible desde cualquier pestaña del explorador

Para que esté images/stars.jpeg disponible desde cualquier pestaña del explorador:

  • popup.js (anterior) usa la chrome.runtime.getURL API.
  • El manifiesto (a continuación) especifica que web_accessible_resources el tipo .jpeg coincide con todas las direcciones URL.

El ejemplo inserta 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. El archivo de imagen estática debe exponerse como un recurso web para que funcione correctamente.

Se agrega otra entrada en el manifest.json archivo para declarar que la imagen está disponible para todas las pestañas del explorador:

/manifest.json (parte):

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

El código del popup.js archivo envía un mensaje a la página de contenido incrustada en la página de pestaña activa actual.

Cómo se enumeran los recursos en el manifiesto (manifest.json)

El ejemplo crea e inserta la página de contenido incrustada en la página de pestaña activa actual. manifest.json incluye y content-scriptsweb_accessible_resources, como se indica a continuación:

/manifest.json (completado):

{
    "name": "Picture inserter using content script",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "A browser extension that uses JavaScript to insert an image at the top of the current webpage.",
    "icons": {
        "16": "icons/extension-icon16x16.png",
        "32": "icons/extension-icon32x32.png",
        "48": "icons/extension-icon48x48.png",
        "128": "icons/extension-icon128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "js": ["content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["images/*.jpeg"],
            "matches": ["<all_urls>"]
        }
    ]
}

La sección del content_scripts manifiesto inserta JavaScript en todas las pestañas del explorador.

En la content_scripts sección clave del archivo de manifiesto, el matches atributo se establece <all_urls>en , lo que significa que .js los archivos (o .css) especificados en la content_scripts sección clave se insertan en todas las páginas de pestañas del explorador cuando se carga cada pestaña. Los tipos de archivos permitidos que se pueden insertar son JavaScript (.js) y CSS (.css).

El manifiesto de este ejemplo especifica un único script de contenido, content-scripts/content.js.

Cada script de contenido se ejecuta en su propio subproceso, espacio aislado

Cada página de tabulación (y extensión) se ejecuta en su propio subproceso. Incluso si la pestaña del explorador contiene una página web que ejecuta código JavaScript, el content.js script insertado en esa pestaña del explorador por la extensión no tiene acceso a ese código JavaScript. El script de contenido insertado solo tiene acceso al DOM de la página web.

Pasos siguientes

Para desarrollar su propia extensión de Microsoft Edge, puede copiar y modificar el directorio del ejemplo e instalar y probar la extensión resultante.

Recursos adicionales

GitHub: