こんにちは、TENTO講師の吉川です。
前回の記事でScratch上の全角数字を見つけやすくするツールを紹介させていただきました。
ここはプログラミング教室のブログなので、今回はその中身のプログラムについて書かせていただきます。
ソースコードはGitHubで公開しています。

Chrome拡張機能とは

まずこのツールはChrome拡張機能という仕組みを利用しています。
Chrome拡張機能はChromeやBraveなどのChromiumベースブラウザに標準で備わっている機能で、ユーザが独自に機能の追加や挙動の変更ができます。
そして、Chromeウェブストア上で配布することができます。

Chrome拡張機能の中身

Chrome拡張機能の中身はJSON形式の設定ファイルとJavaScriptプログラムで構成されており、設定ファイルの中でJavaScriptプログラムをどのタイミングで実行するか決めています。
このツールはContent Scriptsという特定のアドレスのサイトを開いたタイミングで実行される仕組みを利用してScratchの編集ページでプログラムを実行しています。

JavaScriptプログラム

実行しているJavaScriptプログラムはMutationObserverという機能を利用してScratchのスクリプトエリアが更新されたことを検知して正規表現で全角数字の検索をしています。
仕組み自体は単純なため、JavaScriptのコードは21行のみです。

拡張機能を作るという選択肢

以上がこのツールの中身です。
Chrome拡張機能の開発に関する情報は比較的多いので、少しのプログラミング経験が有れば作ることができます。
もし「このサイトにこんな機能があればいいのに」と思った時は拡張機能を作るということを検討してみてください。

最後までお付き合いありがとうございました。