[ChromeExtension] 表示しているタブのURLを取得するサンプル

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ChromeExtensionツールを作る時に、複数のタブにまたがったツールを作る際に、各タブの情報を取得するにはいくつかのポイントがあるので、情報まとめとサンプルを掲載しておきます。

Summery

Chrome画面の右上に表示されているExtensionアイコンをクリックすると表示される、ポップアップ画面の入力項目に現在表示されているタブのURLを表示するというシンプルなプログラムです。
Chromeアプリでは表示しているWEBサイトの情報と、chromeExtensionのオプションページの2つの領域が存在するので、そこのアタッチ方法で初回少し手こずったので、その備忘録ブログです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-22-17-04-30

ソースコード

解説

manifest.json

この記述ないと、タブ情報にアクセスできないので、permission設定を忘れず行いましょう。
あとは、ポップアップ用のHTMLが準備されていれば、そこで読み込まれるJSファイルに記載するという簡易な内容です。

js.js

読み込まれたJSは、汎用性を重視して無名関数内のみの処理にしています。
また、window.onloadをaddEventListenerで起動していますが、ポイントは

ここの箇所でURLを取得してます。
permissionsでtabsのセットをしていることで、chrome.tabsにアクセス可能になり、その中のcallback関数でtab.urlが取得できるというワケなんですね。
少し面倒くさい作法ですが、chromeアプリとしてこれに慣れておくとこの後リファレンスを読む時にも非常に役に立つと思います。

Github

https://github.com/yugeta/chromeEx_labo_getTabUrl

下記コマンドでソースを取得してください。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です