基本的なChrome拡張機能の作り方：マニフェスト作成からChromeへの読み込みまで
Chromeは、世界で最も利用されているWebブラウザです。Statcounterのデスクトップブラウザ市場シェア調査によると、Chromeはデスクトップブラウザ市場のおよそ65%という圧倒的なシェアを誇っています。
これほど大きな市場を握っているため、Web制作においてChromeへの対応は最優先事項となっています。拡張機能についても同様で、Chromeは他のブラウザを大きく引き離す規模のユーザーベースを持ち、Chromeウェブストアには数万におよぶ拡張機能、テーマ、アプリが登録されています。
この流れに乗りたいなら、自分で基本的なChrome拡張機能を作ってみるのがおすすめです。必要なのはHTML・CSS・JavaScriptといったWeb開発の基礎スキルと、全体をつなぐためのJSONの少しの知識だけです。
この記事では、基本的なChrome拡張機能を構築するために最低限必要な構造を紹介します。より深く学びたい場合は、Googleが提供する「Chrome拡張機能開発者ガイド」を参照してください。
基本のChrome拡張機能を作る：manifest.jsonの書き方
このチュートリアルでは、クリックするとシンプルなポップアップメッセージを表示する、ごく基本的なChrome拡張機能を作成します。用意するのは次の3つのファイルです。
- アイコン画像（icon.png）
- HTMLファイル（popup.html）
- 最重要ファイルとなるマニフェスト（manifest.json）
これらのファイルはすべて、拡張機能名と同じ名前のディレクトリに格納します。ここでは「Hello World」というフォルダ名にします。
Chrome拡張機能の挙動は、マニフェストによって定義されます。このJSONの記述は、Chromeに対して拡張機能をどのように解釈し、どのファイルを読み込み、ユーザーとどうやり取りするかを伝える役割を果たします。
今回のような最小構成の拡張機能の場合、マニフェストファイルは次のようになります。
{
"manifest_version": 2,
"name": "Hello World!",
"description": "My first Chrome extension.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
このマニフェストにより、ユーザーのツールバーにアイコンが表示され、クリックすると「popup.html」の内容が読み込まれるようになります。各項目の意味は以下の通りです。
manifest_version：使用しているマニフェストのバージョンをChromeに伝えます。当時の拡張機能では「2」を指定していましたが、現在はManifest V3が標準となっている点に注意してください。name：Chromeウェブストアや「chrome://extensions」に表示される拡張機能の名前です。description：「chrome://extensions」に表示される説明文です。browser_action：ツールバーにアイコンを読み込みます。ツールチップやポップアップ、バッジを表示してユーザーの操作に応答することもできます。詳細は公式ドキュメントを参照してください。default_icon：拡張機能ディレクトリから見たアイコンへのパスです。default_popup：拡張機能のアイコンがクリックされたときに読み込まれるファイルへのパスです。permissions：拡張機能のアクセス範囲を制限します。「activeTab」は最も一般的な権限で、前面に表示されているタブへのアクセスを許可します。拡張機能が要求できるすべての権限の一覧もGoogleが公開しています。
マニフェストで宣言できるすべての項目について詳しく知りたい場合は、Googleの拡張機能マニフェストに関するドキュメントを確認しましょう。
基本のChrome拡張機能を作る：ポップアップの作成
マニフェストが書けたら、次は拡張機能が実際に表示する内容を作ります。これは「popup.html」の役割で、拡張機能が読み込まれたときに表示されます。今回使うコードは以下の通りです。
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<style type="text/css">
body {
margin: 5px;
}
h1 {
font-size: 15px;
text-align: center;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</html>
ご覧のとおり、CSSでスタイルを整えたテキストを表示するだけのシンプルなものです。拡張機能にJavaScriptや外部CSSを追加したい場合は、マニフェストのcontent_scriptsキーでスクリプトを宣言する必要があります。マニフェストに参照を記述すれば、あとは通常どおりスクリプトを読み込めます。
基本のChrome拡張機能を作る：Chromeへ読み込む
拡張機能のコードが書けて、適切なアイコンも用意できたら、いよいよChromeに読み込みましょう。
1. 「chrome://extensions」を開き、右上のチェックボックスで「デベロッパーモード」をオンにします。
2. 「パッケージ化されていない拡張機能を読み込む」ボタンをクリックし、拡張機能のディレクトリを選択します。
3. 拡張機能が読み込まれると、メニューバーにそのアイコンが表示されます。
4. 拡張機能をクリックして、（とてもシンプルな）動作を確認してみましょう。
まとめ：Chrome拡張機能をさらに発展させるには
拡張機能が完成して公開する準備ができたら、Chromeデベロッパーアカウントの作成が必要です。手順は決して単純ではありませんが、Googleが拡張機能の公開方法について詳細な手順を公開しています。
もちろん、Chrome拡張機能でできることはまだまだたくさんありますが、それらはこの記事の範囲を超えます。拡張機能の可能性をもっと知りたい方は、Googleの「Chrome拡張機能開発者ガイド」をぜひ参照してください。
-
Google Chromeでウェブサイトをブロックする方法【拡張機能を使った簡単手順】
Google Chromeは世界で最も利用されているブラウザの一つであり、ブラウザ市場の大部分のシェアを占めています。かつてはそうではありませんでしたが、高速な読み込み速度と使いやすいインターフェースにより、長年にわたって多くのユーザーを獲得してきました。職場用にパソコンを設定する場合や、家庭内で子どものアクセスを制限したい場合など、特定のウェブサイトへのアクセスをブロックしたい場面があるかもしれません。そこで本記事では、拡張機能を使ってGoogle Chrome上でウェブサイトをブロックする方法をわかりやすく解説します。Chromeでウェブサイトをブロックする手順Chromeには数多くの拡張
-
Google Chromeでメモリ（RAM）を大量消費する拡張機能を見つけて無効化する方法
Google Chrome最大の魅力といえば、Chromeウェブストアで提供される豊富な拡張機能です。拡張機能を自由に追加できることで、ブラウジングがより柔軟かつ効率的になり、多くのユーザーがChromeを選ぶ理由となっています。 しかし、一部の拡張機能はリソースを大量に消費し、通常以上のRAM（メモリ）を食い潰すことがあります。小さな拡張機能でも50MB程度のメモリ使用は珍しくなく、100MB近くに達するケースもあります。それを超えるメモリを消費する拡張機能は異常な状態にあると判断し、無効化するのがおすすめです。 幸い、Chromeには標準搭載の「タスクマネージャー」があり、このような拡張機