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

#アクセスしたページのh1（見出し）の数をポップアップ上に表示する
前回はアラートに表示させていましたが、今回はポップアップ上に表示させてみます。では、また最初から作りましょう。**example_extension2**フォルダを作成し**manifest.json**ファイルを作成しエディターで開いて下さい。

```json:manifest.json
{

    "name" : "popupH1" ,
    "version" : "1.0" ,
    "description" : "hoge" ,
    "manifest_version" : 2 ,

    "permissions" : [
        "tabs" , "activeTab" , "<all_urls>"
    ] ,

    "browser_action" : {
        "default_popup" : "popupdayo.html"
    }

}
```

**permissions**でchrome.tabs、activeTab、全てのURLに対する権限を許可。
**browser_action**の**default_popup**では、デフォルトのポップアップ表示時に使用するHTMLファイルを指定します。
今は**Manifest V3 ( manifest_version : 2より最新のバージョン )**を使う必要性が無さそうなので、**manifest_version**は2のままで大丈夫です。


次は**popupdayo.html**を作成しましょう。
表示するポップアップの部分です。

```html:popupdayo.html
<!DOCTYPE html>
<html dir="ltr">
    <head>
        <meta charset="utf8" />
    </head>
    <body>
        <div id="url"></div>
        <div id="list"></div>
        <script src="popupdayoScript.js"></script>
    </body>
</html>
```

**id="url"**は現在アクティブなタブのURLを表示するセクションです。

**id="list"**はh1の数と一覧を表示するセクションです。

下の**script**タグはpopupdayoScript.jsを作成し、埋め込みます。今回の主となる部分ですね。
popupdayoScript.jsに、現在閲覧中ページのh1の数等をポップアップ上に表示させるコードを書き込んでいきます。それでは**popupdayoScript.js**を作成しエディタで開いて下さい。

```javascript:popupdayoScript.js
(function(){
    // <div id="url"> の要素を取得
    let url = document.getElementById("url");
    let list = document.getElementById("list");

    //現在アクティブなタブを問い合わせ、タブの配列をコールバック
    chrome.tabs.query( { active : true , currentWindow : true } , (tabArray) => {
        const title = tabArray[0].title;
        const tabUrl = tabArray[0].url;
        const tabId = tabArray[0].id;

        url.innerHTML = `ページURL : ${tabUrl}<br/>ページタイトル ： ${title}<br/>`;

        //タブ上でJavaScriptコードを実行させる
        chrome.tabs.executeScript(tabId , {
            
            code : "(function() { var arr = []; for(let i of document.body.querySelectorAll('h1') ){ arr.push(i.innerText); } return arr; } )();" //即時関数式を用いh1の文字列が格納された配列をリターンする

        } , (any) => { //リターンされたものがコールバックされる
            list.innerHTML = `h1の数 ：　${any[0].length}<br/>`;
            for( let i of any[0] ){
                list.innerHTML += `<br/>${i}`;
            }
        });
    });
})();

```

拡張機能アイコンを押下し、ポップアップが表示された際にこのスクリプトが実行されます。
現在のファイル構成：
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989394/67bc30ab-6d7b-6cee-faa7-425c30e66755.png)
解説的ななにか：
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989394/a00baba1-1d88-2c15-8485-bc9f38660a5b.png)
それでは**chrome://extensions**にアクセスし、作成した拡張機能を導入しテストしてみましょう。
まず右上の**デベロッパーモード**を有効にして、**パッケージ化されていない拡張機能を読み込む**をクリックし、**example_extension2**フォルダを選択してください。

導入が終わったらまたGoogleで**「あ」**とでも検索してみましょう。

![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989394/c79a2a78-3703-e856-3dfd-f93f48d35550.png)
拡張機能のポップアップを表示させてみると...
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/989394/e7b25703-eb17-d043-f622-07b49f561a5c.png)
成功ですね！

#おわり

解説：指定したプロパティの全てのタブ又は、全てのタブを取得する
<strong>chrome.tabs.query(queryInfo: object, callback: function)
</strong>

解説：指定したタブIDのタブにJavaScriptコードを注入する
<strong>chrome.tabs.executeScript(tabId?: number, details: extensionTypes.InjectDetails, callback: function)</strong>

お疲れ様でした( ^^) _旦~~

引用：
https://developer.chrome.com/docs/extensions/reference/
https://developer.chrome.com/docs/extensions/reference/tabs/