WEB

Chromeのオリジナル拡張機能を開発しよう(ソースコードあり)

Chromeのオリジナル拡張機能を開発しよう(ソースコードあり)

こんにちは、王です。
今日は、Chromeの拡張機能の作り方をご紹介します。

▼目次

Chromeの拡張機能とは?

Chromeの拡張機能は実質的にはただの圧縮したフォルダです。そして、そのフォルダの中身もただのHTMLやCSS、JSファイルです。
つまり、拡張機能の作り方はWebページのそれとは大差ないということですね。

拡張機能にしか提供されていない豊富なChromeのネイティブのAPI群(Chrome.* API)を利用できるところが拡張の魅力です!
一般公開目的ではなく、普段の業務効率化目的でも十分な利用価値があると思うので、まだの方はぜひ一度触ってみてください。

拡張機能の種類

拡張機能の種類は大きく分けて3つあります。

  1. Browser actions
  2. Page actions
  3. Override Pages

1つずつ見ていきましょう。

Browser actions

browserAction

ツールバーの右側に小さなアイコンを表示させるタイプの拡張機能です。一番頻繁に見かけるのがこのタイプですよね。

Page actions

pageAction

アドレスバーの中にアイコンを表示させるタイプの拡張機能です。「ページ」によっては表示したりしなかったりするため、「ページアクション」というわけです。RSS系はほぼこのタイプに当たります。

Override Pages

overridePages

このタイプの拡張機能は結構面白くて、Chromeの内部のページを代替することができます。

拡張機能は以下のページを置き換えることができます。

  • Bookmark Manager
  • History
  • New Tab

ただし、拡張1個につき、1つのページしか置き換えられないのです。例えばNew TabとHistoryの両方を1つの拡張で置き換えようとしても、ダメです。

簡単な拡張機能を作ってみよう

今回は一般的によく利用されている「Browser actions」タイプの拡張機能の作り方をご紹介します。

作る拡張機能の概要

ページ内のaタグをチェックして、リンクが設定されていないaタグをハイライト表示し、その数をバッジに出す、というものを作ってみようと思います。

demo

ソースコードはこちらから。

とりあえず、拡張機能をロードしてみる

load_extension

拡張ページで「デベロッパーモード」をチェックして、ソースコードが入っているフォルダを選ぶと、ちゃんと拡張一覧に出てきます。

manifest.json

ソースフォルダの中にはたくさんのファイルがありますが、その中で1つだけ必要不可欠なファイルがあります。それが 「manifest.json」というファイルです。

「マニフェスト」は読んで字の如し、拡張機能を定義するためのjsonファイルです。

例えば、拡張機能の作者や名前、アイコン、権限などのメタ情報を定義します。

manifest.jsonのごく簡単な例

{
  "manifest_version": 2,
  "name": "拡張名",
  "description": "拡張の説明文",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["js/jquery.js","js/background.js"]
  }
}

manifest_version2になっていることに注目してください。
これはマニフェストファイルのバージョンを示しているメタデータです。執筆時の最新版は2となっています。特別な理由がない限り、常に最新版を利用しましょう。

今回のサンプル拡張でいうと、以下のようになっています。

{
  "manifest_version": 2,
  "name": "Link Checker",
  "description": "This extension detect broken link and blank link.",
  "version": "1.0",
  "icons": {
    "16": "images/icon/icon_16.png",
    "48": "images/icon/icon_48.png",
    "128": "images/icon/icon_128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "browser_action": {
    "default_icon": {
      "19": "images/icon/icon_19.png",
      "38": "images/icon/icon_38.png"
    },
    "default_title": "Link Checker",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "css": ["css/contents_style.css"],
      "js": ["js/content_scripts/common.js"]
    }
  ],
  "permissions": [
    "tabs",
    "https://*/*",
    "http://*/*",
    "storage"
  ]
}

ちょっと説明しますね!

icons

Chrome Web Store や chrome://extensions で使われるアプリ(拡張機能)のアイコンです。

background

バックグラウンドで使うJS(後述)です。

browser_action

extension_page

今回 browser_actionタイプの拡張機能を作るので、関連設定はここで記述します。

  • default_icon : ツールバーのアイコン、Retina対応に、38ピクセルのアイコンも用意しておきましょう。
  • default_title : ツールバーのアイコンにカーソルをかざしてるときのツールチップ。
  • default_popup : ツールバーのアイコンをクリックしたときに出てくるポップアップ、HTMLファイルです。

Content Scripts

Webページの中に挿入されるJavaScriptやCSS(後述)。
「matches」では、“Content Scripts”が挿入されるページのパターンを指定します(今回の場合は全てのページに挿入するように指定してあります)。

permissions

特定のAPIを使うためにはその権限をユーザからもらう必要があるので、どんな権限がほしいのかをここで記述します。
どんな権限が必要になるかは、各APIのドキュメントを見ればわかります。

Content-Script と Background-Page

Content-Script

Webページの中に挿入するCSSとJavaScriptのことを「Content Scripts」と呼びます。
セキュリティ上の理由で、この手のJavaScriptは独自の実行環境(isolated world)を持ち、挿入先のWebページのDOMにはアクセスできるんですが、そのページで定義した変数や関数にアクセスすることはできません。

例えば、Webページ側ではjQuery1系を利用していて、Content-Scripts側ではjQuery2系を利用しても衝突することはありません。なぜならこの2種類のスクリプトはそれぞれ「別ワールド」に住んでいるので、お互いに干渉することがないからです。

数多くある 「Chrome.* API」の中で、Content-Scriptsは下記の一部のAPIしか利用できない制限があります。
ただし、「backgroundページ」とメッセージのやり取りをすることで「間接的に」利用することは可能です(後述)。

Background-Page

目には見えませんが、常にバックグラウンドで動いてるページです。拡張機能を一元管理する目的で使います。Webページに挿入しないため、「Content Scripts」のようなAPI利用制限はないです。

Event-Page について

Background-Pageの設定で、"persistent": falseにすることで、いわゆる「Event Pages」にすることができます。
Background-Pageとの違いは、「常に動いているわけではない」ところです。必要になったら動き、不必要になったら遊休状態になり、メモリが開放されます。Background-Pageよりエコってことですね! 積極的に使うべし!

{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  ...
}

Content-Script と Background-Page の相互通信

別ワールドにあるContent-ScriptとBackground-Pageですが、メッセージのやり取りで互いにコミュニケーションを取ることができます。

以下、chrome.runtime.sendMessagechrome.runtime.onMessageAPIを使ったメッセージ送信のサンプルコードです。

// イベントハンドラーをセットする  
chrome.runtime.onMessage.addListener(function (message) {
  console.log(message);
});

// メッセージ送信する
chrome.runtime.sendMessage('YO!');

これで、Content-Script側では使えないAPIをBackground-Pageに委託して、間接的に色んなAPIが使えるようになりますね!

Chrome.* API

拡張機能に提供されているスペシャルなAPI群のことを「Chrome.* API」と呼ばれています。
例えば以下のようなものがあります。

  • chrome.extension.*
  • chrome.browserAction.*
  • chrome.pageAction.*
  • chrome.windows.*
  • chrome.tabs.*
  • chrome.bookmarks.*

APIの一覧は Chrome.* API をご参照ください。

PhpStormでコード補完

autoCompletion

APIの数が多くて覚えられないので、コード補完があったら便利です。自分はPhpStormを使っていますので、以下のようにするだけで、ChromeのAPIのコード補完が利用できるようになります。PhpStormに限らず、JetBrainsの他の製品でも同じ機能があるはずです。

サンプル拡張機能の解説

ソースはこちらに置いておきました。
API部分以外は普通のWebサイトと全く同じ実装になっていますので、特別な説明をする必要はないなと思いました(;・∀・)

ソースコードの随所随所にコメントアウトしてありますので、拡張機能自体も簡単ですし、上記の概念さえ抑えておけばすぐに理解できると思います。

まとめ

以上、簡単ではありますがChrome拡張機能を作る上での基本的なところをご紹介いたしました。
マスターしていただいて、今後の実戦で武器として使うきっかけになれば嬉しいです!

さらにいろいろ探索したいという方には、Chrome公式サイトで公開されている「サンプル拡張」をオススメします。
API別で多種多様なサンプルコードが載っていますので、ぜひ一度チェックしてみてください!

 

【Chromeのおすすめ拡張機能をジャンル別でまとめました!】

Web制作者向けChromeおすすめExtensions8選「Web Developer」「Webpage Screenshot」など

Chromeブラウザを機能拡張するおすすめExtensions8選「Streamus」「AutoPatchWork」など

英語が苦手なあなたに!英文記事が簡単に読めるChrome拡張機能とアプリ紹介

「業務スピード」が上がるChromeの拡張機能8選

「Googleカレンダー」に便利なChrome拡張機能4選

この記事を書いた人

王
バックエンドエンジニア 2012年入社
LIGの王です。ウェブの全てを学ぶ為、中国は四川省より日本にやってきました。王という名に恥じぬよう、ウェブ業界のKINGとなるべく日々頑張っております。よろしくお願いいたします。