概要
Chromeの拡張機能で特定のページに役立つ画像を好きなレイアウトで表示する方法をご紹介します．
きっかけ
私は，Debate Structure Visualizerという競技ディベートの反論のグラフ構造の可視化と試合動画の探索を掛け合わせたサービスを運用しています（今んところ来訪者数＝実験参加者数ですが運用は運用ですよね...?）．
そんな中で，最近，Debate motionsという大会や各ラウンドのモーション（論題），YouTube動画のリンクに，生成AIが考えた論点や主張など，ディベートに役立つ情報をふんだんにまとめたライバル（勝手に自分がそう思ってるだけ）を見つけました．
これらのサービスを組み合わせたら面白いのでは？と思い，Chrome拡張機能として合体させるようと考えました！
.....この話に共感できる人いないよな....競技ディベート広まれ....
この記事が役立つ人
ディベートなんて知らないよ！って人もまだブラウザバックしないでください！要はこの記事，Chrome拡張機能で画像を表示させてみたってだけの話なので...! Web開発なら知ってるけど，拡張機能作るの面倒...と思ってるあなたにも役立つはずです...!
ただ，Chrome拡張機能開発の基礎中の基礎はとほほ様の記事がすごく分かりやすいので，0から始めたい方は是非こちらをご参照ください．この記事はあくまで，「ローカルに保存した画像はどう表示すればいいの？」って方向けです．
前置き長くなりましたが本題
Chrome拡張機能はmanifest.json(設定ファイル)+jsで作れます．Reactとか使ってみようかな？とかも考えたのですが，とりあえずバニラで，まずは肌感覚掴んでみるかの精神で．
今回，使用する画像(反論グラフのスクショ)は拡張機能内に入れています．このローカルに画像があるパターンでは，普通のweb開発と同じように<img src={"https:/~~"}>とか，<img src={images/test.png}>とかって書くだけでは表示できません．インターネット経由だとほぼweb開発と同じノリなんですけどね．
ポイントはふたつあります．
１．manifest.jsonで許可すべし
２．chrome.runtime.getURLを使うべし
それぞれ見ていきましょう．
前提：ディレクトリ構造
.
├── content.js
├── images
│ ├── debate-graph-001.png
│ ├── debate-graph-002.png
| ├── debate-graph-003.png
│ └── ...
├── manifest.json
└── popup.html //全く使っていません
manifest.jsonで許可すべし
このもとで，まず公式リファレンスを見ながら，表示を許可する画像を画像を指定します．今回はimagesディレクトリ直下にすべての画像ファイルを置く想定です．
"web_accessible_resources": [
{
"resources": ["images/*"],
"matches": [ "<all_urls>" ]
}
]
これがstep1です．なお，2024年11月24日現在，manifest_versionは3にしないとChromeが怒っちゃうので，3に設定している前提で説明します．
chrome.runtime.getURLを使うべし
const graphContainer = document.createElement("div");
document.body.appendChild(graphContainer);
const imageUrls = [
"images/debate-graph-001.png",
"images/debate-graph-002.png",
"images/debate-graph-003.png",
...
]
imageUrls.forEach((url) => {
const img = document.createElement("img");
img.src = chrome.runtime.getURL(url); // https://~では使えないので注意
img.style.○○ = ××; // スタイリング系
...
graphContainer.appendChild(img);
}
このように，imageUrlを直接指定するのではなく，chrome.runtime.getURLを使ってsrcを指定しましょう．
おわりに
かなりかいつまんで説明しましたので，気になる点があったらぜひ冒頭のGitHubリポジトリを参照してください！