Chromeの拡張機能ってどうやって作るの？開発ガイドライン&作り方をまとめた

Google Chromeの拡張機能は種類が豊富でコミュニティも広く、ブラウザのメニューバーが埋め尽くされているという人も多いのではないでしょうか。

今回はChromeの拡張機能について、作り方や開発ガイドラインをご紹介します。

Chrome拡張機能の需要供給はブラウザの中でもダントツ

Chromeは世界で最も人気のあるブラウジングソフトウェアだからです。統計情報を扱うW3Counterによると、GoogleのChromeは2017年12月には58.8％の市場シェアを占め、最も人気の高いインターネットブラウザとなっています。

（出典：www.w3counter.com）

開発者たちが任意で作った拡張機能が、日夜一般公開され続けています。一般公開せずとも、社内限定のツールとして業務効率化を目指すのもいいでしょう。ぜひ作り方をマスターしてください。

Chrome拡張機能の開発ガイドライン

ただし、Chrome拡張機能を構築するには、技術的な知識だけでなく、Googleの品質基準を満たしている必要があります。iOSのデザインと品質のガイドラインと同様、Chrome拡張機能は「拡張機能品質ガイドライン」を満たしていなければなりません。

Chrome拡張機能開発において禁止されている項目

ガイドラインは、Chromeウェブストアを使用する場合に適応されます。以下のような製品のパブリッシュは禁止されています。

• 性的な内容を含む
• ヘイトスピーチに当てはまる行為
• 暴力的な内容
• 偽装または欺瞞的行動
• 知的財産を侵害する内容
• 法律に違反する行為
• ギャンブル
• ウイルスなどの悪意がある製品

アプリは全て単一の目的に従わなければならない

拡張機能は、狭義に定義され、理解しやすい単一の目的を果たさなければなりません。すべてが共通の目的に貢献する場合に限り、拡張機能に複数の機能と構成要素を含めることができます。

Chromeの拡張機能は、ブラウザの低パフォーマンスや、混雑状態のブラウザUIを避けるために、特定の使用ケースに対して目的をひとつに絞って提供する必要があることを強調しています。

Chrome拡張機能のUIガイドライン

技術的な観点から見れば、Chrome拡張機能はWebページを構築するようなものです。ただし、UXとUIの観点から見ると、少し異なります。拡張機能は用途や使用目的が異なるため、異なるUIを区別する必要があります。

多くの拡張機能は、「Browser Actions」や「Page Actions」を通じてユーザーのChromeブラウザにUIを追加します。1つのChrome拡張機能には、「Browser Actions」「Page Actions」が1つしかありません。

「Browser Actions」「Page Actions」とは

• Browser Actions：ほとんどのウェブサイトやWebアプリに関連するChrome拡張機能を開発する場合は、「Browser Actions」を選択する必要があります。
• Page Actions：いくつかのWebページ(gmail.comなど)にのみ関連する拡張機能を構築する場合は、「Page Actions」を選択します。

Page Actionsは、現在のページで実行できるアクションを表しますが、すべてのWebページには適用されません。

ユーザーが関連のあるWebページにアクセスしていない間は、ページアクションを含む拡張機能はグレー表示(非アクティブ)されます。

Usersnap拡張はどのWebページでも使用できますが、Tampermonkey拡張はWebページによって無効になります。

Chrome拡張機能の作り方

基本的に、Chromeの拡張機能はWebページの圧縮版と同じ扱いです。HTML、CSS、JavaScriptなどの知見があれば、Chromeの拡張機能を簡単に構築できます。

Chrome拡張機能では、ブラウザが提供するすべてのAPI（JSON、XMLHttpRequestなど）を使用できます。コンテンツスクリプト、もしくはクロスオリジンのXHRを使用すれば、Webページ及びサーバーや、ブラウザタブ等のブラウザ機能とのインタラクトが可能です。

主なポイントは3つです。

1. Chrome拡張機能のファイル構造とアーキテクチャ

拡張ファイルは、ユーザーがダウンロード/インストールする単一の.cryパッケージに圧縮されています。このような拡張パッケージは、次のファイルで構成されている必要があります。

• マニフェストファイル
• 1つまたは複数のHTMLファイル
• あなたの拡張機能が必要とするその他のファイル(例えば:画像、JavaScriptファイル等)

拡張機能の開発とテストが完了したら、Google開発者用ダッシュボードに Zipファイルをアップロードすることができます。

2. 相対URLと絶対URL

拡張機能を開発する際、相対URLを使用すれば、画像を表示させるときにファイルの位置を示すことができます。これはHTMLページを構築する時と同じように機能します。“images”というサブフォルダにイメージを置くきます。

また、一意識別子を使用して、相対URLでファイルにはアクセスすることもできます。この拡張IDは変更することができ、定義済みメッセージである@@ extension_idを使用して、拡張IDの取得中にハ、ードコードを回避できます。

@@ extension_idの例は次のようになります。

body {

background-image:url(‘chrome-extension://__MSG_@@extension_id__/background.png’);

}

どんなCSS・JavaScriptファイルでも、このメッセージを含めることができますが、マニフェストファイルでは機能しません。

3. マニフェストファイル

すべてのChrome拡張機能には、manifest.jsonというJSON形式のマニフェストファイルが必要です。このマニフェストファイルは、バージョン管理システム、権限、その他の有用なメタ情報など、Chrome拡張機能にまつわるすべての必要情報を提供します。また、ファイルはChrome拡張機能のルートフォルダに格納しておく必要があります。

Googleによると、すべてのマニフェストファイルには次の情報が含まれている必要があります。

{

“manifest_version”： “2.1”,

“name”： “My Extension”,

“version”： “versionString”,

}

あくまでオプションですが、次の情報も推奨されています：

{

“description”: “Gets information from Google.”,

“icons”: {

    “128”: “icon_128.png” },

“background”: {

    “persistent”: false,

    “scripts”: [“bg.js”] },

“permissions”: [“http://*.google.com/”, “https://*.google.com/”],

“browser_action”: {

    “default_title”: “”,

    “default_icon”: “icon_19.png”,

    “default_popup”: “popup.html”}

}

マニフェストファイルの作り方についてさらに詳しく知りたい場合は、デベロッパー向けガイドラインからGoogleのドキュメントをチェックすることをおすすめします。

4. アーキテクチャ

新しいChrome拡張機能を開発する際は、拡張機能がブラウザ内できちんと実行されるために、次のいくつかの要素が必要になります。

• Background Page(バックグラウンドで動くページ)：メインロジックを保持するため
• UIページ：拡張機能のUIを表示するために使用
• コンテンツスクリプト：ユーザーが読み込んだページとインタラクトするために使用

(a)背景ページ

背景ページは、Chrome拡張機能のメインロジックを保持するために使用されます。つまり、background.htmlページは、拡張機能の動作を制御するコードによって構成されています。

Background Pageが永続的である一方、Event pageは、拡張子が開閉された場合にのみ開放されています。ですので、常にバックグラウンドページが動いている必要がある場合以外、基本的にはEvent pageを推奨します。

(b)UIページ

Chrome拡張機能はHTMLページで構成できます。これらのHTMLページには、拡張機能のインターフェースが表示されます。

ユーザーが拡張機能アイコンをクリックした後に開くポップアップには、HTMLページなどが使用可能です。このHTMLページ(この場合popup.html)はお互いのDOMにアクセスでき、互いに機能を呼び出すことができます。つまり、popup.htmlは、background.htmlページで既に使用されているコードを複製する必要はありません。

(c)コンテンツスクリプト

ユーザーが読み込んだWebページとインタラクトする必要があるChrome拡張機能を構築する場合は、必ずコンテンツスクリプトが必要になります。

コンテンツスクリプトは、読み込まれたページのコンテキストで動作するJavaScriptです。ロードされたページの一部として捉えておくと良いでしょう。

コンテンツスクリプトは、読み込まれたページを変更する可能性があります。ロードされたWebページのすべての画像を、俳優のライアン・ゴズリングの画像に置き換えたりすることもできます。

Chrome拡張機能をテストしよう

作り方をマスターし、Chrome拡張機能の開発作業が完了したら、次はテストを行いましょう。
幸いなことに、新しい拡張モジュールのテストは実に簡単。クロム拡張設定(chrome：// extensionsでアクセス可能)の「デベロッパーモード」を有効すれば準備完了です。

あとは、解凍した拡張機能をChromeブラウザに追加するだけでテストを行えます。正しくに追加された場合は、ブラウザ内に独自の拡張子アイコンが表示されます。

あらゆる機能と命令処理能力をテストし、拡張機能が意図通りに機能するかどうか、隅々までチェックしましょう。

最後に

Chrome拡張機能には、まだまだ多くの特徴と、利用できる機能があります。

今回はChrome拡張機能の作り方の基本に従いつつ、あなたが自分らしい独自のChrome拡張機能を開発できることを祈っています。

（翻訳：Ayaka Takei）