Chromeの拡張機能からコンソールで使える便利関数を突っ込む

はじめに

私は最近、Chromeの操作の半自動化をしたいということで、Chrome拡張機能に手を出しました。
その中で、自動化の内容をページによって逐一設定したいというものだったということで、調査に使える便利関数が欲しいということになりました。
しかし、若干Chrome拡張機能の仕様周りの知識がないと躓きそうな点があったので、それについて書いていこうと思います。

そもそも拡張機能を作るには

これについては色々と入門用資料があるので割愛します。
参考として、私が実際に作る上で頼りにしたページを載せておきます。

便利関数を導入する時ハマった点

まず私は、読み込ませるスクリプト内に関数等の定義をしていれば、それがそのままコンソールでも使えると思っていました。
しかし、実際のところ、それでは関数が未定義だとしてエラーになりました。
調べてみたところ、拡張機能のスクリプトとコンソールとで名前空間が異なっているとの情報がありました。

実際どうしたか

コンソール内で扱えるように関数を定義すれば、この問題は解決されます。
その手段の一つとして、開いているページ内に関数定義があることにする、というものが使えます。

set.js

const checkNum = (query) => 'count: ' + document.querySelectorAll(query).length;

let elem = document.createElement('script');
elem.innerText = `
const cn = ${checkNum.toString()};
`;
document.body.appendChild(elem);

拡張機能のmanifest.json内にこれを読み込ませるように記述すると、拡張機能を動作させる対象のページで、コンソールを開きcn(【CSSセレクタ】)を実行すると、該当CSSセレクタの要素の数が出力されます。

最後に

なんかもう少し、HTMLを改変しないような綺麗な方法がありそうですが、今のところそこには辿り着けていない状況です。
その綺麗な方法や、その他記事に対して思うことがあるということがあれば、コメント等宜しくお願いします！