Chrome: Extension 作成

過去に Chrome を使って figlet 文字を作るための拡張機能を作ったことがあるので、そのナレッジを防備として記す。

大まかな流れ

拡張機能プログラムの作成
- manifest ファイルの作成
- スクリプトや UI の作成
拡張機能のパッケージ化
- 配布用パッケージの作成

拡張機能の作成

manifest.json

マニフェストファイルは、拡張機能の動作に必要な情報を書き記した JSON ファイルである。ブラウザが読み取って拡張機能に必要な権限を渡したり、Chrome Web Store などの配布ストアが読み取って拡張機能の配布ページを作成したりするのに使われる。プログラムではないにもかかわらず、拡張機能の中では最も大切なファイルである。

{
  "manifest_version": 3,
  "name": "Extension name",
	"version": "1.0.0",
	"description": "Extension description",
	"permissions": [
    "activeTab",
    "storage",
    "scripting",
    "tabs"
  ],
  "background": {
    "service_worker": "background.js" // 必要に応じて
  },
	"action": {
		"default_title": "Extension",
		"default_popup": "popup.html"
	},
	"content_scripts": [
    { "js": ["content.js"] } // 必要に応じて
  ],
	"content_security_policy": {
		"extension_pages": "script-src 'self'; object-src 'self'"
	},
	"options_page": "options.html" // 必要に応じて
}

UI とスクリプトの作成

figlet generator は、それ単体で動作する (バックグラウンドで動作したり、開いているページと強調動作することがない) ので、非常に簡便なつくりであった。Popup のみの拡張機能の場合、通常の Web ページと構造としては差がない。

以下は、何の変哲もないシンプルな拡張機能の例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extension</title>
    <link rel="stylesheet" href="popup.css">
</head>
<body>
    <div id="body">
        <h1>Hello, world</h1>
        <span id="message"></span>
    </div>
    <script src="popup.js"></script>
</body>
</html>

// popup.js

document.addEventListener('DOMContentLoaded', function () {
    const message = document.getElementById('message');
    message.textContent = "It works!"
}

拡張機能のパッケージ化

Chrome Web Store で配布する場合、自前でパッケージ化する必要がない (ソースファイル一式を Zip に集約して Google に送る。審査がある) 。そのため、Developer Dashboard の指示に従って Zip ファイルをアップロードすればよい。

配布用パッケージの作成

Chrome WebStore で公開せず、自分で拡張機能を配布する場合は、自分で拡張機能をパッケージ化する必要がある。パッケージを作るツールはブラウザに組み込まれているので、それを利用すればよい。