Saltar al contenido

¿Cuál es la forma más sencilla de desarrollar la extensión de Firefox?

Solución:

Es 2013, ¿no hay una forma más fácil de crear extensiones de Firefox?

¡Sí hay!

Los enlaces que proporcionó en la pregunta están increíblemente desactualizados. Hay una forma nueva y mucho mejor de desarrollar extensiones de Firefox: SDK de complementos de Firefox.

Sin embargo, es bastante difícil tropezar con él simplemente buscando en Google las líneas del ‘tutorial de complementos de Firefox’. Me sorprende que Mozilla no lo anuncie de manera más agresiva, o al menos lo mencione en las páginas que encontró.

Pasos para empezar (Mac / Linux, pero debería ser bastante similar para PC):

  • Descargue el SDK de https://addons.mozilla.org/en-US/developers/builder, descomprímalo.
  • Eche un vistazo rápido al archivo README (siempre útil).
  • Ejecutar source bin/activate desde el directorio SDK (el mismo directorio en el que se encuentra el archivo README).
  • Ejecutar cfx docs – esto arranca una copia local de los documentos del SDK y la abre en su navegador.
  • Deje el directorio SDK, cree un directorio vacío para su extensión.
  • Ejecutar cfx init dentro del directorio de extensiones – esto genera todos los archivos / directorios necesarios.
  • Siga el resto de la página de introducción a cfx:
    • Actualizar lib/main.js con solo unas pocas líneas de JS para colocar un widget personalizado en la barra de complementos.
    • Ejecutar cfx run – esto abre una nueva instancia de Firefox con su nueva extensión brillante en ella.

En general, me tomó solo unas horas leer la documentación, familiarizarme con las API-s del SDK, encontrar el módulo SDK para colocar un widget en una barra de navegación en lugar de una barra de complementos y desarrollar una extensión completamente funcional en aproximadamente 50 líneas de JavaScript.

HTH!

Actualizar

Hay un nuevo estándar, llamado WebExtensions

De MDN

Actualmente existen varios conjuntos de herramientas para desarrollar complementos de Firefox, pero WebExtensions se convertirá en el estándar a finales de 2017.

Si está escribiendo un nuevo complemento, le recomendamos que escriba una WebExtension.

Sí, hay tres técnicas diferentes que puede utilizar para crear extensiones:

  1. Extensiones complementarias basadas en SDK
  2. extensiones sin reinicio arrancadas manualmente
  3. extensiones de superposición

Puedes leer la comparación entre aquí

Si puede, es recomendable utilizar el SDK de complementos, que utiliza el mecanismo de extensión sin reinicio pero simplifica ciertas tareas y se limpia después de sí mismo. Si el SDK complementario no es suficiente para sus necesidades, implemente una extensión manual sin reinicio en su lugar.

Pasos para empezar con Extensiones complementarias basadas en SDK

  1. Instalación
    • Instalación en OS X, FreeBSD, Linux
    • Instalación en OS X usando Homebrew
    • Instalación en Windows
  2. Crea interfaces de usuario
  3. Interactuar con el navegador

A partir de https://blog.mozilla.org/addons/2016/11/23/add-ons-in-2017/, la única forma de avanzar será utilizar WebExtensions. Las últimas extensiones de SDK se aceptarán para Firefox 52, mientras que Firefox 57 terminará con todas las demás extensiones de soporte, compatible solo con WebExtensions.

Firefox copió la API de extensión de Google Chrome. Para que pudieras solo usa tu extensión de Chrome y vea si todas las API ya son compatibles con Firefox (deberían serlo a partir de ahora). Los programadores como Giorgio Maone de NoScript apoyan activamente el cambio a WebExtensions.

Para desarrollar una WebExtension, necesita

  • ya sea el web-ext-herramienta que se puede instalar a través de

    npm install --global web-ext
    
  • o simplemente usa Firefox about:debugging o de Chromium chrome:extensions para cargar temporalmente la extensión web.

De cualquier manera, necesitas un manifest.json archivo en un directorio creado por usted, que une todas las funciones. Consulte https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension para ver un primer ejemplo. O los documentos de Google en https://developer.chrome.com/getstarted.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *