En este artículo, continúo la serie de publicaciones en las que 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 1 , Parte 3 , Parte 4

Elegir un marco para el lado del servidor

Al comienzo de mi idea, estaba pensando en cómo guardar los datos obtenidos como resultado del script. Me vino a la mente la posibilidad de usar locaStorage o soluciones similares para una base de datos del lado del cliente. A medida que la planificación del código progresaba a lo largo de este camino, resultó que descargar archivos y almacenarlos en la computadora del usuario no es una buena idea, ya que el usuario estará vinculado a una computadora.

Por lo tanto, es necesario guardar los scripts de usuario, los datos obtenidos como resultado de ejecutar scripts en el lado del servidor. Los archivos de usuario también deben cargarse a través del lado del servidor. El usuario debe registrarse, restablecer la contraseña, etc. directamente a través de la interfaz de extensión web, porque el registro a través de una página separada no permitiría una interacción cómoda con la extensión web.

Por lo tanto, se eligió la forma de usar XHR junto con la API RESTful. Esta opción también permite el uso futuro del mismo código para construir un sistema de entrega de datos canalizado. Por ejemplo, obtener posiciones de recursos web en los resultados del motor de búsqueda se puede programar en un ciclo diario. Después de eso, una aplicación de terceros solicita datos obtenidos como resultado de la secuencia de comandos utilizando la API y crea un gráfico que muestra la tendencia de la posición a cambiar en los resultados de búsqueda.

Muchos marcos en diferentes lenguajes de programación tienen bibliotecas, módulos y paquetes para el rápido desarrollo de aplicaciones de servidor RESTful. Durante aproximadamente 12 años he estado trabajando con varios marcos basados ​​en PHP, y durante los últimos 3 años también he estado trabajando con Meteor.js. Este marco se ejecuta sobre node.js, por lo que lo elegí para la parte del servidor debido a su alto rendimiento (en promedio 112 milisegundos para escribir una línea de datos recibidos del script) y un rico conjunto de paquetes listos para construir la aplicación.

Como la biblioteca RESTful, elegí el paquete github.com/kahmali/meteor-restivus , que, entre otras cosas, necesitaba ser parcheado, ya que no funcionaba correctamente con autorización de gancho y protección contra la técnica de adivinar contraseñas infinitas.

Restivus tiene una buena funcionalidad para describir la API RESTful y admite trabajar de forma autorizada o anónima. Token y userId se utilizan como confirmación de autorización para ejecutar un método definido por el usuario en una dirección RESTful. Estos parámetros pueden almacenarse en permisos web localStorage y usarse al llamar a XHR.

Para la zona administrativa, elegí el paquete extensible y altamente configurable github.com/yogiben/meteor-admin , que me permitió reducir el tiempo para crear muchas páginas del mismo tipo para las necesidades del equipo de seguridad.

Diseño de una interfaz para extensiones web

La interfaz juega un papel decisivo en la selección de un producto por parte del usuario. La conveniencia y el minimalismo fueron elegidos como los criterios principales para la interfaz de extensión web. Posteriormente, se agregó un lado estético para completar toda la aplicación.

Semantic-ui fue elegido como el marco css / html. Al mismo tiempo, rechacé paquetes npm adicionales y mecanismos de ensamblaje como webpack para minimizar las dependencias y el tamaño de la extensión web. El código se escribe de la forma más transparente posible, utilizando solo tres bibliotecas js y archivos de terceros.

Para comenzar el proceso, se compiló una lista de las páginas necesarias. Las páginas para trabajar con una cuenta de usuario se agruparon en esta lista.

1. Página de inicio de sesión
2. Página de registro
3. Página de restablecimiento de contraseña

En este punto, hubo un problema de restablecimiento de contraseña de enlace único. En una aplicación normal, el usuario puede seguir el enlace, restablecer la contraseña y luego ingresar a la aplicación. Una extensión web puede "interceptar" enlaces mediante navigator.registerProtocolHandler y autorizar a un usuario en una extensión web, pero no todos los navegadores lo admiten. Por lo tanto, se decidió restablecer la contraseña mediante el enlace, y luego el usuario puede ingresar la extensión web utilizando la nueva contraseña.

A continuación se muestra un formulario para registrar un nuevo usuario en la extensión web.


Aquí puede ver elementos para el marketing social, como el código de invitación y enlaces para su distribución en las redes sociales junto al elemento para enviar una pregunta al servicio de soporte.

Después del registro, o después de la autorización, el usuario puede editar su perfil directamente en la extensión web. Esto mejora cualitativamente la solución actual, ya que elimina la necesidad de trabajar con un sitio web separado. El usuario puede realizar todas las acciones en un solo lugar.


Todas las pantallas están divididas en pestañas, lo que le permite moverse rápidamente entre pantallas y desempeña el papel de una especie de menú. En algunos casos, para una representación más visual, los elementos se minimizan para la iteración actual. Por ejemplo, las firmas de los botones se colocan en los botones mismos, aunque en el futuro se planea reemplazar la lista vertical de botones por una horizontal y eliminar las firmas en la información sobre herramientas. Esto se hace para maximizar la presentación de extensiones web para nuevos usuarios. Así es como se hace la pantalla principal con una lista de scripts para la iteración actual.


Cada script de usuario debe ser creado por alguien. Como se mencionó anteriormente en la extensión web, puede haber tanto scripts públicos como privados. Para agregar scripts, use la siguiente forma simple.


Además, el usuario puede establecer un signo de publicidad de script, que permitirá a otros usuarios utilizar la experiencia de la comunidad de extensiones web.

Los guiones públicos tienen varias limitaciones. Por ejemplo, no se pueden usar para el inicio en una página, en el programador de tareas y tienen teclas de acceso rápido. Además, cada script público tiene la capacidad de "editar", durante el cual el usuario puede eliminar el signo de publicidad y guardarlo en un estado privado como su propio script. Estos pasos adicionales son necesarios para proteger contra desarrolladores sin escrúpulos. Al "editar" un script público, el usuario deberá revisar el código y decidir su uso según sus necesidades.

La descarga de archivos en la extensión web se implementa leyendo el contenido del archivo en el búfer, codificando y enviando a través del canal XHR al servidor. En el servidor POST, la solicitud se procesa y el archivo se envía al almacenamiento en la nube. En los scripts, los usuarios pueden leer los archivos descargados a través de GC.loadFile ('filename.ext'); , una función de la biblioteca interna sobre la que se escribirá un artículo separado.


Cada secuencia de comandos puede escribir datos de cálculos llamando a la función de la biblioteca interna. Cada llamada registrará una fila en una celda con el mismo nombre para todas las filas. De esta manera puede escribir archivos csv. La siguiente pantalla muestra la interfaz para trabajar con datos de salida. El usuario puede descargar los datos directamente desde la extensión web, enviar el archivo generado a su correo electrónico, obtener un enlace a la API para su uso en una aplicación de terceros o eliminar los datos.


Todas las acciones que cambian el estado de la secuencia de comandos, como la acción de eliminación, requieren confirmación. La extensión web tiene una restricción en el uso de ventanas emergentes o de confirmación, ya que tiene una interfaz que se ejecuta en ventanas emergentes. Por lo tanto, se utiliza el mecanismo de entrada de la palabra de confirmación.


En el próximo artículo hablaré sobre las "trampas en la implementación de la interacción de las extensiones web y el lado del servidor" .