Skip to content

1.4.UIページ

Jump to bottom
Shogo Sensui edited this page Mar 7, 2014 · 5 revisions

拡張機能では、ユーザーが作成した任意のHTMLを利用することが出来ます。 ここでは拡張機能のアイコンをクリックしたときに、ポップアップウィンドウを表示する際に利用してみます。

拡張機能のアイコンを指定する

まずはこの拡張機能にアイコンを指定します。 128 * 128、48 * 48、38 * 38、16 * 16の4種類のサイズのアイコンを用意します。 アイコンがなくても処理に支障は出ませんが、ストアからのインストール時、 拡張機能ページなどの色んなシーンで使われますので指定したほうが良いとされています。 拡張機能のフォルダに、新たにiconsというフォルダを作成し、配置しましょう。 アイコンはこちらからダウンロードしてください。

次に、manifest.jsonを編集します。

manifest.json

{
  "manifest_version": 2,
  "name": "My first chrome extension",
  "version": "0.0.2",
  "description": "Open popup window",
  "author": "Your name",
  "permissions": [
    "history"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "icons": { 
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "browser_action": {
    "default_icon": "icons/icon38.png"
  }
}

iconsに128 * 128、48 * 48、16 * 16の3種類のアイコンを指定し、 browser_actionのdefault_iconに、38 * 38のアイコンへのパスを指定しました。 browser_actionにアイコンを指定することでアドレスバーの右に拡張機能のアイコンが表示されます。 これでこの拡張機能のアイコンが表示される場合にブランクがなくなります。

chrome://extensions/ を開いて リロード（⌘R） し、アイコンが追加されればOKです。

ポップアップウィンドウを表示する

次に、アイコンをクリックしたときにUIページをポップアップで表示するようにしてみましょう。 UIページは普通のHTMLです。わかりやすいようにpopup.htmlという名前で作成し、拡張機能のディレクトリに保存します。

popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Popup Window</title>
  </head>
  <body>
    <h1>This is UI page as popup window.</h1>
  </body>
</html>

次に、 アイコンがクリックされたらポップアップで表示する という指定をmanifest.jsonにします。

manifest.json

{
  "manifest_version": 2,
  "name": "My first chrome extension",
  "version": "0.0.1",
  "description": "Access to browser history",
  "author": "Your name",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "permissions": [
    "history"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_icon": "icons/icon38.png",
    "default_title": "Popup Window",
    "default_popup": "popup.html"
  }
}

browser_actionにdefault_titleとdefault_popupを追加しました。 default_titleにはポップアップのタイトルを、default_popupには開くUIページのパスを指定します。

出来たら、chrome://extensions/ を開いて リロード（⌘R） しましょう。 アイコンをクリックし、ポップアップウィンドウが表示されればOKです。

バックグランドページから指定する

クリック時にポップアップを表示するという処理は、manifest.jsonで指定する他、 バックグラウンドページからも指定可能なので、紹介しておきます。 アイコンクリック時に処理を追加するには、chrome.browserAction.onClicked.addListener()を、 ポップアップウィンドウを表示するには、chrome.browserAction.setPopup()というAPIを使います。 これを踏まえて、background.jsに処理を追加しましょう。

background.js

// アイコンクリック時のイベントを指定する
chrome.browserAction.onClicked.addListener(function () {
  // chrome.browserAction.setPopupに渡すパラメータを作成する
  var detail = {
    popup: 'popup.html'
  };
  // ポップアップを開く
  chrome.browserAction.setPopup(detail);
});

バックグラウンドページでクリック時のイベントを指定したので、 manifest.jsonから先程追加した処理を消します。

manifest.json

{
  "manifest_version": 2,
  "name": "My first chrome extension",
  "version": "0.0.1",
  "description": "Access to browser history",
  "author": "Your name",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "permissions": [
    "history"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_icon": "icons/icon38.png"
  }
}

chrome://extensions/ を開いて リロード（⌘R） しましょう。 アイコンをクリックして同様にポップアップウィンドウが表示されればOKです。

関連リンク

Ask me any questions at Twitter or GitHub.

Clone this wiki locally