world wide wishlist
1.0.0
wwwishlistは、Web上の任意のWebサイトからChromeブラウザーのローカルストレージに希望を保存できるChrome拡張機能です。そのため、データは完全に非公開です。
拡張機能は現在リリースされていないリリースされており、友人が1〜2か月間テストすると完全に公開されます。
より詳細な説明については、Chrome StorePageを参照してください。
以下に、内部の仕組み、計画されていること、そしてあなたが貢献者になりたいなら、いくつかのドキュメントとライセンスのものに関する簡単な概要を示します。
wwwishlistsの中心は、スクレーパーと一緒にポップアップ（HTML、コントローラー、ビュー）です。
スクレーパーは、画像を返すためにポップアップが開かれた場所にコードをWebサイトに注入します。私は価格をつかんでみましたが、価格はテキストフィールド（または複数）以上のものではないことが多いことをすぐに知りました。画像はわずかにフィルタリングされて、間違いなく製品画像ではない画像を削除します。 Amazon.DEのWebサイトで問題に遭遇したため、ページ上のすべてのiframeにこれを注入することに決めました。その問題が存在する理由を知っているなら、私の一日を作って教えてください。ユーザーがすべてのデータを入力して保存すると、選択した画像は200x200ピクセルに縮小したキャンバスにペイントされ、Chrome拡張機能APIはローカルストレージ用の1つのBig JSONファイルのみを許可するため、Base64データに変換されます。このプロセスがCORSの発行に遭遇した場合、代わりに画像URLが保護されます。
私は大きな機能の更新を計画していません。私は自分の拡張機能が実行に失敗したウェブサイトに非常に興味があります。おそらく次に書くのは、機能の適切な単体テストです。私はすべてを機能させながらテストを行い、その期間中に書いた擬似テストを自動化しないことを後悔しています。私は本当により良い価格/通貨の節約を望んでいます（今はただの文字列です）が、それを使ってみたいと思うことに満足しているため、ウィッシュリストのすべてのアイテムを1つの合計（プロジェクトのウィッシュリスト）に追加する機能がおそらく望んでいます。そのためには、通貨コンバーターAPIを呼び出す必要があります。私が見逃している他の大きな機能は、私がサーバーを実行することを伴わない簡単な共有方法です。
新機能に取り組みたい場合は、GitHubの問題を提起してください。最終的にプルリクエストを承認するために協力したいと思います。バグの修正を行うか、ドキュメントを更新したい場合は、歓迎されます。このプロジェクトから構築/フォークする場合：このプロジェクト全体はGPL 2の下でリリースされます。私はGNUを選択して、非容認の共有と変更を制限することなくコードを商業化に魅力的にしません。あなたが助けたいが、何を知らないかを知らないなら、計画されているセクションを上で見てください。
マシンにプロジェクトをセットアップするには、NPM 10.5以降が必要です。コードを実行したら
npm install
Package.jsonで指定された依存関係のbulmaとnode-sassをインストールするため。 SASSの変更から新しいbulmaファイルを生成したい場合は、単純に実行します
npm css-build
または、これをSASSの実行に取り組んでいる間に自動的に発生したい場合
npm start
BULMAを継続的に構築します。
このChrome拡張機能をChromeストアに追加するには、右上のパズルアイコンをクリックします - > [拡張機能の管理] - >開発者モードをオンにします - > [ロード]解除し、ディレクトリのWorld Wide Wishlistフォルダーを選択します。
したがって、開発者バージョンがインストールされています。
ChromeストレージAPIは、大きなシングル.JSONファイルに保存できるため、悪です。このファイルは開発ツールを介してアクセスできますが、さらに重要なことには、storagetemplate.jsonでは、DB構造を見ることができます。
ストレージは、モデルとデータベースハンドリングからのみアクセスされます。
私は現在、人々が貢献したいとは確信していないので、今のところすべての機能を説明するのではなく、何が起こっているのかをより多く説明します。あなたが実際にそれをしたいなら、私に知らせてください、そして私はあなたが理解していないことを説明してうれしいです（そしてより徹底的なドキュメントを書く）。
私は主にコードのMVCパターンに従います。すべてのページにはコントローラーとビューがあり、すべてのデータポイントにはモデルがあります。各モデルは、それに属するCRUD（CREATE READ UPDATE DELETE）アクションを担当します。各ビューは、ユーザーからデータを表示または取得します。各コントローラーはユーザーアクションを待っており、ビューとモデルにそれぞれのジョブを行うように呼びます。バージョン化は、セマンティックバージョン2.0.0に従って行われます
今のところ、プログラム構造は次のとおりです。
インストールまたは更新すると、background.mjsはdbmanager.mjsを呼び出してデータベースをセットアップします。それとは別に、background.mjsは、右クリックの拡張機能アイコンメニューに存在するコンテキストメニューエントリを実現します。
インストール時にbackground.mjsから呼び出して、DBが動作するためにローカルストレージJSONをセットアップします。 DB構造の機能を変更したい場合、更新時の移行もここで発生します。
ここでは、データベース値のすべての制限（最小値と最大値）がライブです。
拡張機能はUUID V7を使用します。これは、IDがUNIXタイムスタンプで始まり、乱数で継続することを意味します。これは、データを適切にインポートするために重要です（つまり、一意のデータは実際に一意です）。
このファイルは、データのインポートとエクスポートの方法を支配すると推測しました。これが、この拡張機能がダウンロード許可を使用する理由です。ユーザーは、その機能を設定ページからのみアクセスします。
これらのファイルは、ウィッシュおよびウィッシュリストオブジェクトのCRUD操作を処理するクラスです。
SettingsController.mjsは現在、実際にエクスポートインポート機能（プラスボタンリンク）を呼び出すのに役立ちます。現在、設定はありませんが、それを変更する可能性があります！
ユーザーは、これら2つのファイルを介してmywishlist.htmlと対話します。ここでは、編集、削除、削除、削除、削除、削除、希望、作成のすべてがすべて起こっています。
ポップアップがクリックされた場合、コントローラーはscreaper.mjsを呼び出し、データを使用してスクレーパーがビューを取得し、ポップアップを入力して、ユーザーが保存する写真と追加する情報を決定できるようにします。ユーザーがビューでそのデータを取得し、対応する画像をbase64に変換し、保存するためにコントローラーに返信します。
スクレーパーは、画像を返すためにポップアップが開かれた場所にコードをWebサイトに注入します。私は価格をつかんでみましたが、価格はテキストフィールド（または複数）以上のものではないことが多いことをすぐに知りました。画像はわずかにフィルタリングされて、間違いなく製品画像ではない画像を削除します。 Amazon.DEのWebサイトで問題に遭遇したため、ページ上のすべてのiframeにこれを注入することに決めました。その問題が存在する理由を知っているなら、私の一日を作って教えてください。
このプロジェクト全体を通して、絶え間ないメンターであり、忍耐強い教師であることをKjeld Schmidtに感謝します。あなたのガイダンスがなければ、私はコーディングさえ始めていなかったでしょう。
Huddelに感謝してくれてありがとう。
他のすべての友人、家族、インターネットの見知らぬ人に感謝します。
プログラマーの素晴らしいコミュニティを構築してくれたJason Thor Hallに、そして彼の商品店を私のチュートリアルスクリーンショット素材として使用する許可に感謝します。
