webブラウザを自分で作れたら面白そうと思って調べてみると、数百万行のコードから成り立っていると知って作るのは無理だとあきらめた。
じゃあwebブラウザの機能の一部を作れたりいじれたりしたら面白そうだし便利な気がするから拡張機能を作ってみようと思った。
前にも拡張機能を作ってみようと思ったけれど、なんかよくわからなくて挫折した。
だから今回は作れなくてもいいから少しだけ挑戦してみて、その過程を残しておこうと思った。
開きやすいように拡張機能の画面のURLを張っておく。



まずはこのサイトを読んで拡張機能の作り方を学ぶ。
簡単なサンプルとしてスプレッドシートを開いたときにボタンを表示させ、そのボタンを押すと編集モードとプレビューモードを切り替えられるようになった。

ずっと＄が定義されていないっていうエラーが出てて、jqueryのバージョンを3.7.1から3.6.0にしたりしたけど消えなかった。
それで実際に動かしてみるとボタンは表示されたけどクリックしても反応しなかった。
chatGPTに添削してもらったらhrefがfrefになってて、それを直したら動くようになった。
けどこのエラーは消えなかったからよくわかんない。

でも1つ拡張機能をコードを写経しただけだけど作れたからよかった。



次はこれ

会話形式でわかりやすそう。
このサイトでポップアップとアイコンを作ることができた。



広告ブロックの拡張機能はこのサイトで作れそう？

これも。
jsの勉強しないと。

そしてこれ！
このサイトのFileReaderのAPIを理解することができれば何かつかめそうな気がします。
ずっとブラウザがメモリ上で扱っているデータに触れたかったんですよね。
ファイルにされないそのデータがメモリ上でどんな風に扱われているのか知りたかったのでこの部分について勉強してみます！たぶん！

blobっていうのがbinary large objectっていうバイナリデータみたいなのでこれを扱えるようになりたい。



そしてこの3つのサイトを真似してみようと思ったら全然わからなかった。。
むずすぎ。。
もっと簡単なのやろ。

もっと基礎的なところ、
https://yuki.world/how-to-develop-chrome-extension-basics/
これを読んだり、公式ドキュメントも読んでみようかな。
https://developer.chrome.com/docs/extensions/mv3/


公式ドキュメント

公式ドキュメントなんかすごい丁寧に体系的にまとまってる感じがする！

まずこれを読んだ。拡張機能の概要が書いてあった。

次はこれ。これにちゃんと拡張機能のサンプルの作り方が書いてあった！
公式ドキュメントがわかりやすい！！
ずっと公式ドキュメントって堅苦しく書いてあって分かりにくいと思ってて、ググって個人ブログ読んだ方がわかりやすいと思ってたけど意外とそんなことなかったかも。
途中、Ta-da！とか書いてあって何がタダなんだ！？って思ったら、日本語で言うじゃじゃーん！の意味だったのね！
楽しくなってきた。
chrome-typesっていうnpmパッケージを使うと便利だよって書いてあった。
そもそもnpmってなんだ？
調べたらnode.js関係らしい。全然わからん。
とりあえず今は使わないでいいや。
最後に3つのチュートリアルがあった。
Reading Time, Focus Mode, Tabs Manager
この３つの拡張機能のサンプルを作ってみる。

サイトの文字数を求めてそのサイトが何分で読めるか表示する拡張機能。

js全然知らなかったからバッククォート(`)で少し躓いた。
""や''じゃなくて``じゃないと変数が埋め込めないのね。
コードを読むといろいろ知らないことが出てきた。

・バッククォート(`)で囲んだ文字列をテンプレートリテラルといい、変数を埋め込める。
・正規表現は文字を集合で表す。参考：サルにもわかる正規表現入門
今回の/[^\s]+/gはスペース以外の文字が１回以上連続したものをすべて一致させるらしい。
・[...words]でwordsというイテレータを配列に直している。イテレータもちゃんと理解してないかも。ここでは配列に直してその配列の要素数をlengthで求めている。
・querySelector("time")?.parentNode; の?.はオプショナルチェーンという演算子で、値がnullかundefinedの場合にエラーとせず、undefinedを返すようにする。
・null合体演算子(??)は左辺がnullまたはundefinedの場合に右辺を返し、それ以外は左辺を返す。

他にもquerySelectorとかも初めて見た。js全然知らないや。
とりあえず実装して
Ta-da! ちゃんと表示された！
200字1分計算らしい。
いろいろ勉強になった！！

これはアイコンをクリックまたはショートカットキーを押すと、サイト内の余計な要素を取り除く機能。
とりあえず写経した。
ReadingTimeを作った拡張機能を書き換える感じで書いたらエラーが出た。
アイコンをクリックしてもポップアップ(Development Basicsのときの)は表示されるのにONにはならなかったため、ポップアップをオフにしたらONになるようになった。
たぶんactionの"default_popup"とchrome.action.onClicked.addListenerが競合していた？
けれどONになってもページに変化がなかったためchatGPTにコードを添削してもらったら「｝」の位置が間違っていることが分かった。
それを直したらうまく実行できた！

けれどまだ写経しただけのためコードを全然理解できていない。
わからないところを書きだしていく。
background.js
・asyncは非同期関数の宣言で、非同期関数を使う前にはawaitと書く。
・"A"?"B":"C"　AならB、AでなければC。三項演算子
・厳密等価演算子(===)は型も値も同じか比較する。等価演算子(==)は型が異なっていても値が同じならtrueとなる。例えば1=='1'はtrue、1==='1'はfalseとなる。

他にもわからないことは多かった。例えばCSSセレクタはカンマで複数指定できたり、tabやtabId, tab.idとかいろいろあるがこれから実際に使うときにその都度覚えていきたいと思う。

とりあえずCSSをいじる拡張機能を作ることができた。
なんか完璧に一つ一つを理解しようとすると疲れてモチベーションがなくなってしまう。
どうせ完璧に理解することなんてできないから、写経してわからないところを数個ピックアップしてメモするを繰り返す感じで進めてみよう。







そして写経して動くようにはなったが、ただ同じコードを打つのがつまらなくて飽きてしまった…
自分で考えて書けるようになりたいが、そのためには基礎的なことを学ばなければいけないけど面倒くさくて結局諦めてしまった。
あとやりたいことが特にないというか、一応あったけれどc言語で作ったものをjsに書き直すのが面倒くさかったのと、すでにできるならわざわざ作り直す必要もないというモチベーションの維持ができなかったのもある。。

だがしかし！
2か月後、ついに時間とやる気と目的ができて、初めての拡張機能を作り上げるのであった…