最近、「過去を振り返り、新しいことを学ぶ」Chrome プラグインをアップグレードしました。今、自分のJourney_html/css

春節休暇も終わりに近づき、昨年の悔しさを埋める時間をようやく見つけました。 2.2.0から2.2.6までバージョンを重ね、ついに新バージョンが完成しました。

昨年の中頃、私はブックマークバーを整理しやすくするために Chrome アプリを開発しました。アイデアは非常にシンプルで、空いた時間を使ってブックマークバーを確認し、不要になったブックマークバーを削除するだけです。結局のところ、ブックマークバーを整理するのに一人で時間を費やすのは非常に疲れる作業ですが、この作業を断片的な時間に分割して完了するのは非常に楽しいです。

このアイデアは実際には 4 年前に思いついたものですが、私は決して実行しませんでした。ブックマークバーを緊急に整理する必要があるときは、このアイデアを思いつきます。昨年の7月頃からようやく工事が始まりました。

しかし、開発の進捗はあまりスムーズではありません。結局のところ、私はプロのフロントエンドではなく、私の英語レベルは平均的です。Chrome のドキュメントを読むには多大なエネルギーが必要です。まず、Chrome ドキュメントページ全体の構造を整理しました。 Chrome で開発されたドキュメントが非常に整理されていないことに本当に文句を言いたいのですが、API インターフェイスのリストが 3 つのレベルのディレクトリに配置されているため、API インターフェイスを探すたびに長い間それを調べなければなりません。主な理由は、第 1 レベルのメニューを見つけるのに時間がかかるためです。

慣れたら慣れました。。。

当初の計画では、新しいタブを開くたびにリマインダーデータがブックマークバーからランダムに取得され、Chrome の通知インターフェイスを使用してブックマークとアドレスが表示され、開くボタンと削除ボタンが提供されます。 (オリジナルのアイデア、プロトタイプ)

しかし、開発プロセス中に私が発見した最初の問題は、ブックマークをランダムに取得することが私が考えていたものではないということでした。当初の計画では、拡張機能のインストール時に一度に HTML5 のローカルストレージにブックマークが自動的に読み込まれ、その後ローカルストレージからランダムにブックマークが取得される予定でした。ただし、いくつかの点が関係します:

1、使用何种本地存储能方便的检索数据？2、用户变动书签信息（增加、删除）的时候，还需要同步到本地存储中。

ログイン後にコピー

将来的に Firefox や Safari に移行する可能性を考慮して、ローカルストレージを選択する際には、データの取得を考慮することに加えて、互換性リストも参照しました。結局のところ、あまり先のことは考えずにChrome版を完成させてから話した方が良いのではないかと感じました。そこで私は IndexedDB を選択しました。

それでは、問題はそれをどうやってランダムにするかということです。この問題について考えたときに、最初に思いついたのは、ローカルストレージ内のブックマークリストのインデックス範囲を取得し、このインデックス範囲からランダムに番号を選択するメソッドを作成することでした。しかし、後でこれはあまり適切ではないと感じました。ランダム性があまり良くない場合、いくつかのブックマークがランダムに到達する可能性が高いため、効果が理想的ではなかったり、特定のブックマークがランダムに複数に到達したりする可能性があります。連続して何度も使用すると、ユーザーエクスペリエンスも悪くなります。

それでは、訪問数のフィールドを追加して、このフィールドを乱数の計算に含めることはできますか?可能ですが、プログラムが複雑すぎるようで、最終的な効果が満足できるかどうかはわかりません。最終的にブックマークをランダムに抽出する計画をあきらめ、ブックマークを順次抽出することに変更しました。実験の結果、この解決策が少なくとも私にとっては満足できるものであることが証明されました。

もう 1 つは、ブックマークのリスニングインターフェイスを見つけることです。ユーザーがブックマークを操作すると、データがローカルストレージに同期されます。ただし、効果をできるだけ早く確認するために、データの同期は省略され、ブックマークを取得するために新しいタブが開かれるたびに、ブックマークリスト全体が読み取られてからインデックスが読み取られます。そして、このアクセスのインデックス値はローカルストレージに保存されます。

最初のバージョンはほとんどしぶしぶリリースされました。

オンラインになった後も、多くの人がインストールしに来てくれていることに気づきました。初期のユーザーには本当に感謝しています。しかし、具体的な運用データはないようです。そこでGoogle Analyticsを改めて勉強し、拡張機能に操作イベントの記録を追加して、現在何人が利用しているのか、リマインドされたブックマークの数、削除されたブックマークの数を見てみましょう。私の拡張子の価値を順番に判断します。

その後、一部のユーザーがフィードバックをし始めました。フィードバックに関する主な問題は、ポップアップボックスとリマインダー機能がないことです。

ポップアップボックスに関する最初の問題は、主にさまざまなオペレーティングシステムの通知の違いによって発生します。 Win では通知は右下隅にポップアップ表示されますが、Mac と Linux では右上隅に通知が表示されます。私の開発環境はMacなので、最初に右上に出てきたときは大丈夫だと思ってあまり気にしていませんでした。その後、Win ユーザーからリマインダーを右下隅から右上隅に移動できないか尋ねられ、私はこの問題を発見しました。

ポップアップボックスの 2 番目の問題は、タブを閉じるときに、右上隅がポップアップしてタブの閉じるボタンをブロックしてしまうことがあることです。まず通知を閉じる必要があります。クリックしてタブを閉じるのは非常に不便です。

ポップアップボックスの 3 番目の問題は、Chrome を特定のバージョンにアップグレードした後、通知が自動的に閉じなくなり、手動でしか閉じることができないことです。

ポップアップボックスに関する 4 つ目の問題は、Chrome の通知では現在、「タブを開く」ボタンと「削除」ボタンが 2 つまでしか追加できないということです。「これ以上リマインダーを追加しない」というボタンは追加できません。ボタン。。

「今後通知しない」機能については、一部のブックマークを「再度通知しない」に設定できるようにしてほしいというユーザーからの提案です。

私は常にユーザーから提起されたこれらの問題に対処したいと考えていましたが、結局、今年の後半まで延期しました。

2019 年以降の最初のバージョン v2.2.0 では、ローカルストレージ部分が再構築され、ブックマークが localStorage に保存され、ユーザーがブックマークを変更すると、自動的に localStorage に同期されるため、データが取得されるたびに、 localStorage からbookmark_idを取得し、APIを呼び出して詳細情報を取得します。これにより、将来の Firefox や Safari への移行も容易になります。

v2.2.0 – v2.2.2 も通知インターフェースを廃止し、ブックマークのタイトルと URL を表示できる iframe プレビュー機能を備えた HTML ページを自分で作成し、「新しいタブ」ページに置き換えました。「開く」、「削除」、「再度通知しない」などのボタン。

リリース後、数人のユーザーが新しいタブページを置き換えることが可能かどうかを報告しました。実際、最初は置き換えたくなかったのですが、残念ながら chrome ではセキュリティ上の理由から、chrome://newtab/ に js コードを挿入することは許可されていないため、そうする必要がありました。

でも、よく考えたら「新しいタブページ」でリマインドする必要はないような気がします。そこで私たちは、通常の Web ページにエラスティックレイヤーを配置するミニモードの開発を開始しました。これは、現在の v2.2.6 バージョンで誰もが目にするものです。

この時点で、この拡張機能は基本的に完了するはずです。短期的には機能の追加や変更は必要ないと予想されます。

要約すると、拡張機能の開発は基本的に従来のソフトウェアの開発と同じであり、従来のプロセスに従う必要があります。私は自分で PHP Web サイトを作成することに慣れています。問題が発生した場合は、いつでも変更してオンラインにアクセスできます。現在この拡張機能にはバグがあり、ユーザーが新しいバージョンにアップグレードするまでに少なくとも 60 分かかるでしょう。私が開発していたとき、あるバージョンはリリース前に非常によくテストされていましたが、クリックしてストアにリリースした後、数回使用すると新たな問題が発見され、やむを得ずこの問題に遭遇することがよくありました。さらにバージョン番号を追加するには、リリース用にバグ修正されたバージョンを再アップロードします。

さらに、ユーザーとのコミュニケーションや交流を強化する必要があると今私は感じています。第二に、交換後、ユーザーのフィードバックのどれを採用し、どれを破棄すべきかは、依然として私を困惑させる問題です。これについてはさらに検討が必要です。

最後に、拡張アドレスとフィードバックアドレスを添付します:

http://bm.to0l.cn/

https://gitter.im/ety001/bookmark-extension