#アクセスしたページのh1（見出し）の数をポップアップ上に表示する
前回はアラートに表示させていましたが、今回はポップアップ上に表示させてみます。では、また最初から作りましょう。example_extension2フォルダを作成し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を作成しましょう。
表示するポップアップの部分です。
<!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を作成しエディタで開いて下さい。
(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}`;
}
});
});
})();
拡張機能アイコンを押下し、ポップアップが表示された際にこのスクリプトが実行されます。
現在のファイル構成：
解説的ななにか：
それではchrome://extensionsにアクセスし、作成した拡張機能を導入しテストしてみましょう。
まず右上のデベロッパーモードを有効にして、パッケージ化されていない拡張機能を読み込むをクリックし、example_extension2フォルダを選択してください。
導入が終わったらまたGoogleで**「あ」**とでも検索してみましょう。
拡張機能のポップアップを表示させてみると...
成功ですね！
#おわり
解説：指定したプロパティの全てのタブ又は、全てのタブを取得する
chrome.tabs.query(queryInfo: object, callback: function)
解説：指定したタブIDのタブにJavaScriptコードを注入する
chrome.tabs.executeScript(tabId?: number, details: extensionTypes.InjectDetails, callback: function)
お疲れ様でした( ^^) _旦~~
引用：
https://developer.chrome.com/docs/extensions/reference/
https://developer.chrome.com/docs/extensions/reference/tabs/