【Google Chrome】拡張機能の作成方法を分かりやすく解説してみた Part. 3

アクセスしたページのh1（見出し）の数と内容をアラートで表示する

前回は軽いスクリプトとポップアップを作成した所で終わっていましたね。今回は見出し通りアクセスしたページのh1要素の数と内容をアラート上に出力させてみます。

前の状態のままやってもいいのですが、ごちゃごちゃしちゃうのでexample_extensionフォルダ上のファイルを全て消去しちゃいましょう。

では、もう一度manifest.jsonを一から作りましょう。

manifest.json

{
    "manifest_version" : 2 ,
    "name" : "showh1" ,
    "version" : "1.0"
}

manifest.jsonを作成する上で、必ず書かないと行けないのが上記の三つです。

manifest.json

{
    "manifest_version" : 2 ,
    "name" : "showh1" ,
    "version" : "1.0" ,

    "permissions" : ["activeTab"] ,

    "content_scripts" : [
        {
        "matches" : ["<all_urls>"] ,
        "js" : ["contentScript.js"]
        }
      ]
}

続けて記述してください。
(新) "content_script" // "matches" (パターンマッチ）で指定したURLにアクセスした場合の処理等
(新) "matches" // "＜all_urls＞" 全てのURLを指定する
(新) "js" // "matches"で指定したURLにアクセスした際に実行するJavaScriptスクリプトのファイルを指定したりする

contentScript.jsを指定したので、フォルダ上にcontentScript.jsファイルを作成しエディタで開いて下さい。

それから"matches"のパターンマッチングの例です。UNIXやUNIXライクなOSを使った事がある方は見なくても良いかもしれません。よく分からないという方は目を通して見てください(´・ω・`)
引用（Google Chrome 公式）：
https://developer.chrome.com/docs/extensions/mv2/match_patterns/

/*
httpプロトコル全般のサイトにアクセスした時
例：
http://www.google.com/
http://example.org/foo/bar.html
*/

http://*/* 

/*
httpプロトコル全般で/fooが必ず入っているサイトにアクセスした時
例：
http://example.com/foo/bar.html
http://www.google.com/foo
*/

http://*/foo*

/*
省略
例：
https://www.google.com/foo/baz/bar
https://docs.google.com/foobar
*/

https://*.google.com/foo*bar

/*
そのまんまで全てのサイト対象です
*/

<all_urls>

現在のファイル構成(example_extensionsフォルダ)：

contentScript.jsに下記のコードを入力して下さい。

contentScript.js

(function(){
    const h1 = document.querySelectorAll("h1");
    let h1Text = "";

    for ( let i of h1 ) {
        h1Text += `${i.innerText}\n`;
    }

    alert(`h1の数 : ${h1.length} \n${h1Text}`);
})();

バッククォーテーションの中に${変数}が入っていますがこれはテンプレートリテラルという簡単に変数を文字列中に埋め込める便利な機能です。皆さんも是非使ってみてください（知ってるわ！）
ここまでの仕組みとしては"matches"で指定したURLにアクセスすると、Google Chromeが"js"で指定したcontentScript.jsを実行してくれる感じです。"matches"に＜all_urls＞を指定して"js"にcontentScript.jsを指定したのでどのサイトでもcontentScript.jsが実行されます。

それでは実行してみましょう。
前々回と同じ様に"chrome://extensions"にアクセスして、example_extensionsフォルダを指定してあげてください。

showh1拡張機能の導入が終わったらgoogle.comにアクセスしてみましょう。

h1の数が記載されたアラートが出現しましたね...！
次は「あ」とでも検索してみましょう（）

おぉ～！
更に拡張機能らしくなってくれましたねぇ(´・ω・`)
今日はここで終わります。お疲れ様でした( ^^) _旦~~