Bookmark File Prettify
2021年5月~6月

Bookmark File Prettify

ブラウザの「ブックマークをエクスポート」で出力されるファイルの見た目を整えるnpmライブラリです。
小規模
TypeScript

概要

ブラウザからエクスポートされたブックマークファイル(NETSCAPE-Bookmark-files)をいい感じの見た目にしてくれます。NPMモジュールなので、ファイルのどこかに

<script src="https://cdn.jsdelivr.net/npm/bookmark-file-prettify/dist/bundle.js"></script>

と書き込むだけで適用できます。詳しくはREADME.mdをご参照ください。

きっかけ

ブラウザを軽くしたい・大量のブックマークを整理したいと思い、ブラウザのブックマークエクスポート機能を使用しました。ブラウザで自動生成されただけのこのファイルは厳密にはHTMLではありませんが、ブラウザで開くことができます。ただ以下のように表示されるため非常に見づらく、改善しようと思ったのがきっかけで開発しました。

自動生成されたブックマークファイル

自分のブラウザのブックマークを一旦スナップショットとして保存したいときに使えるかと思います。過去にブックマークしていたサイトをあとから探したいときなんかに有用なはずです。ソーシャルブックマークサービスとは趣旨が違うので、とてもニッチな需要がどこかにあるとは思うのですが…

特徴

フォルダの階層表示

そのままではネストされたフォルダは正しく表示されません。(階層があたかもないような見え方になる) Bookmark File Prettifyはフォルダの階層構造を正しく認識し、適切にインデントして表示させるようにします。またフォルダの折りたたみもできるようになっています。

ファビコンの表示

自動生成されたブックマークファイルには、実はファビコン情報が含まれています。Bookmark File Prettifyはbase64エンコードされたその情報を読み取り、サイト名の頭に表示させます。

ブックマークした日付の表示

ファビコン情報に加え、ブックマークに追加した日付もファイルには含まれています。UNIX時間形式のその情報を変換し、サイト名の末尾に表示させています。「あ、この時期にこんなサイトにハマっていたなあ」なんて思い返すこともできます。