Wwwishlist est une extension Chrome qui peut enregistrer les souhaits de n'importe quel site Web du Web au stockage local du navigateur Chrome. Vos données restent complètement privées à cause de cela.
L'extension est actuellement publiée non répertoriée et ira complètement publique une fois que mon ami l'a testé pendant 1-2 mois.
Pour une description plus détaillée, consultez le Chrome StorePage.
Ci-dessous, vous trouverez un bref aperçu du fonctionnement interne, ce qui est prévu et si vous voulez devenir contributeur, certains documents de documents et licences.
Le cœur de Wwwishlists est le popup (HTML, contrôleur et vue) avec le grattoir.
Le grattoir injecte du code dans le site Web d'où la fenêtre contextuelle est ouverte pour retourner les images. J'ai essayé de saisir le prix mais j'ai rapidement appris que le prix n'est souvent pas beaucoup plus qu'un champ de texte (ou plusieurs). Les images sont légèrement filtrées pour supprimer des images qui ne sont certainement pas des images de produit. J'ai décidé de ne pas injecter cela dans chaque iframe sur une page parce que j'ai rencontré des problèmes sur le site Web d'Amazon.de. Si vous savez pourquoi ce problème existe, veuillez faire ma journée et me le dire. Une fois que l'utilisateur entre toutes les données et enregistre, l'image sélectionnée est peinte en toile réduite à 200x200 pixels et convertie en données Base64 car l'API d'extension Chrome n'autorise qu'un grand fichier JSON pour le stockage local. Si ce processus est réalisé sur un émission CORS, l'URL de l'image est à la place.
Je ne planifie pas de grandes mises à jour de fonctionnalités. Je suis très intéressé par tout site Web où mon extension ne fonctionne pas. La prochaine chose que je vais probablement rédiger, ce sont les tests unitaires appropriés pour les fonctions. J'ai fait mon test tout en faisant tout travailler et je regrette de ne pas automatiser les pseudo-tests que j'ai écrits pendant cette période. J'aimerais vraiment une meilleure économie de prix / devise (en ce moment, c'est juste une chaîne), mais pour être satisfait de ce que je voudrais en tirer l'utilisation, ce qui signifie que j'aimerais probablement la possibilité d'ajouter tous les articles sur la liste de souhaits jusqu'à un total (pour les listes de souhaits du projet). Et pour cela, je devrais appeler une API de convertisseur de devises. L'autre grande fonctionnalité qui me manque est un moyen facile de partager qui ne me implique pas d'exécuter un serveur.
Si vous souhaitez travailler sur une nouvelle fonctionnalité, veuillez soulever un problème de GitHub, j'aimerais travailler avec vous afin d'approuver éventuellement votre demande de traction. Si vous voulez simplement faire des corrections de bogues ou mettre à jour les demandes de traction DOCS sont super bienvenues. Si vous souhaitez construire / fourche à partir de ce projet: tout ce projet est publié sous le GPL 2. J'ai choisi le GNU afin de rendre le code peu attrayant pour la commercialisation sans limiter le partage et le changement non cocorésifs. Si vous voulez vous aider mais que vous ne savez pas avec quoi, regardez ci-dessus dans la section What Is Planned.
Afin de configurer le projet sur votre machine, vous avez besoin de NPM 10.5 ou version ultérieure. Une fois que vous avez exécuté le code
npm install
Afin d'installer les dépendances Bulma et Node-Sass spécifiés dans le package.json. Si vous souhaitez générer un nouveau fichier Bulma à partir de vos modifications SASS, exécutez simplement
npm css-build
ou si vous voulez que cela se produise automatiquement pendant que vous travaillez sur la course SASS
npm start
pour construire le Bulma en continu.
Afin d'ajouter cette extension Chrome à votre magasin Chrome, cliquez sur l'icône du puzzle en haut à droite -> Gérer les extensions -> Allumez le mode développeur -> Chargez le dossier et sélectionnez le dossier World Wide Wishlist dans votre répertoire.
Et donc vous avez installé votre version de développeur.
L'API de stockage Chrome est diabolique car elle ne vous permet de stocker qu'un gros fichier .json. Ce fichier est accessible via les outils de développement, mais plus important encore dans StorageTemplate.json, vous pouvez voir la structure DB.
Le stockage n'est accessible qu'à partir des modèles et de la base de la base de données.
Je ne suis actuellement pas convaincu que les gens voudront contribuer, donc pour l'instant je n'expliquerai pas chaque fonction, mais plus la structure de ce qui se passe. Si vous voulez vraiment le faire, faites-le moi savoir et je serai heureux d'expliquer tout ce que vous ne comprenez pas (et écrivez des documents plus approfondis).
Je suis principalement le modèle MVC dans le code. Pour résumer chaque page a un contrôleur et une vue, tandis que chaque point de données a un modèle. Chaque modèle est responsable des actions CRUD (Créer la mise à jour de la mise à jour) qui lui appartiennent. Chaque vue affiche uniquement des données vers ou récupère les données de l'utilisateur. Le contrôleur attend les actions des utilisateurs et fait appel à la vue et aux modèles pour faire ses travaux respectifs. Le versioning se fait conformément au versioning sémantique 2.0.0
Pour l'instant, la structure du programme est la suivante:
Sur installer ou mettre à jour le fond.mjs appelle le dbmanager.mjs pour configurer la base de données. En dehors de cela, l'arrière-plan.mjs fait que les entrées du menu contextuel se produisent qui vivent dans le menu d'icône d'extension avec le bouton droit.
Appelé à partir de l'arrière-plan.mjs sur l'installation pour configurer le stockage local JSON afin que la base de données fonctionne. Si vous souhaitez modifier la fonctionnalité de la structure DB, les migrations sur la mise à jour se produiraient également ici.
Ici, toutes les limites (valeurs min et max) pour les valeurs de base de données en direct.
L'extension utilise UUID V7 qui signifie que l'ID commence par un horodatage UNIX et se poursuit avec un nombre aléatoire. Ceci est important pour importer correctement les données (c'est-à-dire que les données uniques sont en fait uniques).
Vous l'avez deviné que ce fichier gouverne comment importer et exporter des données. C'est la raison pour laquelle cette extension utilise l'autorisation de téléchargement. L'utilisateur accédez à cette fonctionnalité uniquement à partir de la page Paramètres.
Ces fichiers sont des classes qui gèrent les opérations CRUD sur les objets Wish et WishList.
Le paramètres de paramètres est actuellement uniquement à l'appel à l'appel des fonctionnalités d'importation d'exportation (plus les liens de bouton). Actuellement, il n'y a pas de paramètres, mais vous pourriez peut-être changer cela!
L'utilisateur interagit avec mywishlist.html via ces 2 fichiers. Modifier, supprimer, annuler la suppression, déplacer des souhaits, créer des listes de souhaits se produit ici.
Si la fenêtre contextuelle est cliquée, le contrôleur appelle le Scraper.mjs et avec les données, le grattoir a récupéré la vue, remplit la fenêtre contextuelle afin que l'utilisateur puisse décider quelle image enregistrer et quelles informations ajouter. Une fois que l'utilisateur a fait, la vue obtient ces données, convertit l'image correspondante en base64 et répond au contrôleur pour enregistrer.
Le grattoir injecte du code dans le site Web d'où la fenêtre contextuelle est ouverte pour retourner les images. J'ai essayé de saisir le prix mais j'ai rapidement appris que le prix n'est souvent pas beaucoup plus qu'un champ de texte (ou plusieurs). Les images sont légèrement filtrées pour supprimer des images qui ne sont certainement pas des images de produit. J'ai décidé de ne pas injecter cela dans chaque iframe sur une page parce que j'ai rencontré des problèmes sur le site Web d'Amazon.de. Si vous savez pourquoi ce problème existe, veuillez faire ma journée et me le dire.
Merci à Kjeld Schmidt d'être un mentor constant et un enseignant ainsi patient tout au long de ce projet. Sans vos conseils, je n'aurais même pas commencé à coder.
Merci à Huddel de m'avoir fourni un crocodile d'image impressionnant.
Merci à tous mes autres amis, à la famille et aux étrangers Internet pour aider à les tests.
Merci à Jason Thor Hall pour avoir construit une communauté impressionnante de programmeurs et pour sa permission d'utiliser son magasin de marchandises comme capture d'écran de tutoriel.