world wide wishlist
1.0.0
Wwwishlist es una extensión de Chrome que puede guardar deseos de cualquier sitio web en la web al almacenamiento local del navegador Chrome. Sus datos permanecen completamente privados debido a eso.
La extensión se lanza actualmente sin listones y se volverá completamente pública una vez que mi amigo la probó durante 1-2 meses.
Para obtener una descripción más detallada, consulte el Chrome StorePage.
A continuación encontrará una breve descripción general sobre el funcionamiento interno, lo que está planeado y si desea convertirse en un colaborador, algunos documentos y cosas de licencia.
El corazón de wwwishlists es la ventana emergente (HTML, controlador y vista) junto con el raspador.
El scraper inyecta el código en el sitio web desde donde se abre la ventana emergente para devolver las imágenes. Intenté obtener el precio, pero rápidamente aprendí que el precio a menudo no es mucho más que un campo de texto (o múltiple). Las imágenes se filtran ligeramente para eliminar imágenes que definitivamente no son imágenes de productos. He decidido no inyectar esto en cada iframe en una página porque me encontré con problemas en el sitio web de Amazon.de. Si sabes por qué existe ese problema, me acompañe y dígame. Una vez que el usuario ingresa todos los datos y guarda, la imagen seleccionada se pinta a un lienzo encogido a 200x200 píxeles y se convierte a datos Base64 ya que la API de extensión de Chrome solo permite un archivo JSON grande para el almacenamiento local. Si este proceso se encuentra con un problema de CORS, la URL de la imagen está segura en su lugar.
No estoy planeando ninguna actualización de características grandes. Sin embargo, estoy muy interesado en cualquier sitio web donde mi extensión no funcione. Lo siguiente que probablemente escribiré son las pruebas unitarias adecuadas para las funciones. Hice mi prueba mientras hacía que todo funcione y lamento no automatizar las pruebas de pseudo que escribí durante ese período. Realmente me gustaría un mejor ahorro de precio/moneda (en este momento es solo una cadena), pero para estar contento con eso me gustaría usarlo, lo que significa que probablemente me gustaría la capacidad de agregar todos los artículos en la lista de deseos hasta un total (para listas de deseos de proyectos). Y para eso necesitaría llamar a una API de convertidor de divisas. La otra gran característica que extraño es una manera fácil de compartir que no me implica ejecutar un servidor.
Si desea trabajar en una nueva función, plantee un problema de GitHub, me gustaría trabajar con usted para eventualmente aprobar su solicitud de extracción. Si solo desea hacer correcciones de errores o actualizar, las solicitudes de extracción de documentos son súper bienvenidas. Si desea construir/bifurcar a partir de este proyecto: todo este proyecto se lanza bajo el GPL 2. Elegí la GNU para que el código sea poco atractivo para la comercialización sin limitar el intercambio no comercial y el cambio. Si quieres ayudar pero no sé con qué, mira arriba en la sección de lo que está planeado.
Para configurar el proyecto en su máquina, necesita NPM 10.5 o posterior. Una vez que tenga el código ejecutado
npm install
Para instalar las dependencias Bulma y Node-Sass especificadas en el paquete.json. Si desea generar un nuevo archivo de Bulma a partir de sus cambios SASS, simplemente se ejecute
npm css-build
O si desea que esto suceda automáticamente mientras trabaja en la ejecución de Sass
npm start
para construir la Bulma continuamente.
Para agregar esta extensión de Chrome a su tienda Chrome, haga clic en el icono del rompecabezas en la parte superior derecha -> Administrar extensiones -> ENCENDIDO MODO DEL DESARROLLADOR -> Carga desempaquetado y seleccione la carpeta World Wide Listist en su directorio.
Y por lo tanto, tiene instalada su versión de desarrollador.
La API de almacenamiento de Chrome es malvada porque solo le permite almacenar un gran archivo .json. Se puede acceder a este archivo a través de las herramientas de Dev, pero lo más importante en StorageTemplate.json puede ver la estructura de DB.
El almacenamiento solo se accederá desde modelos y databasehandling.
Actualmente no estoy convencido de que la gente quiera contribuir, así que por ahora no explicaré cada función, sino más bien la estructura de lo que está sucediendo. Si realmente quieres hacer eso, hágamelo saber y me alegré de explicar cualquier cosa que no entiendas (y escriba documentos más completos).
Sigo principalmente el patrón MVC en el código. Para resumir, cada página tiene un controlador y una vista, mientras que cada punto de datos tiene un modelo. Cada modelo es responsable de las acciones RRUD (Crear Update Read Update) que le pertenecen. Cada vista solo muestra datos o recupera datos del usuario. Cada controlador espera acciones del usuario y llama a la vista y a los modelos a hacer sus respectivos trabajos. El verso se realiza de acuerdo con el versiones semánticas 2.0.0
Por ahora, la estructura del programa es la siguiente:
En instalar o actualizar el fondo.mjs llama a DBManager.mjs para configurar la base de datos. Aparte de eso, el fondo.mjs hace que las entradas del menú contextual ocurran que viven en el menú de icono de extensión de clic derecho.
Llamado desde el fondo. Si desea cambiar la funcionalidad de la estructura DB, las migraciones en la actualización también se realizarían aquí.
Aquí todos los límites (valores min y máximos) para los valores de la base de datos en vivo.
La extensión usa UUID V7, lo que significa que la ID comienza con una marca de tiempo UNIX y continúa con un número aleatorio. Esto es importante para los datos de importación correctamente (es decir, los datos únicos son realmente únicos).
Lo adivinó que este archivo gobierna cómo importar y exportar datos. Es la razón por la que esta extensión usa el permiso de descarga. El usuario accede a esa funcionalidad solo desde la página de configuración.
Estos archivos son clases que manejan las operaciones CRUD en los deseos y los objetos de la lista de deseos.
SettingsController.mjs en este momento solo sirve para llamar a la funcionalidad de importación de exportación (más los enlaces de botones). Actualmente no hay configuración, ¡pero tal vez podría cambiar eso!
El usuario interactúa con mywishList.html a través de estos 2 archivos. Editar, eliminar, deshacer, eliminar, mover los deseos, crear listas de deseos está sucediendo aquí.
Si se hace clic en la ventana emergente, el controlador llama a scraper.mjs y con los datos el raspador recuperó la vista y luego llena la ventana emergente para que el usuario pueda decidir qué imagen guardar y qué información agregar. Una vez que el usuario ha hecho que la vista obtenga esos datos, convierte la imagen correspondiente en base64 y responde al controlador para guardar.
El scraper inyecta el código en el sitio web desde donde se abre la ventana emergente para devolver las imágenes. Intenté obtener el precio, pero rápidamente aprendí que el precio a menudo no es mucho más que un campo de texto (o múltiple). Las imágenes se filtran ligeramente para eliminar imágenes que definitivamente no son imágenes de productos. He decidido no inyectar esto en cada iframe en una página porque me encontré con problemas en el sitio web de Amazon.de. Si sabes por qué existe ese problema, me acompañe y dígame.
Gracias a Kjeld Schmidt por ser un mentor constante y un maestro tan paciente a lo largo de todo este proyecto. Sin su guía, ni siquiera habría comenzado a codificar.
Gracias a Huddel por proporcionarme un impresionante cocodrilo de imagen, no fundamento.
Gracias a todos mis otros amigos, familiares e extraños de Internet para ayudar con las pruebas.
Gracias a Jason Thor Hall por construir una increíble comunidad de programadores y por su permiso para usar su tienda Merch Store como mi material de captura de pantalla tutorial.
