概要

さいきん、作業メモにはもっぱら Zenn のスクラップ機能を使っています。
とても書き心地がよくて助かってるんですが、スクラップの量が多くなるほど情報をさかのぼるのが難しくなってしまい、あとで参考にするときに大変だ、と思ったので、 Chrome の拡張機能で補ってみようかと思いました。

プロジェクトの初期化

仕様を決める前に、ひとまずプロジェクトの初期化を行います。
プロジェクト名は zenn_scrap_navigatorにしました。

mkdir zenn_scrap_navigator
cd zenn_scrap_navigator
npm init -y

git init
git add .
git commit -m init

ここからは Google公式のガイドラインに従って準備していきます。
とりあえず VSCode で開いて操作します。

code .

Chrome の拡張機能の設定を記す manifest.json を作成。
とりあえず中身は公式のサンプルを参考に初期化しました。

{
  "manifest_version": 3,
  "name": "Zenn Scrap Navigator",
  "version": "1.0.0",
  "description": "Zenn のスクラップに目次を追加します"
}

一応テスト。
chrome://extensions/にアクセスして、右上の「デベロッパーモード」をオンにします。続いて「パッケージ化されていない拡張機能を読み込む」からさっきのフォルダを選択します。

僕は Windows 上で WSL を使っているので、エクスプローラーのアドレスバーに「\wsl$」と打ち込むことでアクセスしました。

とりあえず、拡張機能の一覧に表示されたのでオッケー。

特定のページでだけ拡張機能を動作させる

今回は Zenn のスクラップページでしか動作させたくないので、https://zenn.dev/{id}/scraps/から始まるリンクが読み込まれたときに動作するようにします。

メインの処理をかくための script/main.js を作成。
中身はとりあえず以下のようにします。

window.alert('Test');

そしたら、manifest.jsonに以下の行を追加。

{
  "manifest_version": 3,
  "name": "Zenn Scrap Navigator",
  "version": "1.0.0",
  "description": "Zenn のスクラップに目次を追加します",
>  "content_scripts": [
>    {
>      "matches": ["https://zenn.dev/*/scraps/*"],
>      "js": ["script/main.js"]
>    }
  ]
}

そしたら拡張機能の画面を開いて、拡張機能を再読み込み。

試しに Zenn のスクラップの記事を開きます。すると...

script/main.jsに書いた処理が実行されました。いいね。