概要
これは初心者のブラウザ拡張機能 Advent Calendar 2024の4日目の記事です。
「ブラウザの拡張機能を使ってあるページの要素を変えたいな」と思ったときにどういう手順で調べて変えたら良いのか、ざっくり流れを書いてみます。
まず知っておいたほうが良いこと
どんな要素も変えられること
Webページは Document Object Model（DOM） というAPIによって操作されます。ブラウザの拡張機能では、このDOMというインターフェイスに接続してWebページを操作するため、たとえば真っ白な画面にしてしまうようなことも可能です。
HTMLはツリー構造になっていること
HTML文書をブラウザが解釈してWebページとして表示するとき、ブラウザはDOMツリーを作ります。
ある要素を変えるときはツリーのどこを変えているのか意識する必要があります。そうでないと想定外の挙動になったり、なにも変化しなかったりします。
DOMをなんとなく知っておくこと
まとめてしまえば「DOMを知ろう！」ということです。
単純にHTMLのタグやタグのオプションを操作するわけではなく、操作するのはDOM（インターフェイス）です。
そのためDOMとはなにで、どういう役割を担っているのか知りましょう。
Mozillaのサイトがわかりやすく正確です。
変えたい要素を調べる方法
ページから要素を選択する
本題に入ります。
「この要素変えたいな」と思ったらまずはブラウザの開発者ツールを開きます。
F12キー、Ctrl+Shift+Iなどで開けます。
開いたら下記画像の赤矢印を選択します。ページから要素を選択する機能です。
これを使うとWebページの特定部分を選択して、その要素が何なのか確認できます。
下記画像はQiitaのいいねボタンを調べているときのものです。
クリックするとインスペクターというタブの該当部分がハイライトされます。
いいねボタンは以下要素であると確認できました。
<button aria-label="いいねする" aria-pressed="false" title="いいねする" disabled="" class="style-10ttvi6"></button>
要素周辺を確認する
次にその要素周辺の構造を調べます。
さきほどの例で言えばbutton要素の上になにがあるか確認する、ということです。
<div>
<div>
<svg>
</div>
<button>
</div>
Qiitaのいいねボタンは上記のようにdivタグが上にあります。またbuttonと同じ階層にもdivがありました。
もっと上位の階層までさかのぼる場合はXPathをコピーします。
右クリックしてコピーからXPathをクリックします。
以下のようにルートから現在の要素までの各要素が取得できます。
/html/body/div[1]/div[3]/div/main/section/div[1]/div[1]/button
要素を変える方法
querySelector
変えたい要素が見つかったらdocument.querySelectorで取得します。
Qiitaのいいねボタンの場合、さきほどのXPathを活用して以下のように取得できます。
const b = document.querySelector("body div div div main section div div button")
もしくはCSSのクラス名からも取得できます。
const b = document.querySelector("button.style-10ttvi6")
querySelectorの構文はタグ名もしくはタグ名.クラス名、クラス名です。これらを組み合わせて目的の要素を特定します。
querySelectorAll
もし変えたい要素が複数ある場合はquerySelectorAllを使います。
たとえばすべてのpタグを取得する場合は以下のようにします。
const ptags = document.querySelectorAll("p")
配列のような形式で取得されるため、それぞれの要素へアクセスするためにForEachを使います
const ptags = document.querySelectorAll("p")
ptags.forEach(ptag => {
// ここで処理
});
styleで要素を変える
querySelectorもしくはquerySelectorAllで要素を取得したら、styleを使って要素を変えます。
たとえば以下はh1タグの背景色を赤色にします。
const h1tags = document.querySelectorAll("h1");
h1tags.forEach(h1tag => {
h1tag.style.backgroundColor = "red";
})
styleを更新する場合はelement.style.hogehoge = hugahugaという形で更新します。