概要

「ブラウザの拡張機能を使ってあるページの要素を変えたいな」と思ったときにどういう手順で調べて変えたら良いのか、ざっくり流れを書いてみます。

まず知っておいたほうが良いこと

Webページは Document Object Model（DOM） というAPIによって操作されます。ブラウザの拡張機能では、このDOMというインターフェイスに接続してWebページを操作するため、たとえば真っ白な画面にしてしまうようなことも可能です。

HTML文書をブラウザが解釈してWebページとして表示するとき、ブラウザは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

変えたい要素が見つかったら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を使います。
たとえばすべてのpタグを取得する場合は以下のようにします。

const ptags = document.querySelectorAll("p")

配列のような形式で取得されるため、それぞれの要素へアクセスするためにForEachを使います

const ptags = document.querySelectorAll("p")
ptags.forEach(ptag => {
    // ここで処理
});

querySelectorもしくはquerySelectorAllで要素を取得したら、styleを使って要素を変えます。

たとえば以下はh1タグの背景色を赤色にします。

const h1tags = document.querySelectorAll("h1");
h1tags.forEach(h1tag => {
    h1tag.style.backgroundColor = "red";
})

styleを更新する場合はelement.style.hogehoge = hugahugaという形で更新します。