ScrapBubbleの開発動機

背景

ScrapScriptsという拡張機能の存在

リンク先や関連ページリストをリンクの直ぐ側にhoverしてくれる

ページをスクロールしなくてもリンク先の情報を得られる

リンクをクリックする必要もない

クリックすると今見ているページが消えてしまう

hoverなら(多少かぶるが)今見ているページとリンク先ページとを同時に見られる

とても便利に使っていたが、不満もあった

表示したリンク先テキストを選択できない

吹き出しをクリックすると消えるという仕様だった

選択しようとクリックしたとたんに消えてしまう

記法のパースが不完全

XSS対策されておらず、コードブロックに書いたHTMLがそのまま読み込まれてしまうなどの致命的なバグがあった

関連ページリストのリンク先ページを表示できない

関連ページに表示されたリンクの中身をみたいということがよくあったのだが、見れないのでいちいちクリックする必要があった

「リンク先の参考文献リストにあるリンクをクリック」などするのに手間がかかった

不満を解消するために、コードを改造することにした

実装

まだ当時は拡張機能もUserScriptもあまり良くわかっていなかった

ScrapScriptsの元コードを特定するところから始めた

どこにminify前のコードがあるのかもわかっていなかった

なんとかコードを見つけた後、JQueryを書き換えるしたりTypeScriptに書き換えたりしてみた

TypeScript化は途中で断念したが

UserScriptに貼り付けたところ、そのまま動かせた

/daiiz/関連ページを吹き出し表示するにUserScript版のscrapbox-card-bubbleがあったので、拡張機能にしなくとも動かせるということは予想していた

この頃からScrapbox上で開発するようになった

それから何やかんやあって(説明が雑)、ScrapBubbleができあがってきた