Una extensión de Google Chrome es un pequeño programa de software que amplía la funcionalidad del navegador Chrome. Está diseñado para mejorar la experiencia del usuario, mejorar la productividad y agregar herramientas y funciones adicionales.
El ecosistema de extensiones de Chrome proporciona una amplia gama de extensiones que satisfacen diversas necesidades e intereses. Estas extensiones pueden ayudar a los usuarios a personalizar su experiencia de navegación, bloquear anuncios, administrar contraseñas, tomar capturas de pantalla y mucho más. También pueden mejorar la productividad al ofrecer funciones como listas de tareas pendientes, toma de notas y gestión de tareas.
Además, las extensiones de Chrome suelen incluir funciones de análisis y estadísticas que permiten a los desarrolladores realizar un seguimiento de la participación de los usuarios, los patrones de uso y otros datos relevantes. Esta información ayuda a los desarrolladores a mejorar sus extensiones y satisfacer las necesidades de su base de usuarios.
En general, las extensiones de Google Chrome contribuyen a una experiencia de navegación más eficiente y personalizada al ofrecer una amplia gama de herramientas, funciones y estadísticas para mejorar la productividad y satisfacer las necesidades de los usuarios.
Aquí hay una lista de navegadores que admiten extensiones de Google Chrome:
- Google Chrome
- Cromo
- Microsoft Edge (versión basada en Chromium)
- Ópera
- vivaldi
- Corajudo
- Hierro SRWare
- Dragón Comodo
- Navegador de antorcha
Tenga en cuenta que, si bien estos navegadores admiten extensiones de Chrome, puede haber algunas variaciones en la compatibilidad o funcionalidad según la versión específica del navegador.
En esta lista completa, descubrirá los mejores iniciadores y plantillas de código abierto para crear sin esfuerzo extensiones de Google Chrome de primer nivel. Algunos de estos proyectos se pueden utilizar incluso para crear extensiones de Mozilla Firefox.
Estos recursos invaluables están meticulosamente seleccionados para brindarles a los desarrolladores la capacidad de ahorrar un tiempo precioso, crear extensiones increíblemente ricas en funciones y fáciles de usar que cumplen con los más altos estándares de seguridad y cumplimiento del navegador.
1- Crear extensión de Chrome (.crx)
Crear extensión de Chrome (.crx) es una plantilla gratuita y de código abierto que le permite ampliar su extensión de Chrome con soporte para múltiples marcos e idiomas. Ofrece HMR ultrarrápido, múltiples opciones de marco y lenguaje, y compilaciones optimizadas para varios componentes de extensión.
Listo para usar, es compatible con React, Vue, Vite, Preact, Alpine, Quik, Svelte, Solid y Vanilla JavaScript.
2- iniciador de extensión web
iniciador de extensión web es un iniciador de extensiones web de código abierto que permite a los desarrolladores crear extensiones que pueden ejecutarse en cualquier navegador.
Admite compatibilidad entre navegadores, genera manifiestos personalizados, se basa automáticamente en cambios de código, empaqueta archivos de compilación específicos del navegador, incluye estilo SASS, utiliza módulos TypeScript y ES6 y tiene una biblioteca React UI predeterminada y una función de recarga inteligente.
Con él, puedes crear extensiones de Google Chrome, Mozilla Firefox y Opera con facilidad.
3- Marco Plasmo
El Marco Plasmo es un SDK de extensión de navegador robusto y fácil de usar, desarrollado por hackers experimentados para otros hackers. Construya su producto con confianza y diga adiós a las molestias de manejar archivos de configuración y las idiosincrasias que conlleva la creación de extensiones de navegador.
Sus características clave incluyen:
- Soporte de primera clase para React + Typecript
- Desarrollo declarativo
- Interfaz de usuario de secuencias de comandos de contenido
- Páginas de pestañas
- Recarga en vivo + React HMR
- [.env* files]
- API de almacenamiento
- API de mensajería
- Paquete de código remoto (por ejemplo, para Google Analytics)
- Dirigirse a múltiples pares de navegador y manifiesto
- Implementación automatizada a través de BPP
- Soporte opcional para Svelte y Vue
4- Muestras de extensiones de Chrome
“Ejemplos de extensiones de Chrome” es una colección de código abierto de muestras oficiales para extensiones de Chrome y la plataforma obsoleta Chrome Apps.
La estructura del directorio incluye extensiones centradas en paquetes de API únicos, extensiones con todas las funciones que abarcan varios paquetes de API y recursos archivados para la versión 2 del manifiesto y aplicaciones de Chrome obsoletas.
5- repetitivo-extensión-cromada
repetitivo-extensión-cromada es un impresionante modelo estándar de extensión de Chrome impulsado por Webpack5 + TS + React.
Características clave
- Manifiesto de soporte v2 y v3
- Soporte HMR
- Soporte reaccionar actualización rápida
- Admite recarga automática cuando cambian los scripts de contenido
- Admite secuencias de comandos de contenido dinámico
- Admite el uso de vscode para depurar scripts de contenido, páginas emergentes, páginas de opciones y antecedentes
- Configuraciones listas para usar de Eslint y Prettier
- Inteligencia cuando cambia la configuración del manifiesto (solo v2)
6- Iniciador de extensión de Chrome Next.js
Este ejemplo La aplicación muestra cómo crear con confianza una extensión de Chrome utilizando Next.js. Sirve como una base sólida para desarrollar extensiones de Chrome con Next.js, React y Node.js.
7- Texto estándar de la extensión web de React
Este es un impresionante fuente abierta y plantilla de extensión de navegador React / Preact X gratuita que admite los navegadores más populares (Chrome, Firefox, Opera, nuevo Edge y otros navegadores basados en Chromium).
Sus características clave incluyen:
- Preact X o Reaccionar (puedes cambiarlos fácilmente en la configuración del paquete web)
- DOM en la sombra para contenido inyectado
- Componentes con estilo
- recarga automática (no es necesario recargar manualmente la extensión)
- Configuración lista para usar con internacionalización
8- Reaccionar extensión de Chrome
El Reaccionar extensión de Chrome es un proyecto repetitivo que permite la creación sencilla de una extensión de Chrome utilizando ReactJs. La motivación detrás de este proyecto fue inyectar una página personalizada en el DOM como barra lateral para mejorar la experiencia del usuario, utilizar ReactJs para su enfoque y enrutamiento basado e
n componentes, y garantizar que el CSS de la extensión no entre en conflicto con los estilos de la página del host.
Características clave
- Usé ReactJs para escribir la extensión de Chrome
- Inyectar extensión a la página de alojamiento como script de contenido
- Utilizó la API de mensajería de Chrome.
- CSS de extensión aislada usando Iframe
9- Plantilla de extensión de Chrome
Plantilla de extensión de Chrome es una extensión de Chrome gratuita y de código abierto creada utilizando una plantilla.
10- Catonauta (Astron)
catonauta es un creador de extensiones de navegador excepcional y fácil de usar, desarrollado con Astro y Bun. Proporciona una experiencia perfecta para instalar y crear extensiones de Google Chrome y Mozilla Firefox en cuestión de minutos.
Características
- Typecript para una mejor experiencia de desarrollador
- Bollo para un desarrollo increíblemente rápido
- Manifiesto versión 3 (MV3) para publicación prioritaria
- Astro que permite un diseño emergente flexible
- Mascota genial
11- Iniciador de extensión React TypeScript + Vite Chrome
Este proyecto es un modelo estándar para crear una extensión de Google Chrome con React + Vitejs + TailwindCSS + TypeScript.
12-cromex
Este fuente abierta El proyecto ofrece un marco rápido y sencillo para el desarrollo de extensiones de Google Chrome.
Características clave
- Desarrollo de paquetes web ES6+
- Recarga en vivo de páginas de extensión durante el desarrollo
- Preact como marco frontend
- Herramientas CLI para generar páginas según sea necesario para su extensión. Actualmente admite casos de uso populares:
- Ventana emergente de acción del navegador
- Guión de fondo
- Guiones de contenido
- Anulación de nueva pestaña
- Página de opciones
- Cambio de tamaño automático y generación de tamaños de íconos según los requisitos del manifiesto de Google Chrome
- Prototipo completamente funcional y sin configuración en minutos
13- Modelo estándar de extensión de Chrome (MV3) con React 18 y Webpack 5
A potentes extensiones de Chrome modelo estándar con React 18 y Webpack 5 que agiliza el proceso de escritura de código JavaScript modular y de vanguardia, carga de CSS sin esfuerzo y recargas fluidas del navegador cada vez que hay cambios en el código.
14- vite-plugin-crx-mv3
vite-plugin-crx-mv3 es una herramienta para crear extensiones de Chrome con Vite. Es compatible con Manifest V3, Typecript, sass/less en manifest.json y múltiples marcos o bibliotecas como Vue y React. También ofrece recarga en vivo y es fácil comenzar con él.
15- Modelo estándar de extensión de Chrome en React
Esto es un fuente abierta Modelo estándar de extensión de Chrome simple y gratuito en React.
16-CRXJS
CRXJS es un proyecto apasionante destinado a revolucionar la experiencia de los desarrolladores dentro del ecosistema de extensiones de Chrome.
17- Marco de extensión simple de Chrome
Este estructura permite la comunicación entre diferentes capas de funcionalidad de extensión e incluye una plantilla para iniciar una nueva extensión. El manifiesto está preconfigurado para el modo de desarrollador y requiere cambiar la referencia a un sitio específico para la inyección de script de contenido.
18- Un modelo estándar de extensión del navegador (Chrome/Edge/Opera/Firefox/Brave).
Este fuente abierta El proyecto proporciona un modelo estándar para crear extensiones de navegador para Chrome, Edge, Opera, Firefox y Brave. Incluye soporte para ESNEXT con Babel y polyfill, una página emergente con ReactJS y el marco Material UI, un script de contenido con ReactJS y el marco Material UI, una página de opciones con ReactJS y el marco Material UI y Tailwind CSS, empaquetado con paquete web y cross- configuraciones del navegador.
Características
- Soporte para ESNEXT (con Babel y polyfill)
- Página emergente con ReactJS y el marco Material UI
- Script de contenido con ReactJS y framework Material UI
- Página de opciones con ReactJS y el marco Material UI + Tailwind CSS
- Paquetes (paquete web)
- Configuraciones entre navegadores
- Genere configuraciones regionales en varios idiomas (traducciones automáticas) a partir de configuraciones regionales en inglés. Ver
yarn generate:localeyyarn delete:locale. - Algunos servicios (útiles), por ejemplo, DbService, messagePassing, chromeService y funciones auxiliares (ayudantes)
- Algunos componentes (útiles) de React, por ejemplo, FrameMUI.js (para montar el componente React MUI en iframe en el script de contenido)
- Traducción local utilizando la API no oficial de Google Translate (versión gratuita)
- Viene con React 18 (versión alfa). Puedes bajarlo a 17.* pero no menos que eso.
19- Siguiente Chrome
Etiquetas
Marcos de herramientas para desarrolladores JavaScript Google Chrome Firefox Lista de bordes del navegador basada en navegador TypeScript React Vue Vite Plantillas de inicio de biblioteca Github de código abierto
