Help us understand the problem. What is going on with this article?

Chrome Extension の作り方 (その3: Browser Action / Page Action)

More than 1 year has passed since last update.

Chrome Extension の作り方 (その1: 3つの世界) - Qiita
Chrome Extension の作り方 (その2: Contents Script) - Qiita

の続き。

Browser Action (Page Action) について説明します。

全てのページに対してアクションを起こしたい → 公式 Browser Action
特定のページに対してアクションを起こしたい → 公式 Page Action

というように使い分けるようです。

できること

アイコンをクリックしたときに何かの処理をさせることができます。
ここでいうアイコンとは、ブラウザの右上に出るこれらのこと(下記の赤枠)

ex07.png

Browser Actionの例

アイコンをクリックすると、現在開いているタブの数を表示する君を作ってみます。

フォルダ構成

現在開いているタブの数を表示する君
  └icon16.png
  └jquery-3.4.0.min.js
  └manifest.json
  └popup.html
  └popup.js

manifest_json

まずは manifest_json です。

manifest.json
{
  "manifest_version":2,
  "name":"アイコンクリックしたらポップアップが出る",
  "version":"1.0",
  "permissions":["tabs"],
  "browser_action":{
    "default_icon": {
      "16": "icon16.png"
    },
    "default_title":"開いてるタブの数を表示する",
    "default_popup":"popup.html"
  }
}

今回の流れとして、

  1. ある画面にアクセスする
  2. アイコンがクリックされる
  3. default_popup に定義されている popup.html を表示させる
  4. その中のJavascriptを実行する

をやってみようと思います。

今回はExtensionから「Tabの情報」にアクセスしたいので、

manifest.json
  "permissions":[
    "tabs"
  ],

が入ってます。

↓ここがBrowser Actionの設定箇所です。

manifest.json
  "browser_action":{
    "default_icon": {
      "16": "icon16.png"
    },
    "default_title":"開いてるタブの数を表示する",
    "default_popup":"popup.html"
  }

アイコンには↓これを使いました。
icon16.png

ここまでで manifest.json の中に

  • アイコンには icon16.png を使用する
  • アイコンをクリックすると popup.html を開く

という指定ができました。

popup.html

次に popup.html ですが、ここは普通にHTMLを書けます。

popup.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>popup</title>
  <style>
    body{
      width: 250px;
      height: 50px;
    }
  </style>
</head>
<body>
  <p id="tabnum"></p>

  <script src="jquery-3.4.0.min.js"></script>
  <script src="popup.js"></script>
</body>
</html>

アイコンがクリックされたら↑このポップアップが開きます。その中で jquery-3.4.0.min.jspopup.js が読み込まれます。

注意!
Browser Action を使うときには popup.html, popup.js が必要 というわけではありません。

今回は

  • 「アイコンを押したら、ポップアップとしてHTMLを表示させたい」ので、そのHTMLのファイル名を popup.html と名付けた。
  • popup.html の中で呼び出すjavascriptファイル名を popup.js と名付けた、だけです。

popup.js

popup.js
chrome.tabs.query({},function(tabs){
  $('#tabnum').text('現在開いているタブの数は['+tabs.length+']個です')
});

chrome.tabs.query については 公式 chrome.tabs

これで必要なファイルが揃いました。

BrowserActionを実行する

chrome://extensions/ を開いて、現在開いているタブの数を表示する君フォルダをドラッグ&ドロップしてインストール。

↓こんな感じで動作します。現在起動しているChromeの中にあるタブ数を表示してくれます。(別ウィンドウで開いていても合算されます)

ex10.gif

  • カーソル乗せると default_title に設定した値が表示される
  • クリックすると default_popup に設定したhtmlが開く

もっとリッチな機能にするには、タブ数だけじゃなくて開いているサイトのタイトルとURLの一覧を表にして表示させる、とかできそうですね。。。

...

せっかくなのでやってみました。

manifest.json は上のやつそのまま使う。
popup.htmlpopup.js を下記のように変更。

popup.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>popup</title>
  <style>
    body{
      width: 1000px;
      height: 800px;
    }
  </style>
</head>
<body>
  <p id="tabnum"></p>

  <table border="1">
    <thead></thead>
    <tbody></tbody>
  </table>

  <script src="jquery-3.4.0.min.js"></script>
  <script src="popup.js"></script>
</body>
</html>
popup.js
chrome.tabs.query({},function(tabs){
  $('#tabnum').text('現在開いているタブの数は['+tabs.length+']個です');

  for(var i in tabs){
    $('tbody').after('<tr><td>'+tabs[i].title + '</td><td>' +  tabs[i].url + '</td></tr>');
  }
});

↓ 実行する(デザインセンスは無いけれど)

ex17.gif

Browser Action のデバッグ

例えばpopup.js のデバッグをしたいと思います。
console.log を入れて実行したとします。

popup.js
console.log("popup.jsが呼ばれた");

chrome.tabs.query({},function(tabs){
  $('#tabnum').text('現在開いているタブの数は['+tabs.length+']個です');
});

でも content scripts の時(その2:ContentScripts参照)のようにデベロッパーツールを開いてもログは出力されていません。。。

これは、

  • content scripts とは「いま表示されているサイト自体にscriptを挿入する」ものなので、そのサイト自体のconsoleに表示される。
    • → 普通にデベロッパーツールを表示すれば見える
  • browser action (の中で使っている popup.js) は popup.html から呼ばれているので、 popup.html のconsoleに表示される。
    • popup.html のデベロッパーツールってどこよ?

になります。

これは アイコン右クリック → ポップアップを検証 で確認できます。

ex11.gif


Page Actionの例

「特定のページ」にのみ有効な Browser Action のようです。

page action の処理の流れは下記のようになります。

  1. ある画面にアクセスする
  2. background.js にあるRuleに合えば(今回は「特定のURLならば」) page_actionを有効にする(アイコンが有効になる)
  3. アイコンがクリックされる
  4. default_popup のHTMLを表示させる
  5. その中にJavascriptがあればそれを実行する

2の部分がBrowser Actionでは存在しなかったところです。

例として、Browser Action のところで作ったExtensionを、「qiita.com ドメインに一致するURLにアクセスしたときにだけ」実行できるように変更してみます。

フォルダ構成

page_action
  └background.js
  └icon16.png
  └jquery-3.4.0.min.js
  └manifest.json
  └popup.html
  └popup.js

manifest.json

manifest.json
{
  "manifest_version":2,
  "name":"qiitaでアイコンクリックしたらタイトルとURLをポップアップに表示させる君",
  "version":"1.0",
  "permissions":["tabs", "declarativeContent"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action":{
    "default_icon": {
      "16": "icon16.png"
    },
    "default_title":"開いてるタブの数を表示する",
    "default_popup":"popup.html"
  }
}
  • permissionsdeclarativeContent を追加
  • backgroundbackground.js を追加(ファイル名は任意です)

background.js

background.js
// 現時点でのruleをクリア(removeRules)して
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
  // 新たなruleを追加する
  chrome.declarativeContent.onPageChanged.addRules([{
    conditions: [
      // アクションを実行する条件
      new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'qiita.com'},
      })
    ],
    // 実行するアクション
    actions: [
      new chrome.declarativeContent.ShowPageAction()
    ]
  }]);
});

chrome.declarativeContent.PageStateMatcher でどんな条件を指定ができるのか、については 公式 chrome.declarativeContent にサンプルも載ってます。

popup.html, popup.js

この2つのファイルは、Browser Action のときと同じ中身です。

PageActionを実行する

インストールして
ex12.png

https://qiita.com/* にアクセスすると

↓ アイコンが有効(押せる)な状態で、押せば動きます。

ex13.png

https://qiita.com/* 以外にアクセスすると

↓ Pアイコンが押せません。
ex14.png

きちんと PageStateMatcher が効いているようです。

Page Action のデバッグ

Browser Actionと同じです。

次回は Event Page (Background Page) についてです。

連載リンク

Chrome Extension の作り方 (その1: 3つの世界) - Qiita
Chrome Extension の作り方 (その2: Contents Script) - Qiita
Chrome Extension の作り方 (その3: Browser Action / Page Action) - Qiita
Chrome Extension の作り方 (その4: Event Page / Background Page) - Qiita
Chrome Extension の作り方 (最終話: メッセージパッシング) - Qiita

sakaimo
みなさんの記事に助けられております。私も何かお役に立てるよう頑張ります。。。 2020年からはGoogle Apps Script、Query関数、Data Portal、たまにChromeエクステンション を使って 自動化・効率化・見える化を担当しています。
https://note.mu/sakaimo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした