ChromeExtensionツールを作る時に、複数のタブにまたがったツールを作る際に、各タブの情報を取得するにはいくつかのポイントがあるので、情報まとめとサンプルを掲載しておきます。
Summery
Chrome画面の右上に表示されているExtensionアイコンをクリックすると表示される、ポップアップ画面の入力項目に現在表示されているタブのURLを表示するというシンプルなプログラムです。
Chromeアプリでは表示しているWEBサイトの情報と、chromeExtensionのオプションページの２つの領域が存在するので、そこのアタッチ方法で初回少し手こずったので、その備忘録ブログです。
ソースコード
{
"name": "getTagUrl",
"short_name" : "DBG",
"version": "1.1",
"manifest_version": 2,
"description": "getTagUrl",
"icons": {
"16" : "contents/img/icon_19.png",
"48" : "contents/img/icon_48.png",
"128": "contents/img/icon_128.png"
},
"permissions":[
"tabs"
],
"browser_action":{
"default_icon":"contents/img/icon_48.png",
"default_title":"getTagUrl",
"default_popup":"popup/index.html"
}
}
<!doctype html>
<html lang="js">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<h1>URL-Move</h1>
<textarea id="list"></textarea>
<input type="button" id="save" value="Save">
<input type="button" id="view" value="View">
</body>
</html>
(function(){
var $$ = {};
$$.data = {
ls_key:"debug"
};
// init-run
$$.__construct = function(){
chrome.tabs.getSelected(null, function(tab){
var list = document.getElementById("list");
if(list != null){
list.value = tab.url;
}
});
var save = document.getElementById("save");
if(save != null){
save.onclick = $$.save;
}
var view = document.getElementById("view");
if(view != null){
view.onclick = $$.view;
}
};
$$.save = function(){
var list = document.getElementById("list");
if(list != null){
localStorage.setItem($$.data.ls_key , escape(list.value) );
};
};
$$.view = function(){
var list = document.getElementById("list");
if(list === null){return}
var lists = list.value.split("\n");
document.URL = lists[0];
};
// run
window.addEventListener("load",$$.__construct);
})();
#list{
display:inline-block;
border:2px solid #AAA;
width:400px;
height:300px;
}
#save{
display:inline-block;
width:200px;
height:40px;
font-weight:bold;
font-size:12px;
margin:4px auto;
}
#view{
display:inline-block;
width:200px;
height:40px;
}
解説
manifest.json
"permissions":[
"tabs"
],
この記述ないと、タブ情報にアクセスできないので、permission設定を忘れず行いましょう。
あとは、ポップアップ用のHTMLが準備されていれば、そこで読み込まれるJSファイルに記載するという簡易な内容です。
js.js
読み込まれたJSは、汎用性を重視して無名関数内のみの処理にしています。
また、window.onloadをaddEventListenerで起動していますが、ポイントは
chrome.tabs.getSelected(null, function(tab){
var list = document.getElementById("list");
if(list != null){
list.value = tab.url;
}
}
);
ここの箇所でURLを取得してます。
permissionｓでtabsのセットをしていることで、chrome.tabsにアクセス可能になり、その中のcallback関数でtab.urlが取得できるというワケなんですね。
少し面倒くさい作法ですが、chromeアプリとしてこれに慣れておくとこの後リファレンスを読む時にも非常に役に立つと思います。
Github
https://github.com/yugeta/chromeEx_labo_getTabUrl
下記コマンドでソースを取得してください。
$ git clone https://github.com/yugeta/chromeEx_labo_getTabUrl.git
