Parte 1 del tutorial: Mostrar una imagen en un elemento emergente

El ejemplo parte 1: Mostrar una imagen en un elemento emergente es una extensión estática simple, 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:

Para crear este tipo de extensión, haga lo siguiente:

1. Cree un archivo manifest.json.
2. Agregue iconos para iniciar la extensión.
3. Abra un cuadro de diálogo emergente predeterminado.

En el camino, instale (o actualice) y pruebe la extensión.

Si desea instalar y ejecutar inmediatamente la extensión completada, o bien ver su código terminado, haga lo siguiente:

• Clone el repositorio MicrosoftEdge-Extensions en la unidad local. Use el directorio /extension-getting-started-part1/.
• Descargue el código fuente de la carpeta /part1/ del repositorio de MicrosoftEdge-Extensions.

A continuación, puede instalar y ejecutar la extensión finalizada que se encuentra en el repositorio, por transferencia local de una extensión para instalarla y probarla localmente.

Paso 1: Crear un archivo 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, el nombre y la descripción de la extensión, etc.

Todos los pasos de codificación de este artículo ya se han realizado en la demostración de la parte 1 del repositorio MicrosoftEdge-Extensions . Se recomienda clonar primero el repositorio e instalar y ejecutar la demostración de la parte 1, antes (o en lugar de) comenzar con un directorio vacío y, a continuación, crear manualmente directorios, crear archivos y pegar código en los archivos.

Este paso ya se ha realizado en manifest.json en el repositorio de MicrosoftEdge-Extensions. Si desea crear manualmente la extensión parte 1 empezando por un directorio vacío:

• En un directorio de la máquina, mediante un editor, como Visual Studio Code, cree un manifest.json archivo que contenga las líneas siguientes:

  {
      "name": "NASA picture of the day pop-up",
      "version": "0.0.0.1",
      "manifest_version": 3,
      "description": "A basic extension that displays an image in a pop-up.",
  }
  

Paso 2: Agregar iconos para iniciar la extensión

Este paso ya se ha realizado en la demostración de la parte 1 del repositorio MicrosoftEdge-Extensions . Si desea crear manualmente la extensión parte 1, continúe con los pasos siguientes.

1. Cree un icons directorio en el proyecto, en el mismo directorio que el archivo de manifiesto, para almacenar los archivos de imagen de icono. Los iconos se usan como imagen de fondo para el botón en el que el usuario hace clic para iniciar la extensión:

   

   Para iconos:

   • Se recomienda usar PNG formato, pero también puede usar BMPformatos , ICOGIFo JPEG .
   • Se recomienda usar imágenes de 128 x 128 px, que el explorador cambia de tamaño si es necesario.

2. Asegúrese de que los directorios del proyecto son similares a la estructura siguiente:

   └── part1
       ├── manifest.json
       └── icons
           ├── nasapod16x16.png
           ├── nasapod32x32.png
           ├── nasapod48x48.png
           └── nasapod128x128.png
   

3. Obtenga los .png archivos del repositorio:

   • nasapod16x16.png
   • nasapod32x32.png
   • nasapod48x48.png
   • nasapod128x128.png

   Por ejemplo, descargue individualmente los archivos de la carpeta /icons/ del repositorio de MicrosoftEdge-Extensions y colóquelos en el /icons/ directorio.

4. Enumere los iconos del manifest.json archivo, como se indica a continuación:

   {
       "name": "NASA picture of the day pop-up",
       "version": "0.0.0.1",
       "manifest_version": 3,
       "description": "A basic extension that displays an image in a pop-up.",
       "icons": {
           "16": "icons/nasapod16x16.png",
           "32": "icons/nasapod32x32.png",
           "48": "icons/nasapod48x48.png",
           "128": "icons/nasapod128x128.png"
       }
   }
   

Paso 3: Abrir un cuadro de diálogo emergente predeterminado

Este paso ya se ha realizado en popup.html en el repositorio de MicrosoftEdge-Extensions. Si desea crear manualmente la extensión parte 1, continúe con los pasos siguientes.

Cree un HTML archivo para ejecutarlo cuando el usuario inicie la extensión. Cuando el usuario hace clic en el icono para iniciar la extensión, este archivo se mostrará como un cuadro de diálogo modal.

1. Cree el archivo HTML denominado popup.html en un directorio denominado popup.

2. Agregue el código siguiente a popup.html, para mostrar la imagen de estrellas:

   <html lang="en">
       <head>
           <meta charset="UTF-8" />
           <title>NASA picture of the day</title>
       </head>
       <body>
           <div>
               <img src="/images/stars.jpeg" alt="Stars" />
           </div>
       </body>
   </html>
   

3. Agregue el archivo stars.jpeg en la images carpeta . Por ejemplo, descargue stars.jpeg del repositorio de MicrosoftEdge-Extensions.

4. Asegúrese de que los directorios del proyecto son similares a la estructura siguiente:

   └── part1
       ├── manifest.json
       ├── icons
       │   ├── nasapod16x16.png
       │   ├── nasapod32x32.png
       │   ├── nasapod48x48.png
       │   └── nasapod128x128.png
       ├── images
       │   └── stars.jpeg
       └── popup
           └── popup.html
   

5. Registre el elemento emergente en manifest.json , actioncomo se indica a continuación:

   {
       "name": "NASA picture of the day pop-up",
       "version": "0.0.0.1",
       "manifest_version": 3,
       "description": "A basic extension that displays an image in a pop-up.",
       "icons": {
           "16": "icons/nasapod16x16.png",
           "32": "icons/nasapod32x32.png",
           "48": "icons/nasapod48x48.png",
           "128": "icons/nasapod128x128.png"
       },
       "action": {
           "default_popup": "popup/popup.html"
       }
   }
   

Eso es todo lo que necesita para desarrollar una extensión simple.

Paso 4: Instalar y probar la extensión

Instale y ejecute la extensión; consulte Transferencia local de una extensión para instalarla y probarla localmente. La extensión muestra popup.html, que contiene stars.jpeg, en un elemento emergente:

Puede abrir esta extensión de demostración de la parte 1 en cualquier pestaña, incluida una pestaña vacía o la pestaña Administrar extensiones.

Después de ejecutar y probar la extensión, puede continuar con tutorial parte 2: Uso de JavaScript para insertar una imagen en la página web.

Vea también

• Transferir localmente una extensión para instalarla y probarla localmente
• Parte 2 del tutorial: Uso de JavaScript para insertar una imagen en la página web

GitHub:

• Repositorio MicrosoftEdge-Extensions .
  • /part1/ : código fuente del ejemplo de la parte 1.