web extension starter

corredor de extensión web

Inicio de extensión web para construir "Escribir una vez ejecutado en cualquier Extensión de navegador"

? ‍️ Hecho por @abhijithvijayan

Donar: PayPal , Patreon

---

❤️ it? ️ En Github o tuitea al respecto.

? ‍️ React + TypeScript = esta rama

? React + javaScript = checkout react-javaScript rama

? Html + javaScript = rama maestra de pago

Características

• Soporte de navegador cruzado (API de extensiones web)
• Generación de manifiesto a medida del navegador
• Construcción automática de los cambios en el código
• Auto paquete del navegador Archivos de compilación específicos
• Estilo sass
• TypeScript de forma predeterminada
• Soporte de módulos ES6
• Biblioteca React UI por defecto
• Recarga inteligente

Soporte del navegador

49 y posterior ✔	52 y posterior ✔	36 y posterior ✔	79 y posterior ✔	Último ✔	Último ✔	Último ✔

Utilizado por extensiones en producción que tienen más de más de 100,000 usuarios.

• diary.dev en Daily.dev Extension
• Jiffy Reader en Ansh/Jiffyreader.com
• Kutt-Extension en Abhijithvijayan/Kutt-Extension
• Doubanimdb en Lisongx/Doubanimdb
• Asistente de MOOC en Unbyte/MOOC Asistente
• Artipub en Crawlab-Team/Artipub

Y muchos más ...

Use esta plantilla

Crear un nuevo directorio y ejecutar

 curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1

Comienzo rápido

Asegúrese de tener

• Node.js 10 o posterior instalado

Luego ejecute lo siguiente:

• npm install para instalar dependencias.
• npm run dev:chrome para iniciar el servidor de desarrollo para la extensión de Chrome
• npm run dev:firefox para iniciar el servidor de desarrollo para el complemento de Firefox
• npm run dev:opera para iniciar el servidor de desarrollo para la extensión de Opera
• npm run build:chrome para construir una extensión de Chrome
• npm run build:firefox para construir Firefox Addon
• npm run build:opera para construir extensión de ópera
• npm run build Builts y empacan extensiones de inmediato a la extensión/ directorio

Desarrollo

• npm install para instalar dependencias.

• Para ver los cambios de archivo en el desarrollo

  • Cromo
    • npm run dev:chrome
  • Firefox
    • npm run dev:firefox
  • Ópera
    • npm run dev:opera

• Extensión de carga en el navegador

• Cromo

  • Vaya a la barra de dirección del navegador y escriba chrome://extensions
  • Verifique el botón Developer Mode para habilitarlo.
  • Haga clic en el botón Load Unpacked Extension…
  • Seleccione la carpeta de los navegadores en extension/ .

• Firefox

  • Cargue el complemento a través about:debugging como complemento temporal.
  • Elija el archivo manifest.json en el directorio extraído

• Ópera

  • Cargue la extensión a través de opera:extensions
  • Verifique el Developer Mode y cargue como desempaquetado del directorio extraído de Extension.

Producción

• npm run build construye la extensión para todos los navegadores al directorio extension/BROWSER respectivamente.

Nota: Por defecto, el manifest.json se establece con la versión 0.0.0 . Webpack Loader actualizará la versión en la compilación con la de la versión package.json . Para lanzar una nueva versión, actualice la versión en package.json y ejecute script.

Si no desea usar la versión package.json , puede deshabilitar la opción aquí.

Generando el manifiesto específico del navegador.

ACTUALIZAR source/manifest.json CON CLASES DE MANIFEST PREFICIDO DEL VENDIENTO DE VENDIS

 {
  "__chrome__name" : "SuperChrome" ,
  "__firefox__name" : "SuperFox" ,
  "__edge__name" : "SuperEdge" ,
  "__opera__name" : "SuperOpera"
}

Si el proveedor es chrome esto se compila a:

 {
  "name" : "SuperChrome" ,
}

---

Agregue las claves a múltiples proveedores separándolos con | en el prefijo

 {
  __chrome|opera__name: "SuperBlink"
}

Si el proveedor es chrome u opera , esto compila a:

 {
  "name": "SuperBlink"
}

Consulte el paquete original ReadMe of wext-manifest-loader para más detalles

Insectos

Por favor presente un problema aquí para errores, documentación faltante o comportamiento inesperado.

Configuración de Linting & TypeScript

• Configuración compartida de Eslint & Prettier - @abhijithvijayan/eslint-config
• Configuración de TypeScript compartido - @abhijithvijayan/tsconfig

Licencia

MIT © Abhijith Vijayan