En esta serie de artículos, quiero hablar sobre mi experiencia escribiendo una extensión web para navegadores. Ya tenía experiencia en la creación de una extensión web, que fue instalada por unos 100,000 usuarios de Chrome, que funcionó de manera autónoma, pero en esta serie de artículos decidí profundizar en el proceso de desarrollo de la extensión web al integrarla estrechamente con el lado del servidor.




Parte 2 , Parte 3 , Parte 4

Idea para extensión web

Cada desarrollador se enfrenta a las tareas de automatización de procesos en el navegador. Una vez para mí, la tarea era reunir a miembros de grupos de un determinado tema en LinkedIn y Facebook.

Antes de eso, tenía experiencia escribiendo soluciones de analizador web en php, pero estos sitios usan muchos elementos dinámicos y el enfoque de la solución para esta tarea se ha desplazado específicamente a interactuar con los recursos web a través de un navegador.

Por supuesto, no iba a violar el acuerdo sobre la prestación de servicios (Términos y condiciones), por lo que lo que se describe a continuación es pura ficción de mi imaginación y no se recomienda su implementación.

Fue posible abrir rápidamente la consola del desarrollador y escribir un script javascript que simule las acciones del usuario, después de lo cual pude recopilar datos. Este enfoque funcionó parcialmente con Facebook, donde los miembros del grupo y su información se pueden recopilar en una página. Pero no funcionó para LinkedIn, donde debe abrir la página de cada miembro.

Después de buscar soluciones de terceros, elegí iMacros para esta tarea. Esta extensión tiene su propio lenguaje para escribir macros. De alguna manera lo adapté para resolver el problema de LinkedIn. Tuve que descargar la versión anterior de Mozilla Firefox, ya que la extensión no funcionaba para la implementación multiproceso de este navegador.

Mientras buscaba soluciones de terceros, me encontré con muchas variaciones de analizador web, rastreador web, raspador web, etc. Muchos se centraron en sitios con navegación página por página y no en contenido dinámico. Algunas soluciones sugirieron instalar una solución de software para el sistema operativo y luego usar una extensión web para un complejo tan complejo. Encontré cosas muy especializadas, por ejemplo, para reunir participantes solo en Facebook.

Después de todo el tormento, tuve la idea de "inventar mi bicicleta" para automatizar las tareas en el navegador. Entre los requisitos obligatorios para mi extensión web, destaqué:

1. Trabaje en la cantidad máxima de navegadores web, incluidos los dispositivos móviles.
2. El uso del lenguaje de secuencias de comandos estándar para los navegadores es javascript.
3. Usando sus propios archivos de datos en scripts.
4. La capacidad de guardar los datos recibidos del script en un archivo.
5. Los guiones deben ser públicos o privados. Si el script es público, entonces el equipo de seguridad debe verificar dicho script.

Además de esta lista, noté cosas más específicas para cada elemento.

1. Debe usar un marco para escribir extensiones web para minimizar los esfuerzos para desarrollar soluciones entre navegadores.
2. Todos los navegadores admiten Javascript, pero debe escribir su propia biblioteca para interactuar con la extensión web. Esta biblioteca debe tener funciones para guardar datos, recuperar datos de archivos descargados, etc.
3. A menudo es necesario usar la entrada para ejecutar el script. Por ejemplo, datos para autorización, claves para la API, una lista de páginas para rastrear, etc. Dichos datos deben cargarse directamente en la extensión web y almacenarse en la nube.
4. Guardar datos del script es una de las funciones más necesarias para la automatización. Los datos almacenados deben cargarse a csv directamente desde la extensión web, o enviarse al correo del usuario cuando se excede el límite de datos para cargar. Por ejemplo, si la carga de miembros del grupo supera los 10.000, la descarga desde una extensión web puede llevar mucho tiempo. Esto debe evitarse generando un archivo en el servidor.
5. Debe tener una interfaz web administrativa para que el equipo de seguridad verifique los scripts de los usuarios que han marcado como públicos.

De vez en cuando, encontraba más y más soluciones para el mismo problema: ejecutar scripts personalizados en un navegador. Todas estas soluciones no se ajustaban a mis requisitos, ya que quería tener una extensión web que pudiera eliminar anuncios en cada página; transformar la página y mostrarme solo su contenido, sin marcas innecesarias; recopilar datos de cualquier página y convertirlos a un formato conveniente para uso futuro; recopilar datos después de un cierto período de tiempo; etc.

Por lo tanto, me "incendié" furiosamente creando una extensión para ejecutar scripts personalizados para el rango máximo de tareas.

Elegir un marco de extensión web

Dado que inicialmente apunté al número máximo de navegadores web, necesitaba un marco para construir extensiones entre navegadores. Podemos notar de inmediato el hecho de que simplemente no existe dicho marco. Porque muchos navegadores, aunque funcionan de esta manera y proporcionan extensiones web con una API similar para la interacción, son fundamentalmente diferentes.

Me vi obligado a abandonar la versión inicial del soporte del navegador móvil casi de inmediato. Dado que ninguno de estos navegadores no ofrece la posibilidad de utilizar extensiones web. Solo encontré una mención de soporte para extensiones web en el navegador Dolphin, pero no pude encontrar información detallada en el sitio web oficial. Se decidió abandonar esta brillante idea.

Al escribir mi antigua extensión, utilicé el marco kango. En 2013, fue lo más conveniente posible. Aunque sin el soporte de Internet Explorer.

Dado que mi extensión podría funcionar como un marcador, no presté atención a este hecho y elegí este marco, que para su momento era la solución perfecta para el desarrollo entre navegadores.

Desde entonces, han aparecido otros proyectos que se han fijado el objetivo del desarrollo de extensiones web en varios navegadores. Encontré todos estos proyectos en una etapa temprana de desarrollo. Desde entonces, su tarea se ha simplificado, ya que Mozilla Firefox comenzó a usar la API de WebExtensions, lo que hizo posible convertir fácilmente las extensiones de Chrome en extensiones para Firefox.

Las extensiones para el navegador Opera en 2013 eran compatibles con las extensiones para Chrome. Las extensiones para Safari ahora solo funcionan para MacOs, porque el soporte para la plataforma Windows del navegador Safari en sí mismo ha cesado hace mucho tiempo.

El navegador Tor se ejecuta en el antiguo motor Mozilla Firefox y, por lo tanto, admite extensiones web xpi, que la Fundación Mozilla ha abandonado en favor de la tecnología de extensión web.

En esencia, el marco de trabajo de kango casi está haciendo su trabajo hasta el día de hoy, ya que genera extensiones web para todos los navegadores, excepto Internet Explorer. Pero como ha pasado mucho tiempo y Firefox ahora funciona en un mecanismo similar a Chrome, kango genera el mismo paquete para dos navegadores. Tuve que modificar un poco la generación para Firefox y agregar la generación para Tor.

Dado que el estado del proyecto de marco de kango no está claro, así como la licencia del código, no puedo publicar mis cambios en el dominio público. Si los titulares de los derechos de autor permiten el lanzamiento de la versión 1.9.0 con código fuente abierto, estaré encantado de ayudarlo en esta tarea.

Todas las extensiones web tienen dos puntos para trabajar con datos. El archivo content.js le permite manipular el DOM, mientras que background.html le permite trabajar con datos de fondo e interacción con el servidor. La comunicación entre estos dos puntos ocurre a través del mecanismo del mensaje.

Por lo tanto, para modificar el DOM con datos del lado del servidor, necesitamos obtenerlos de background.html y usarlos en content.js a través del mecanismo de paso de mensajes

Tal mecanismo ideal no funcionó para mi caso por varias razones. Por lo tanto, dejé en background.js solo la lógica de trabajar con ventanas emergentes y el botón de extensión web en el navegador.
La lógica de cualquier extensión web con una ventana emergente es la misma. Al hacer clic en el botón, solo mostramos una ventana emergente, en el segundo clic, cerrar.

El marco Kango ofrece al desarrollador una interfaz unificada para la interacción, y luego traduce el código de la extensión web escrita a la extensión web para un navegador web específico y, por lo tanto, ahorra mucho tiempo desarrollando extensiones web entre navegadores.

En el próximo artículo, hablaré sobre elegir el "Marco para el lado del servidor de la extensión web y la interfaz de extensión web"