Aquí es donde puede comenzar a crear extensiones de Chrome que, en última instancia, aumentan su productividad y agilizan nuestras tareas. Ya sea la puntuación de un partido en vivo, la música, las actualizaciones de nuevos artículos de GeeksforGeeks o una captura de pantalla de una página completa, puede crear su propia extensión de Chrome para cada tarea.
Entonces, hay algunas cosas básicas que se requieren, ¡es como hacer un sitio web, con un manifiesto!
- HTML : el componente básico de todos los sitios web, un lenguaje de marcado estándar que, junto con CSS y JAVASCRIPT, utilizan los desarrolladores web para crear sitios web, interfaces de usuario móviles y aplicaciones.
- CSS : un lenguaje de hojas de estilo utilizado para establecer el estilo de los elementos HTML.
- JavaScript : comúnmente utilizado para crear efectos interactivos dentro de los navegadores web.
JSON: JavaScript Object Notation , es un formato estándar abierto que utiliza texto legible por humanos para transmitir objetos de datos que consisten en pares de atributo-valor. Es el formato de datos principal utilizado para la comunicación asíncrona entre navegador y servidor (AJAJ), reemplazando en gran medida a XML (utilizado por AJAX).
Algunos preliminares: las extensiones de Chrome siguen una estructura de directorios específica. Eso significa que el nombre del archivo ya está fijo, deben organizarse de cierta manera según las instrucciones.
Componentes principales de la aplicación Chrome:
- El manifiesto le informa a Chrome sobre su aplicación, qué es, cómo iniciarla y los permisos adicionales que requiere.
- El script de fondo se usa para crear la página de eventos responsable de administrar el ciclo de vida de la aplicación.
- Todo el código debe estar incluido en el paquete de la aplicación de Chrome. Esto incluye módulos HTML, JS, CSS y Native Client.
- Todos los íconos y otros activos también deben incluirse en el paquete.
Estructura de directorios:
- json
- <contenido>.js [ Archivos Javascript]
- <marcado>.html [archivos HTML]
- png
Aquí, vamos a hacer una extensión simple de «Hola mundo» 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 guardaremos todos nuestros archivos.
Paso 2: Crea 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 domines manifest.json, sigamos adelante.
Paso 3: Cree un nuevo archivo llamado window.html.
Es el HTML que aparece cuando hace clic en el botón de extensión de Chrome.
<!DOCTYPE html> <html> <head> <script src="background.js"></script> </head> <body> <div>Hello! Geeks For Geeks !!</div> <div>This is a Chrome Extension!</div> <div>And this is some html</div> </body> </html>
Paso 4: Cree el archivo javascript, llamémoslo background.js. Dado que estamos creando un archivo HTML simple, puede omitir este paso por completo ya que nuestro proyecto actual no necesitará 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, del cual puede hacerse una idea.
icono.png (https://developer.chrome.com/extensions/examples/tutorials/getstarted/icon.png)
Así es como debe verse su directorio después de crear los 4 archivos.
El último:
Para cargar la extensión,
- Arrastre y suelte el directorio donde se encuentran sus archivos de extensión en chrome://extensions en su navegador para cargarlo.
- Si la extensión es válida, ¡se cargará y activará de inmediato!
Abra la página chrome://extensions .
Arrastre la carpeta a la página chrome://extensions .
¡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://extensions en su navegador Google Chrome. Marque la casilla de verificación Modo 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 extensiones, si la extensión es válida, ¡se cargará y activará de inmediato!
Esta simple extensión Hello World nos brinda 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 directorios, las dos cosas nuevas además de las tecnologías web básicas como HTML, CSS, JavaScript, JQuery, etc.
Este artículo es una contribución de Hemang Kumar . Escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema tratado anteriormente.
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA