Extensión de Chrome ui
Pero, ¿alguna vez has querido crear tu propia extensión de Chrome? ¿Te has preguntado alguna vez lo difícil que sería el proceso o lo que implicaría? Pues bien, resulta que es superfácil, probablemente mucho más fácil de lo que imaginabas.
Las extensiones de Chrome también se pueden crear para que funcionen sólo en determinadas páginas mediante el uso de Acciones de Página, pueden ejecutar código en segundo plano utilizando Páginas de Fondo, e incluso pueden modificar una página existente cargada en el navegador utilizando Scripts de Contenido. Pero para este tutorial vamos a mantener las cosas simples.
Lo primero que tenemos que hacer es crear el proyecto y todos los archivos que necesitamos para nuestra extensión. Vamos a empezar por crear un nuevo directorio que llamaremos “Extensión GTmetrix”. Pondremos todos los archivos que necesitamos para nuestra extensión en esta nueva carpeta. Chrome nos permite cargar un plugin apuntando a una carpeta que contiene los archivos de la extensión.
Todas las extensiones de Chrome requieren un archivo de manifiesto. El archivo de manifiesto le dice a Chrome todo lo que necesita saber para cargar correctamente la extensión en Chrome. Así que crearemos un archivo manifest.json y lo pondremos en la carpeta que hemos creado. Puedes dejar el archivo de manifiesto en blanco por ahora.
¿Puedo crear mi propia extensión de Chrome?
A veces, es posible que no encuentres una aplicación o extensión en la Chrome Web Store que satisfaga las necesidades de tus usuarios. Si eso ocurre, puedes crear tu propia aplicación o extensión personalizada que los usuarios puedan añadir a su dispositivo ChromeOS o a su navegador Chrome.
¿Los plugins de Chrome ganan dinero?
Cargo por la extensión
Su navegador puede ser una fuente de ingresos por sí mismo. Cobrar una pequeña cuota por él puede generar muchos ingresos al vender muchas copias de tu extensión. Aunque la mayoría de las extensiones de la Chrome Store son gratuitas, no te desanimes. En su lugar, puedes utilizar una freemium.
Cómo desarrollar una extensión para el navegador Chrome
A veces, es posible que no encuentres una aplicación o extensión en la Chrome Web Store que satisfaga las necesidades de tus usuarios. Si eso ocurre, puedes crear tu propia aplicación o extensión personalizada que los usuarios puedan añadir a su dispositivo ChromeOS o a su navegador Chrome. Por ejemplo, como administrador, puedes instalar automáticamente una aplicación de marcadores personalizada que enlace con tu sistema de recursos humanos en los dispositivos Chrome de los usuarios.
Como desarrollador, puedes crear una aplicación o extensión, como la aplicación de marcadores de ejemplo que se proporciona en los pasos siguientes. Para obtener instrucciones sobre la creación de aplicaciones y extensiones de Chrome más avanzadas, consulte el tutorial de introducción.
Como administrador, puedes crear opcionalmente una colección de aplicaciones para tu organización. A continuación, puedes recomendar aplicaciones y extensiones de Chrome que tus usuarios pueden examinar e instalar. Para obtener más información, consulta Crear una colección de aplicaciones de Chrome.
Como administrador de Microsoft Windows, puedes utilizar la directiva de grupo para establecer políticas que controlen el uso de aplicaciones y extensiones en el navegador Chrome en equipos Windows administrados. Para obtener información sobre cómo instalar y configurar las plantillas de políticas de Chrome, consulta Establecer políticas del navegador Chrome en equipos administrados.
Extensión de Chrome javascript
En Fullstack Exchange 2022, Keren Kenzi dio una excelente charla sobre una extensión de Chrome que construyó. Lo que me gusta de la charla de Kenzi es que no importa realmente lo que la extensión está haciendo – lo que importa es que en menos de quince minutos, Keren live-coded una extensión de cromo totalmente funcional.
Cuando hagas clic en el botón Load unpacked, se te pedirá que busques la carpeta de la extensión. Una vez seleccionada la carpeta, si el manifest.json es correcto, deberías ver la extensión en la lista de extensiones:
En este archivo, importo nuestra librería de componentes UI vivid (la copié a nuestra carpeta después de instalarla usando npm i @vonage/vivid@next). Lo bueno de vivid es que es una librería de componentes web – por lo que añade elementos DOM personalizados sin necesidad de un framework como React, Angular o Vue.
Ten en cuenta que el texto de la insignia está limitado a 4 caracteres. Hemos establecido la propiedad max-length del campo de texto a 4 para que los usuarios no introduzcan más de cuatro caracteres (si hay más, sólo los cuatro primeros se mostrarán en la insignia).
Plantilla de la extensión de Chrome
La primera versión del archivo manifest.json, donde los tres atributos requeridos.Estos atributos nos dicen:¡Y hemos terminado! ¡Todo el código necesario ha sido escrito! En nuestro caso, nuestra extensión es bastante inútil por ahora, ¡pero podemos seguir adelante y añadirla a Chrome! Cargue su extensión en su navegadorAhora vaya a chrome://extensions y haga clic en el botón “Load unpacked” para seleccionar el directorio de su extensión personalizada. Para ver los tres botones, el “Modo de desarrollador” de la derecha debe estar activado.Captura de pantalla de mi página chrome://extensiones, con una sola extensión.¡Ahora deberías ver tu extensión en la misma página! ¡Enhorabuena! Tu extensión debería aparecer ahora en la página chrome://extensions.Si necesitas editar algún archivo en el directorio seleccionado, tendrás que hacer clic en el botón de actualización para volver a cargar la extensión en Chrome. De lo contrario, tus cambios no aparecerán en tu extensión.Ahora, vamos a ver cómo podemos añadir algunas funcionalidades a nuestra extensión. Inyectar un script para modificar un sitio web¿Recuerdas nuestro sitio web de ejemplo? Si vas allí y abres las DevTools (con F12), puedes escribir esta simple línea de código para arreglar nuestro error:document.querySelector(‘div.featured-box-right’).remove();
