Compartir vía

Creación de un tutorial de extensión, parte 1

  • Artículo

El objetivo de este tutorial es crear una extensión de Microsoft Edge, empezando por un directorio vacío. Está creando una extensión que muestra la imagen del día de la NASA. En este tutorial, aprenderá a crear una extensión mediante:

  • Crear un manifest.json archivo.
  • Agregar iconos.
  • Abrir un cuadro de diálogo emergente predeterminado.

Si desea probar la extensión completada que va a compilar en este tutorial, descargue el código fuente de la extensión del repositorio > MicrosoftEdge-Extensions-getting-started-part1. El código fuente se ha actualizado del manifiesto V2 al manifiesto V3.

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.

En el código siguiente se describe la información básica necesaria en el manifest.json archivo:

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

Paso 2: Agregar iconos

Empiece por crear el directorio en el icons proyecto para almacenar los archivos de imagen de icono. Los iconos se usan para la imagen de fondo del botón que los usuarios seleccionan para iniciar la extensión.

Icono de la barra de herramientas para abrir 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.

Los directorios del proyecto deben ser similares a la estructura siguiente:

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

A continuación, agregue los iconos al manifest.json archivo. manifest.json Actualice el archivo con la información de iconos para que coincida con el código siguiente. Los png archivos enumerados en el código siguiente están disponibles en el archivo de descarga mencionado anteriormente en este artículo.

{
    "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"
    }
}

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

Ahora, cree un HTML archivo para ejecutarlo cuando el usuario inicie la extensión. Cree el archivo HTML denominado popup.html en un directorio denominado popup. Cuando los usuarios seleccionan el icono para iniciar la extensión, popup/popup.html se muestra como un cuadro de diálogo modal.

Agregue el código de la lista 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="Display the stars image" />
        </div>
    </body>
</html>

Asegúrese de agregar el archivo images/stars.jpeg de imagen a la carpeta images. Los directorios del proyecto deben ser similares a la estructura siguiente:

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

Por último, registre el elemento emergente en manifest.jsonbrowser_action (en Manifiesto V2) o en action (en Manifiesto V3), como se muestra en el código 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"
    }
}

Pasos siguientes

Eso es todo lo que necesita para desarrollar una extensión de trabajo. Ahora, continúe con la transferencia local y pruebe la extensión. Para obtener más información, vea Transferir localmente una extensión.