LoginSignup
0
1

ソースコードをどこまで読んだか記録するchrome extension作ってきた

Posted at

はじめに

初めましての方は初めまして
土佐犬と申します

いきなりですが皆様ソースコードを読まれると思うのですが、
どこまで読んだか覚えていない
そういうことがありますね、ないわけないです、あります

今回はそれをどうにかこうにかしたいchrome extensionを作ってきたのでそのご紹介です

作ったもの

今回作ったchrome extensionはreading saverです
読んでそのまま、読んだ部分を保持するchrome extensionです

version 0.1のダウンロードはこちら

どのような機能があるかという点に関して

  1. 特定のページにおいてどこまで読んだかを記録できる
  2. 読んだ位置までスクロールできる
  3. 記録するページを限定できる

といったものになっております

特定のページにおいてどこまで読んだかを記録できる

まずこれがこのchrome extensionの1番の醍醐味です
496214689064157249.gif

右下にどこまで読んだかのインジケーターが出てきます

読んだ位置までスクロールできる

ソースコードの特定の場所まで読んでから、あれそういえばここどういう関数だったっけって戻ること、あります。
見に戻った後にどこまで読んだっけってなりますよね
そういう時にインジケーターを押せば読んでる最新位置までスクロール位置を飛ばすことができます

画面収録-2024-02-22-19.43.22.gif

記録するページを限定できる

必要ないページまで読んだ位置を記録するのもなぁということで特定の文字列から始まるurlのみを観測することができます
例としてhttpsから始まるurlのページのみ記録する場合がこちらになります(今の時代どのサイトもhttpsから始まるやろ)
スクリーンショット 2024-02-22 19.45.42.png

終わりに

という感じでほんとに紹介程度の記事になります
初めてchrome extension作ったのですが割と詰まるところもありつつ楽しく作ることができました。
これでソースコードを読むのに困りませんね

今後の展望としてはとりあえず記録するページのUIを綺麗にしたり、あとは正規表現の対応などをしていけたらなーって思ってます(現状startwithでチェックしているため)
あ、あとはページ内の他のリンクでどこまで読んでるかの表示とかしたいですね
ほんとは対応したかったんですけどaタグでurl見てstorageから引っ張ってくるみたいなことしたかったんですよ
だけどgithubのソースコードのファイルボタンの部分ってあれaタグでもないんでgithubの場合とかで場合分けとかが必要そうだな〜って感じだったんで今回は見送りにしました

では、また次の記事で

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1