world wide wishlist
1.0.0
WwwishList ist eine Chrome -Erweiterung, die Wünsche von jeder Website im Web bis zum lokalen Speicher des Chrome -Browsers speichern kann. Ihre Daten bleiben aufgrund dessen völlig privat.
Die Erweiterung ist derzeit nicht gelistet und wird völlig öffentlich gehen, sobald mein Freund sie 1-2 Monate lang getestet hat.
Eine detailliertere Beschreibung finden Sie in der Chrome -Lagerung.
Im Folgenden finden Sie einen kurzen Überblick über die inneren Arbeiten, was geplant ist und wenn Sie Mitwirkende, einige Dokumente und Lizenzprodukte werden möchten.
Das Herz von Wwwishlists ist das Popup (HTML, Controller und View) zusammen mit dem Schaber.
Der Schaber injiziert Code in die Website, von der das Popup geöffnet wird, um die Bilder zurückzugeben. Ich habe versucht, den Preis zu greifen, aber ich habe schnell erfahren, dass der Preis oft nicht viel mehr als ein Textfeld (oder mehrere) ist. Die Bilder werden leicht gefiltert, um Bilder zu entfernen, die definitiv keine Produktbilder sind. Ich habe mich dagegen entschieden, dies auf einer Seite in jeden Iframe zu injizieren, weil ich auf der Amazon.de -Website Probleme gestoßen habe. Wenn Sie wissen, warum dieses Problem existiert, machen Sie bitte meinen Tag und sagen Sie es mir. Sobald der Benutzer alle Daten und Speichern eingibt, wird das ausgewählte Bild in eine Leinwand gemalt, die auf 200x200 Pixel geschrumpft und in Base64 -Daten konvertiert wird, da die Chrome -Erweiterungs -API nur eine große JSON -Datei für den lokalen Speicher ermöglicht. Sollte dieser Vorgang in ein CORS -Problem starten, ist die Bild -URL stattdessen geschützt.
Ich plane keine großen Feature -Updates. Ich interessiere mich sehr für eine Website, auf der meine Erweiterung nicht auftritt. Das nächste, was ich wahrscheinlich schreiben werde, sind richtige Unit -Tests für die Funktionen. Ich habe meinen Test durchgeführt, während ich alles zum Laufen gebracht habe, und bereue es, die Pseudo -Tests, die ich in dieser Zeit geschrieben habe, nicht zu automatisieren. Ich möchte wirklich einen besseren Preis/eine bessere Währungsparnis (im Moment ist es nur eine Zeichenfolge), aber um zufrieden zu sein, möchte ich davon ausgewendet, was bedeutet, dass ich wahrscheinlich alle Elemente auf der Wunschliste bis zu einer Gesamtsumme hinzufügen würde (für Projektwunschlisten). Und dafür müsste ich eine Währungswandler -API aufrufen. Die andere große Funktion, die ich vermisse, ist eine einfache Möglichkeit zu teilen, dass ich nicht dazu beinhaltet, einen Server auszuführen.
Wenn Sie an einer neuen Funktion arbeiten möchten, stellen Sie bitte ein Github -Problem an, ich möchte mit Ihnen zusammenarbeiten, um schließlich Ihre Pull -Anfrage zu genehmigen. Wenn Sie nur Fehlerbehebungen durchführen oder aktualisieren möchten, sind die Anforderungen der Dokumente sehr willkommen. Wenn Sie aus diesem Projekt erstellen möchten: Dieses gesamte Projekt wird unter der GPL veröffentlicht. Ich habe die GNU ausgewählt, um den Code unattraktiv für die Kommerzialisierung zu gestalten, ohne die Nicht-Komercial-Freigabe und -änderung zu begrenzen. Wenn Sie helfen möchten, aber nicht mit was wissen möchten, schauen Sie sich den Abschnitt "Was ist geplant" an.
Um das Projekt auf Ihrem Computer einzurichten, benötigen Sie NPM 10.5 oder höher. Sobald Sie den Code ausgeführt haben
npm install
Um die in Paket.json angegebenen Abhängigkeiten zu installieren. Wenn Sie eine neue Bulma -Datei aus Ihren Sass -Änderungen generieren möchten, werden einfach ausgeführt
npm css-build
Oder wenn Sie möchten, dass dies automatisch geschieht, während Sie am SASS -Lauf arbeiten
npm start
Um den Bulma kontinuierlich zu bauen.
Um diese Chrome -Erweiterung zu Ihrem Chrome -Store hinzuzufügen, klicken Sie oben rechts auf das Puzzle -Symbol -> Erweiterungen verwalten -> Einschalten des Entwicklermodus -> Laden Sie ausgepackt und wählen Sie den World Wishlist -Ordner in Ihrem Verzeichnis aus.
Und so haben Sie Ihre Entwicklerversion installiert.
Die Chrome -Speicher -API ist böse, da Sie nur eine große einzelne .json -Datei speichern können. Diese Datei ist über die Dev -Tools zugegriffen, vor allem in storagetemplate.json können Sie die DB -Struktur sehen.
Auf den Speicher wird nur aus Modellen und Datenbankhandling zugegriffen.
Ich bin derzeit nicht überzeugt, dass die Leute dazu beitragen wollen, also werde ich nicht jede einzelne Funktion erklären, sondern mehr die Struktur des Geschehens. Wenn Sie das tatsächlich tun möchten, lassen Sie es mich bitte wissen und ich werde gerne alles erklären, was Sie nicht verstehen (und gründlichere Dokumente schreiben).
Ich folge meistens dem MVC -Muster im Code. Zusammenfassend hat jede Seite einen Controller und eine Ansicht, während jeder Datenpunkt über ein Modell verfügt. Jedes Modell ist verantwortlich für die zu ihm gehörenden Aktionen für CRUD -Aktionen (Lese -Update -Löschen). Jede Ansicht zeigt nur Daten an oder ruft Daten vom Benutzer ab. Die einzelnen Controller erwartet Benutzeraktionen und fordert die Ansicht und die Modelle auf, ihre jeweiligen Jobs zu erledigen. Die Versionierung erfolgt gemäß der semantischen Versioning 2.0.0
Im Moment lautet die Programmstruktur wie folgt:
Bei Installation oder Aktualisierung des Hintergrunds.mjs ruft die dbManager.mjs auf, um die Datenbank einzurichten. Abgesehen davon lässt der Hintergrund.MJS die Kontextmenüeinträge erfolgen, die im Menü mit der Rechtsklick-Erweiterungssymbol leben.
Aus dem Hintergrund aufgerufen. Wenn Sie die Funktionalität der DB -Struktur ändern möchten, würden hier auch Migrationen zum Update stattfinden.
Hier alle Grenzen (min und maximale Werte) für Datenbankwerte live.
Die Erweiterung verwendet UUID V7, was bedeutet, dass die ID mit einem Unix -Zeitstempel beginnt und mit einer Zufallszahl fortgesetzt wird. Dies ist wichtig für die richtige Importdaten (dh eindeutige Daten sind tatsächlich eindeutig).
Sie haben es erraten, dass diese Datei regiert, wie Daten importiert und exportiert werden. Dies ist der Grund, warum diese Erweiterung die Download -Berechtigung verwendet. Der Benutzer greift auf diese Funktionalität nur über die Einstellungsseite zu.
Diese Dateien sind Klassen, die die CRUD -Operationen auf Wunsch- und Wunschlisteobjekten verarbeiten.
Die EinstellungenController.MJS dienen im Moment nur wirklich dazu, die Export -Importfunktionalität aufzurufen (plus die Tastenlinks). Derzeit gibt es keine Einstellungen, aber vielleicht könnten Sie das ändern!
Der Benutzer interagiert über diese 2 Dateien mit MyWishList.html. Bearbeiten, Löschen, Löschen des Löschens, bewegliche Wünsche, das Erstellen von Wishlists finden hier alle statt.
Wenn auf das Popup geklickt wird, ruft der Controller den Scraper.mjs auf und mit den Daten, die der Schaber die Ansicht abgerufen hat, füllt das Popup, damit der Benutzer entscheiden kann, welches Bild und welche Informationen hinzugefügt werden sollen. Sobald der Benutzer dies getan hat, dass die Ansicht diese Daten erhält, das entsprechende Bild in Base64 konvertiert und auf das Speichern auf den Controller reagiert.
Der Schaber injiziert Code in die Website, von der das Popup geöffnet wird, um die Bilder zurückzugeben. Ich habe versucht, den Preis zu greifen, aber ich habe schnell erfahren, dass der Preis oft nicht viel mehr als ein Textfeld (oder mehrere) ist. Die Bilder werden leicht gefiltert, um Bilder zu entfernen, die definitiv keine Produktbilder sind. Ich habe mich dagegen entschieden, dies auf einer Seite in jeden Iframe zu injizieren, weil ich auf der Amazon.de -Website Probleme gestoßen habe. Wenn Sie wissen, warum dieses Problem existiert, machen Sie bitte meinen Tag und sagen Sie es mir.
Vielen Dank an Kjeld Schmidt für die ständige Mentorin und so geduldiger Lehrer in diesem ganzen Projekt. Ohne Ihre Anleitung hätte ich nicht einmal mit dem Codieren begonnen.
Vielen Dank an Huddel, dass er mir ein fantastisches Image-Krokodil zur Verfügung gestellt hat.
Vielen Dank an alle meine anderen Freunde, Familien- und Internet -Fremden, um beim Testen zu helfen.
Vielen Dank an Jason Thor Hall für den Aufbau einer großartigen Community von Programmierern und für seine Erlaubnis, sein Merch -Geschäft als mein Tutorial -Screenshot -Material zu nutzen.
