Ejemplo: Página web emergente del visor de imágenes

Este ejemplo es una extensión del explorador, sin JavaScript, que muestra la stars.jpeg imagen en una página web pequeña en un elemento emergente en cualquier pestaña de Microsoft Edge:

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.

Símbolo del sistema de Git Bash

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".

Escritorio de GitHub

1. Si aún no lo ha hecho, instale el escritorio de GitHub: vaya a y, a https://github.com/apps/desktopcontinuación, haga clic en el botón Descargar ahora .

2. Vaya al repositorio MicrosoftEdge-Extensions .

3. Haga clic en el botón Código y, a continuación, seleccione Abrir con GitHub Desktop.

   Se abre un cuadro de diálogo que indica que este sitio está intentando abrir GitHubDesktop.exe.

4. Haga clic en el botón Abrir .

   Se abre GitHub Desktop, con el repositorio MicrosoftEdge-Extensions seleccionado en la lista desplegable superior izquierda.

   O bien, en GitHub Desktop, se abre el cuadro de diálogo Clonar un repositorio :

   

5. Especifique la ruta de acceso de la unidad local en la que colocar el directorio del repositorio clonado; por ejemplo: C:\Users\accountname\GitHub\.

6. Haga clic en el botón Clonar .

Crear una rama de trabajo y cambiar a ella

1. En GitHub Desktop, asegúrese de que, en la parte superior izquierda del escritorio de GitHub, el repositorio actual es MicrosoftEdge-Extensions.

   En la lista desplegable Rama actual , dice principal.

2. En la lista desplegable Rama actual , haga clic en la pestaña Ramas y, a continuación, haga clic en el botón Nueva rama .

   Se abre el cuadro de diálogo Crear una rama .

3. En el cuadro de texto Nombre , escriba un nombre de rama, como prueba, y, a continuación, haga clic en el botón Crear rama .

   En la parte superior media e inferior izquierda de GitHub Desktop, se muestra la rama actual, como la prueba.

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 (), junto a la barra Dirección, si se muestra este icono. O bien, seleccione Configuración y mucho más (>Extensiones. Se abre el elemento emergente Extensiones :

   

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

   

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

4. Al instalar la extensión por primera vez, haga clic en el botón Cargar desempaquetado ("). 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-viewer-popup-webpage

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:

   

Ejecutar el ejemplo

1. Vaya a una página web, como la aplicación TODO, en una nueva ventana o pestaña. Para este ejemplo, este paso es opcional y solo es para coincidir con las capturas de pantalla; Este ejemplo no requiere que se abra una página web.

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 (). O bien, seleccione Configuración y mucho más (>Extensiones.

   Se abre el elemento emergente Extensiones :

   

4. Haga clic en el icono o el nombre de la extensión (página web emergente Visor de imágenes).

   Se abre la extensión y el icono de la extensión se agrega junto a la barra de direcciones y el icono Extensiones ( La extensión muestra popup.html, que contiene stars.jpeg, en un elemento emergente:

   

5. Haga clic en el botón de la extensión junto a la barra de direcciones. Se cierra la ventana emergente.

Vea también:

• Transferir localmente una extensión para instalarla y probarla localmente

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:

Ruta de acceso de ejemplo para el ejemplo:

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage

Directorios y archivos en el /picture-viewer-popup-webpage/ directorio:

/icons/
   extension-icon16x16.png
   extension-icon32x32.png
   extension-icon48x48.png
   extension-icon128x128.png
/images/
   stars.jpeg
/popup/
   popup.html
manifest.json

• 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.
• El /images/ directorio contiene stars.jpeg, que se muestra en el elemento emergente de la extensión.
• El /popup/ directorio contiene popup.html, que define el contenido de la página web que se muestra en el elemento emergente de la extensión.
• manifest.json contiene información básica sobre la extensión.

El archivo de manifiesto (manifest.json)

Cada paquete de extensión debe tener un manifest.json archivo en la raíz. El manifiesto proporciona detalles de la extensión, la versión del paquete de extensión y el nombre y la descripción de la extensión.

manifest.json contiene las líneas siguientes:

{
  "name": "Picture viewer pop-up webpage",
  "version": "0.0.0.1",
  "manifest_version": 3,
  "description": "A browser extension that displays an image in a pop-up 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"
  }
}

Iconos para iniciar la extensión

El /icons/ directorio contiene los archivos de imagen de icono. Los iconos se usan como imagen de fondo para el botón en el que se hace clic para iniciar la extensión:

Cuando se ejecuta la extensión, se muestra uno de los iconos en la barra de herramientas, junto a la barra de direcciones:

Para cerrar la extensión, haga clic en el icono de la extensión en la barra de herramientas o haga clic en el botón Extensiones ().

Recomendaciones para iconos:

• Use PNG formato, pero también puede usar BMPformatos , ICOGIFo JPEG .
• Si proporcionas un único archivo de icono, usa 128 x 128 px, que el explorador puede cambiar de tamaño si es necesario.

Cuadro de diálogo emergente (popup.html)

popup.html en el /popup/ directorio se ejecuta al iniciar la extensión. Al hacer clic en el icono para iniciar la extensión, este archivo se muestra como un cuadro de diálogo modal.

popup.html contiene el código siguiente para mostrar un título y la imagen de estrellas:

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Picture viewer pop-up webpage</title>
    </head>
    <body>
        <div>
            <img src="/images/stars.jpeg" alt="Stars" />
        </div>
    </body>
</html>

La página web emergente (popup.html) se registra como en "default_popup"manifest.json, en la action sección clave:

manifest.json (parte)

{
    "action": {
        "default_popup": "popup/popup.html"
    }
}

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.

Después de ejecutar y probar este ejemplo de extensión, puede continuar con Sample: Picture inserter mediante el script de contenido, que inserta dinámicamente JavaScript que se ejecuta como contenido en la pestaña del explorador.

Recursos adicionales

• Transferir localmente una extensión para instalarla y probarla localmente
• Ejemplo: Insertador de imágenes mediante script de contenido

GitHub:

• Repositorio MicrosoftEdge-Extensions .
  • /picture-viewer-popup-webpage/ - código fuente de este ejemplo.