Las extensiones del navegador pueden ser una excelente manera de usar sus habilidades de codificación y crear algo que le permita realizar tareas repetitivas con solo unos pocos clics. Si desea obtener esto, aprender a escribir una extensión de Chrome es un excelente comienzo. Google Chrome ofrece a los desarrolladores de muchas API diferentes, como agregar una nueva página, ventanas emergentes, crear notificaciones, configurar un motor de búsqueda predeterminado o incluso crear un elemento del menú contextual (el menú que aparece cuando hace clic en una página). Las posibilidades son ilimitadas, de una extensión que juega “¡Hola mundo!” a una extensión que le permite hacer una captura de pantalla de la página web.

Contenido:
La estructura de la extensión
La extensión está cargada
Agregar una interfaz de usuario emergente
Usando la API de notificación
Agregar un elemento de menú contextual
Uso de la API de almacenamiento para almacenar datos
Distribución de extensión
Cómo crear una extensión #Google #Chrome: guía paso -by -ptep
Haga clic en Tweet
En este tutorial, le mostraremos cómo escribir una extensión de Chrome que envíe notificaciones del navegador desde un menú emergente. También utilizaremos el menú contextual y las API de almacenamiento de datos para aprovecharlo al máximo. ¡Lo llamamos una notificación! Con el signo de exclamación!

El código de extensión es público en GitHub, por lo que no dude en usarlo.
Cómo escribir una extensión de Chrome: la estructura Antes de continuar, debe consultar la documentación de los desarrolladores de Google Chrome para conocer el desarrollo de extensiones de Chrome en general. Además, si desea escribir una extensión de Chrome para la tienda web de Chrome, consulte una política de posposición. Comencemos creando una nueva carpeta llamada notificar en su dispositivo. Esta carpeta contendrá todo lo que será parte de su extensión ahora, debe crear un archivo manifiesto que contenga toda la información sobre nuestra extensión. Cree un archivo llamado Manifest.json e incluya el siguiente código: {“Nombre”: “¡Notificar!” , “Descripción”: “¡Una extensión de Google Chrome!” , “Versión”: “1.0”, “Manifest_Version”: 3, “Icons”: {“48”: “/sassets/48.png”, “128”: “/Ssets/icons/128.png”}}
Idioma de código: JSON / JSON con comentarios (JSON)
Como puede ver, hasta ahora, solo contiene metainformación sobre su extensión, como su nombre, descripción y versión. Manifest_version le dice a Chrome qué versión de la API de las extensiones que usa.
Cargue la extensión después de tener el archivo manifiesto, puede cargar la extensión en el navegador Chrome:
Abra la página de gestión de extensiones navegando en Chrome: // Extensiones o también puede abrirla desde el menú de extensiones de configuración. Una vez que llegue allí, active el modo de desarrollador y use el botón de carga desempaquetado para seleccionar el directorio de extensión. ¡Aquí está tu extensión! Ahora que su extensión está cargada, puede mejorarla paso a paso y puede ver los cambios. Asegúrese de agregar un icono para su extensión a los activos/ iconos/ archivo, de lo contrario aparecerá un icono predeterminado. Admogando una interfaz de usuario emergente para continuar agregando una interfaz de usuario de extensión, donde las personas pueden interactuar con las opciones ofrecidas.

Hay varias formas de hacer esto, como agregar una página completa, pero una ventana emergente suele ser el camino hacia la mayoría de las extensiones. Para agregar una ventana emergente de extensión, deberá agregar esto al archivo manifest.json:
“Acción”: {“default_popup”: “popup.html”, “default_icon”: {“48”: “/assets/icons/48.png”, “128”: “/sassets/128.png”},
Idioma de código: JavaScript (JavaScript)
Con esto, le dice la extensión de la ubicación del archivo HTML de la ventana emergente y los iconos predeterminados. Este es solo el ícono predeterminado, porque la API le permite cambiar el icono sobre la GO. Por ejemplo, si crea una prueba de PageSpeed ​​de Google, se pueden mostrar diferentes iconos en el sitio dependiendo de la clasificación de la página.
Extension PopUp de Google Chrome ahora, puede agregar su código HTML emergente al archivo, como lo hacemos en nuestro ejemplo:

¡Notify!

Notificación RESET ¡Notify!
Lenguaje del código: html, xml (xml (xml )

Este archivo HTML también realiza enlaces a una hoja de estilo y un script para agregar estilo y funcionalidad a nuestra ventana emergente.
Si está siguiendo, puede obtener el código CSS desde aquí. Agregaremos JavaScript al archivo más adelante en este tutorial. Hasta ahora, ha creado una extensión de Google Chrome que tiene una ventana emergente y solo nos llevó algunas filas de código. Como dije al principio, ¡crear una extensión de Google Chrome es muy fácil! Al ir más allá en este tutorial, agregaremos funcionalidad a esta extensión y haremos más que un sustituto.
El uso de la API de notificación, como sugiere el nombre de la extensión, es una extensión de notificación, ¡así que agregemos algunos! Antes de usar algunas de las API, debe especificar los permisos para ellos en el archivo Manifest.json. Una de las razones para hacer esto es que los usuarios de extensión saben qué permisos requiere la extensión antes de instalarlos. Para notificaciones, proceda de la siguiente manera:
“Permisos”: [“Notificaciones”],
Idioma de código: JavaScript (JavaScript)
También debe agregar un trabajador de servicio a la extensión para enviar notificaciones. Para esto, debes agregar esto al manifiesto:
“Background”: {“Service_Worker”: “Background.js”},
Idioma de código: JavaScript (JavaScript)
Necesita un trabajador de servicio para la API de notificación, ya que no se puede utilizar directamente desde el archivo popup.js. En el archivo de fondo.js, debe agregar el siguiente código para enviar un aviso:
chrome.nintime.onmesage.addlistener (data => {if (data.type == ‘notificación’) {chrome.notifications.create (”, {type: ‘básico’, title: ‘notifye!’, Mesage: fecha de fecha .message || ‘notificar!’, iconurl: ‘./assets/icons/128.png’,});}});
Idioma de código: JavaScript (JavaScript)
Aquí, usamos el oyente de eventos de OnMessage para obtener el activador para empujar las notificaciones desde la ventana emergente.
También utilizamos el método creado para crear una nueva notificación. Las notificaciones pueden ser de diferentes tipos, pero aquí se usa el tipo “básico”. Debe echar un vistazo a todas las opciones disponibles.
Ahora que el método de creado está vigente, puede activarlo desde el archivo popup.js de la siguiente manera: const text = document .getementById (‘notify-text’); const notify = document .getElementById (‘notify-button’); notify.addeventListener (‘click’, () => {chrome.riNtime.sendMessage (”, {type: ‘notificación’, mensaje: text.value};});
Idioma de código: JavaScript (JavaScript)
Aquí, la acción SendMessage se usa para activar la notificación. ¡Y voilá! Tenemos una extensión que desencadena un aviso.

Asegúrese de utilizar la última versión de Google Chrome y haber dado permiso para activar notificaciones. En resumen, no era como yo, que pasó horas tratando de descubrir por qué aparecieron las notificaciones.
Agregar un elemento de menú contextual como se menciona en la introducción, el menú contextual es el menú que aparece en el clic derecho:
Puede haber muchas razones por las cuales su extensión puede tener un elemento de menú contextual. Un ejemplo destacado es seleccionar un texto con el cursor y luego buscar en Google. Puede agregar al menú contextual cuántos artículos desea, pero si su extensión agrega más elementos, estarán restringidos a un elemento principal. Para esto, debe agregar permisos al archivo manifiesto:
“Permisos”: [“contextMenus”, “notificaciones”],
Idioma de código: JavaScript (JavaScript)

Ahora que ha agregado permisos para contextMenus, puede agregar esto al archivo de fondo.js:
chrome.untime.onmessage.addListener (data => {if (data.type == ‘notificación’) {notify (data.message);}}); chrome.nintime.oninstalled.addListener (() => {chrome.contextmenus.create ({id: ‘notificar’, título: “notificar!: %s”, contexts: [“selección”];}); chrome.contextmenus.onClicked.AddListener ((info, tab) => {if (‘notify’ === info.menitemid) {notify (info.sectionText);}}); const aviso = mensaje => {return chrome.notifications.create (”, {type: ‘básico’, título: ‘notificar!’, mensaje: mensaje || ‘notificar!’, iconurl: ‘./assets/icons/ 128.png ‘,}); }; Lenguaje de código: JavaScript (JavaScript)

El código anterior también incluye el código del paso anterior para activar una notificación que ahora se extrae a la posición, para que pueda reutilizarse. La acción de contextMenus.create se utiliza para agregar un elemento al menú contextual. Está conectado a Onstalled porque debe inicializarse solo una vez. Después de eso, de manera similar al paso anterior, utilizamos contextMenus. Concluido para capturar el clic y activar una notificación.
Puede ser una forma muy ingeniosa de incluir la funcionalidad de su extensión. Si mira a su alrededor en las extensiones utilizadas en el navegador, encontrará muchas extensiones que inteligentes este espacio para mejorar la experiencia de su extensión.
Uso de la API de almacenamiento para almacenar datos ahora que su extensión tiene algunas funciones para presentarse, para echar un vistazo a la API de almacenamiento. La API de almacenamiento es útil cuando desea almacenar algunos datos de usuario en su extensión. Hay dos tipos de API de almacenamiento: local y sincronizado. El almacenamiento local, como su nombre indica, se guarda en el navegador y sigue siendo local. En comparación, el almacenamiento sincronizado permite los datos entre los navegadores que utilizan la misma cuenta de Google. Para nuestros propósitos, utilizamos el almacenamiento local. Primero, debe agregar permiso de almacenamiento al archivo manifiesto: “Permisos”: [“contextMenus”, “notificaciones”, “almacenamiento”],
Idioma de código: JavaScript (JavaScript)
Después de eso, puede usar Storage, Storage.local.get y Storage.local.set, para hacerse cargo o guardar los datos. Puede agregar el siguiente código al archivo popup.js:
const reset = document .getElementById (‘notify-reset’); Const contador = documento .getElementById (‘notify-count’); chrome.storage.local.get ([‘NotifyCount’], data => {value = date.notifyCount || 0; contar.innerhtml = valor;}); chrome.torage.onchanged.addListener ((Changes, Namespace) => {if (Changes.notifyCount) {value = Changes.notifyCount.newValue || 0; Counter.innerhtml = valor;}}); reset.addeventListener (‘click’, () => {chrome.storage.local.clear (); text.value = ”;});
Idioma de código: JavaScript (JavaScript)

Este código hace dos cosas:
Actualice el número de notificaciones en la ventana emergente cuando abrimos los cambios emergentes o del valor de almacenamiento. Para escuchar el cambio de almacenamiento, use almacenamiento. Conjunta. En parte, eliminamos el espacio de almacenamiento cuando el usuario hace clic en el botón Restablecer.
El código anterior hace el trabajo de obtener el último número y lo actualiza. Ahora la configuración de datos permanece. Para esto, puede actualizar nuestra función de notificación con ella:
const notify = message => {chrome.storage.local.get ([‘notifyCount’], dat => {value = date.notifyCount || 0; chrome.storage.local.set valor) + 1});} ); return chrome.notifications.create (”, {type: ‘básico’, título: ‘notificar!’, mensaje: mensaje; };
Idioma de código: JavaScript (JavaScript)
Aquí, obtenemos los últimos datos de almacenamiento y luego los actualizamos con el último número. Del mismo modo, puede usar la API chrome.storage.sync para sincronizar las opciones entre navegadores.
¡Distribución de la extensión felicitaciones! ¡Lo hiciste! Ha creado con éxito una extensión de Google Chrome utilizando muchas partes diferentes de la experiencia de Google Chrome, que incluye:
Ventanas emergentes
Notificaciones de API
El menú contextual
Agua de almacenamiento
Si desea ver el código para esta extensión, puede obtenerlo en este almacén de notificaciones de GitHub. A todos nos gusta mostrarle al mundo el gran trabajo que hacemos. Después de completar la extensión, puede enviarla a la tienda web Chrome para que otros usuarios de Chrome la descarguen. Si desea explorar otras opciones que Google Chrome ofrece a los desarrolladores de extensiones, le recomendamos verificar la documentación oficial. Espero que este artículo haya desempeñado su papel en enseñarle cómo escribir una extensión de Chrome. Nos complace ver lo que puede crear, así que cuéntenos sobre sus aventuras con el desarrollo de la extensión de Google Chrome en la sección de comentarios a continuación. También puede estar interesado en: 18 mejores agencias de WordPress para desarrollo web, diseño, marketing y más
15 El mejor software de diseño de sitios web disponible en el mercado en este momento
9 de las mejores soluciones para crear sitios web comparados y probados
Cómo crear una extensión de Google #Chrome: guía paso -by -ptep
Haga clic en Tweet
… Recuerde unirse a nuestro curso rápido para acelerar su sitio de WordPress. Con algunos remedios simples, puede reducir el tiempo de carga incluso en 50-80%:
Apariencia y presentación de Chris Fitzgerald y Karol K.