【Chrome extension】拡張機能を開発してみよう vol.3 - ブラウザで開いているタブ情報を取得する（ChromeAPI） -
前回はHTMLを表示するシンプルな拡張機能を作りました。
拡張機能特有のmanifest.jsonが作成できれば、後はHTMLの知識があれば大丈夫でしたね。
今回は拡張機能の醍醐味であるChromeAPIを使ってみたいと思います。
JavaScriptと似たようなスクリプト記述で使えるのですが、拡張機能じゃないとこのChromeAPIは使えないのですね。（通常のJavaScriptで実行できない）
ChromeAPIのリファレンス
ChromeAPIで何ができるかは、このページに全て載っています。
今回やること
ブラウザで開いているタブ情報を取得して、HTMLに表示する拡張機能を作ってみたいと思います。
↓開いているタブのURLを取得して表示
では、manifest.jsonとHTMLの中身を見ていきましょう。
使うメソッド（chrome.tabs.query）
タブ情報の取得はchrome.tabs.query()というメソッドで実現できます。
リファレンスページはこちらhttps://developer.chrome.com/extensions/tabs#method-query
まずは「なるほど、こいつを使うのか・・・」とだけ、認識してください。
manifest.json（permissionsを追記する）
manifest.jsonですが、前回までの内容にpermissionsを追記する必要があります。
実はChromeAPIの一部メソッドはpermission=権限を与えないと使えません。
先ほど紹介したリファレンスページの上部を見ると、「URLやタイトルを取得したい場合は"tabs"のpermissionを入れてね」と記載してあります。
今回はURLやタイトルを取得したいので、permissionにtabsを追記する必要があるのですね。
↓実際のコードはこちらです。末尾にpermissionsを追記しています。
{
"manifest_version":2,
"name":"tabs info",
"version":"1.0",
"browser_action":{
"default_icon":{
"16":"icon16.png"
},
"default_popup":"popup.html"
},
"permissions":[
"tabs"
]
}HTML（タブ情報を取得して、HTMLに表示する）
HTML内に<script>記載しても良いのですが、
分かりづらくなるのでJavaScriptはpupup.jsを読み込んで動かしたいと思います。
■HTML：取得結果を表示するtextareaを用意しておく
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>extension</title>
<style>
#results{
height: 70px;
width: 300px;
font-size: 12px;
}
</style>
</head>
<body>
<textarea id="results"></textarea> //ここに拡張機能で結果を表示
<script src="popup.js"></script> //jsファイルを読み込んでスクリプトを動かす
</body>
</html>■popup.js：タブ情報を取得して、HTMLに表示する
'use strict'; //決まり文句（エラーチェックをしてくれる）
//結果を表示する領域を取得
var results = document.getElementById("results");
//結果を格納する配列を宣言
var array = [];
//★ブラウザのタブを取得
chrome.tabs.query({lastFocusedWindow: true},function(tabs){
//取得したタブ数分を繰り返し
for(var i=0; i<tabs.length; i++){
var output = tabs[i].url; //urlを取得
array.push(output);
}
results.value = array.join("\n"); //arrayの要素を改行で区切ってresultsに表示
results.select(); //resultsを選択状態に
});chrome.tabs.query()の補足
popup.jsのchrome.tabs.query()文を補足したいと思います。
chrome.tabs.query({lastFocusedWindow: true},function(tabs){
第一引数にはブラウザ内のどのタブ情報を取得するかという条件を入れています。今回はlastFocusedWindow: trueなので、最後のフォーカスされたウィンドウのタブのみが対象になります。（複数ウィンドウを開いていても、拡張機能をクリックしたウィンドウ内のタブ情報のみが取得される）
第二引数はfunction(tabs)となっていますが、tabsの中に取得したタブ情報が配列として入っています。
for(var i=0; i<tabs.length; i++){
var url = tabs[i].url;
なので、tabs.length分繰り返し、tabs[i]でそれぞれのURLが取得できるのですね。
例文は.urlでURLの取得をしましたが、.titleでタイトルを、.statusでロード状況の取得などが出来ます。
どんなデータが取得できるかは、もちろんリファレンスにも書いてありますが、
var output = JSON.stringify(tabs[i]);
上記を使うと、function(tabs)で取得したtabsの全データが確認できます。
リファレンスの読み方がよくわからない…という方は、この方法を活用すると良いかと思います。
----------------------------------------------------------------------------
いかがでしたでしょうか。
なんとなく拡張機能の作り方、ChromeAPIの使い方がイメージできたのであれば幸いです。
次回は、ストア公開されている拡張機能のコードを読んで、さらに理解を深めたいと思います。
この記事が気に入ったらサポートをしてみませんか？