- 開発するきっかけ
- 開発初期は最近のブックマーク表示のみ
- 開発二段階めにファビコンも表示
- 開発三段階めはツールチップでURL
- 開発四段階めはダークモードにも対応など
- 開発五段階めはブックマークバーとの重複をさける
- Chrome Extensionsの開発のすすめ
最近になってChroem ExtensionsのBookmarks APIを知ってからの開発のまとめです。
開発するきっかけ
メモ的にテック系記事を拝見することが多く、調べる過程ではモバイル端末がメインです。モバイルで隙間時間にささっと調べて見当をつけてから、デスクトップに移ってコードを書く、というようなサイクルが自分のスタイルです。
このような時に、モバイルでブックマークにした記事を再度、デスクトップから拝見する際に、ブックマークのリストを下段付近までプルダウンを操作するのが、けっこう不便に感じていましたので、この課題をなんとかしたくて開発を始めました。
Bookmarks APIをちょうど知れたことも大きい理由です。
開発初期は最近のブックマーク表示のみ
この時は、ほぼサンプルコードそのままのような感じで、getRecent()で取得した値をDOMを利用して表示するのみでした。
この状態ですとサイト毎にあるfaviconもなく、代わりにlist-style-typeにて既定の絵文字アイコンを表示するに留まっていました。
開発二段階めにファビコンも表示
本家のブックマークのようにfaviconが表示されたほうが、どのサイトのブックマークなのかがわかりやすいので、なんとかfaviconも表示したいと思って開発を続けたのが二段階めです。
faviconを取得するプロパティなどはBookmarks APIにはなく、別の手段が必要でしたが、調べれば当然のごとく方法が存在するわけで、サンプルコードもあり、思うような結果が得られました。
ここでもDOMを駆使するわけで、工数が多く感じられ苦労しましたが、いったん表示さえできれば、あとはcssでなんとか美しく並べるだけなので、そこの作業は容易なのでfavicon設置完了です。
開発三段階めはツールチップでURL
本家ブックマークにおいては、マウスオーバーでurlがツールチップで表示されます。ブックマークがタイトルのみですと、同じタイトルが並んだ場合、どちらが表示したいサイトへのブックマークなのかが瞬時に判断できません。
これは自分の開発サイトで、タイトルが同じ正規urlと仮urlを区別できない場合があり、ツールチップのurlが必要だと感じたことから対応することにしました。
すでにurlは取得ずみでありますので、あとはツールチップとして表示するだけですが、時にはかなり長いurlが存在し、設定したwidthをはみだしてしまいurlが見切れてしまうところまでが三段階めです。
開発四段階めはダークモードにも対応など
ツールチップのurlがはみだすことに気づいて改善したのが四段階めです。 当初はtextContent仕様で、一定文字数で改行を入れるのにあれれ？となりましたが、innerHTMLの採用で解決です。
本家ブックマークは本体ブラウザにあわせてダークモードにも対応しているわけで、拡張機能の部分だけがライトモード固定ではどうもしっくりこないので、ダークモードも採用だ！とがんばったのもこの段階です。
ダークモードへの対応は、cssであっさりとかんたんにできました。
開発五段階めはブックマークバーとの重複をさける
いまのところここが終点です。 自分のこの拡張機能の使い方が、最近のブックマーク集というよりも、最近のブックマークへのショートカット、要はプルダウンを深掘りしなくてよいようにすることなので、ブックマークバーに直接保存したブックマークは、ブックマークバーにあれば、深掘りする必要もなく、この拡張機能に表示されなくてもいいわけです。
それで、ブックマークバーにあるブックマークは含めない仕様に改善しました。 ここまでコードをあれこれ書き直してきたにもかかわらず、理解がとぼしく、どこで除外すれば適当なのか迷いました。
最初はそもそものgetRecent()で取得した配列ライクなオブジェクトの時点で、ブックマークバーのID、parentId: "1"となる要素を除外しようと試みましたが、このgetRecent()で取得する値はどうやら変更不可のようで、少しばかし時間を溶かしてしまいましたが、DOMの更新を一度にするためのcreateDocumentFragment()に加工したhtmlをいったん追加する段階で、parentId: "1"に該当するブックマークを除外することができました。ふー！
Chrome Extensionsの開発のすすめ
もし今、JavaScriptを学習中であれば、ブラウザ拡張機能、Chroem Extensionsの開発をおすすめします。
サンプルコードも豊富に用意されていますし、動作確認も自分のブラウザですぐに確認できます。
特にポップアップ仕様の拡張機能の場合、ポップアップされるのはhtmlなので、DEVツールも活用でき、JavaScript、html、cssと同時に学習機会が得られます。
bookmarksだけでなく、alarmsやdesktopCaptureなどもあり、簡単な機能から段階を経て開発を続けられるのではと思います。
すでに腕に自信のある方は、AIを利用した拡張機能のサンプルもあるようなので、トライしてみてください。
ど素人がおすすめなんてして🙇すいません。。。
