Construyendo una extensión básica de Chrome

¿Desea agregar funcionalidad adicional a su navegador Chrome o crear una herramienta útil? ¡Desarrollar una extensión de Chrome es un gran punto de partida! En este tutorial, desglosaremos los pasos esenciales de construir su primera extensión básica (pero funcional).

Así que hay algunas cosas básicas que se requieren, ¡es como hacer un sitio web, con un manifiesto!

• Html: El bloque de construcción de todos los sitios web, un lenguaje de marcado estándar que, junto con CSS y JavaScript, es utilizado por los desarrolladores web para crear sitios web, interfaces de usuarios móviles y aplicaciones.
• CSS: Un lenguaje de hoja de estilo utilizado para establecer el estilo para los elementos HTML.
• Javascript: Comúnmente utilizado para crear efectos interactivos dentro de los navegadores web.

JSON: notación de objeto JavaScriptes un formato estándar abierto que utiliza texto legible por humanos para transmitir objetos de datos que consisten en pares de valor de atributo. Es el formato de datos primario utilizado para el navegador asíncrono/comunicación del servidor (AJAJ), reemplazando en gran medida a XML (utilizado por AJAX).

Algunos preliminares: Las extensiones de cromo siguen una estructura de directorio específica. Eso significa que el nombre de archivo ya está fijo, deben organizarse de cierta manera como se indica.

Componentes centrales de una extensión de Chrome

• manifest.json: El corazón de su extensión, definición de metadatos, permisos e interacción de contenido.
• Scripts de fondo: Archivos JavaScript que se ejecutan en segundo plano, ejecutando tareas incluso cuando las pestañas no están abiertas.
• PopUp UI: La interfaz orientada al usuario de su extensión, a menudo se accede a través de un pequeño icono de navegador.
• Scripts de contenido: Interactúa directamente con las páginas web para recopilar datos o modificarlos.

Estructura del directorio:

• json
• .js [ Javascript Files]
• .html [ HTML files ]
• png

Aquí, vamos a hacer una simple extensión de «Hello World» para este tutorial. Las extensiones eficientes y significativas que requieren una comprensión básica seguirán a continuación

Paso 1: Cree un nuevo directorio, aquí es donde mantendremos todos nuestros archivos.

Paso 2: Crear un archivo llamado manifest.json

Aquí está el formato básico.

{
"manifest_version": 2,
"name": “EXTENSION NAME",
"description": "DESCRIPTION",
"version": "1.0",
"browser_action": {
"default_icon": “ICON (WITH EXTENSION) ”,
"default_popup": “LAYOUT HTML FILE"
},
"permissions": [
//ANY OTHER PERMISSIONS
]
}

Aquí está nuestro archivo manifest.json

{
"manifest_version": 2,
"name": "Hello World!",
"description": "This extension shows a Hello World message!",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "window.html"
}
}

Entonces, una vez que tienes la caída del manifiesto. Json, sigamos adelante.

Paso 3: Cree un nuevo archivo llamado Window.html.

Es el HTML el que aparece cuando hace clic en el botón de extensión de Chrome.

Hello! Geeks For Geeks !!
This is a Chrome Extension!
And this is some html

Paso 4: Cree el archivo JavaScript, llamemos, en background.js, ya que estamos creando un archivo HTML simple, puede omitir este paso por completo ya que nuestro proyecto actual no necesitará ningún JavaScript.

Lo estamos creando solo para demostrar cómo incluir el script en la extensión.

Paso 5: Debe haber observado que un icono es una parte integral de la extensión, donde puede hacer clic y comenzar la ejecución de la extensión.

Estamos agregando un archivo de icono, desde el cual puede obtener una idea.

icon.png (https://developer.chrome.com/extensions/examples/tutorials/getstarted/icon.png)

Así es como debe cuidar su directorio después de crear los 4 archivos.

El último:

Para cargar la extensión,

• Arrastre y suelte el directorio donde sus archivos de extensión viven en Chrome: // extensiones en su navegador para cargarlo.
• Si la extensión es válida, ¡se cargará y activa de inmediato!

Abrir el Chrome: // Extensiones página.

Arrastre la carpeta al Chrome: // Extensiones página.

Instalación exitosa!

¡Haga clic en el icono y se mostrará el mensaje!

Para Windows: Si está utilizando Windows, puede seguir los pasos a continuación.

• Vaya a Chrome: // Extensiones en su navegador Google Chrome. Verifique la casilla de verificación del modo de desarrollador en la esquina superior derecha.

• Haga clic en «Cargar desempaquetado» para ver un cuadro de diálogo de selección de archivos.

• Seleccione su directorio de extensión, si la extensión es válida, ¡se cargará y activa de inmediato!

Esta simple Extensión de Hello World nos da el conocimiento básico de cómo podemos comenzar a crear extensiones de Chrome, ya que ahora estamos familiarizados con Manifest.json y la estructura de directorio, las dos cosas nuevas aparte de las tecnologías web básicas como HTML, CSS, JavaScript, jQuery, etc.