1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. Chrome拡張機能の作り方。誰でもかんたんに開発できる!

Chrome拡張機能の作り方。誰でもかんたんに開発できる!

Webサイトを見るとき、ブラウザはなにを使っていますか?

Edge、Safari、Opera、firefox、色々ありますが、やはりChromeを使っている、という方はとても多いと思います。
ほかのブラウザにもいえることですが、Chromeには拡張機能があり、さまざまな機能を自分好みにインストールすることができます。

しかし、やはり自分の思う拡張機能が見つからない、ということはよくあると思います。
そこで今回は、Chrome拡張機能を自作する方法を紹介したいと思います。

りこ

今日はGoogle Chromeの拡張機能を作っていくわ!

R

へっ、拡張機能って自作できるんですか?

りこ

当たり前よ、じゃあ普段使ってる拡張機能は誰が作ってんのよ

R

宇宙人でござる……

りこ

拡張機能作ってくれてる人に失礼よ。ちゃんと謝って

R

ごめんねでござる……

目次
  1. Chrome拡張機能のサンプルをダウンロード
  2. Chrome拡張機能を有効にする方法
  3. アラートを表示する拡張機能の作成
  4. ツールチップのアイコンを変更する
  5. ポップアップ画面の作成
  6. まとめ

Chrome拡張機能のサンプルをダウンロード

まず、Chrome拡張機能がどのように作られているのか、サンプルをダウンロードしてみましょう。
ターミナルで、任意のディレクトリに移動し、以下のコマンドを実行します。

git clone https://github.com/GoogleChrome/chrome-extensions-samples.git

chrome-extensions-samplesというディレクトリがダウンロードされ、そのなかのexamplesにサンプルが入っています。

  • bookmarks
  • hello-world
  • page-redder
りこ

「bookmarks」は、ブックマークを一覧表示してくれる拡張機能
「hello-world」は、かんたんな説明が書かれたサンプルコード
「page-redder」は、ページを真っ赤に染める拡張機能ね

R

なるほど。シンプルなサンプルですね……ぶぶぶっ

りこ

……

Chrome拡張機能を有効にする方法

Chrome拡張機能のサンプルや自作の拡張機能をChromeで試すには、ローカルの拡張機能を有効にする必要があります。

ブラウザのURLの項目に、chrome://extensionsと打ち込むと、次のような画面が表示されます。

画面右上の「デベロッパーモード」をONにすると、拡張機能のメニューが表示されます。

「パッケージ化されていない拡張機能を読み込む」をクリックします。

さきほどダウンロードしたサンプルを読み込んでみましょう。
今回は、bookmarksを読み込んでみました。

りこ

開発中の拡張機能は、ピンで固定しておくとすぐに使えて便利よ!

R

ふむふむ

アラートを表示する拡張機能の作成

拡張機能のアイコンがクリックされたときに、アラートを表示する拡張機能を作っていきましょう。

フォルダ構成

では、アラートを表示する拡張機能を作成するための、基本的なフォルダ構成を見ていきましょう。
今回はchrome-extensionsフォルダに、alert.jsとmanifest.jsonを作成しました。

chrome-extensions/
|-- alert.js
`-- manifest.json

manifest.jsonについて

manifest.jsonは、Chrome拡張機能を作成する上で、必要なファイルです。

manifest.json

{
	"name": "元気が出るスイッチ",
	"manifest_version": 3,
	"version": "0.1",
	"permissions": ["activeTab","scripting"],
	"background": {
		"service_worker": "alert.js"
	},
	"action": {}
}

2行目の"name"には、拡張機能の名前を指定します。
3行目の"manifest_version"は、現在の最新バージョンである3を指定しておきましょう。
4行目の"version"には、作成する拡張機能のバージョンを指定します。
5行目の"permissions"には、ChromeのAPIを使うためのパーミッションを指定します。
7行目の"service_worker"は、読み込みたいスクリプトを指定します。

alert.jsについて

alert.js

function showAlert() {
	alert("今日も楽しく開発しよう!");
}
chrome.action.onClicked.addListener((tab) => {
	chrome.scripting.executeScript({
		target: { tabId: tab.id },
		function: showAlert
	});
});

Chromeで確認

では、Chromeで拡張機能を確認してみましょう。
作った拡張機能を読み込んだら、下の画像のように、拡張機能のアイコンをクリックします。

りこ

アラートが表示されたでしょ?
これは、気持ちが沈んだときとかに、上のアイコンをクリックするだけで、ちょっと元気がでる拡張機能よ

R

え……りこ師匠って、気持ちが沈むことなんてあるんですか?
だってゴリラ……じゃなくて、りこ師匠ですよ

りこ

てめぇ、バンジージャンプをロープなしでやるか!? (殴

R

ぎぇぇぇっ! ロープブレイク!

ツールチップのアイコンを変更する

つづいて、ツールチップのアイコンを変更してみます。
表示したいアイコンの画像を用意したら、今回は、imagesディレクトリに保存しました。

chrome-extensions/
|-- images/
|   |-- icon16.png
|   |-- icon24.png
|   `-- icon32.png
|-- alert.js
`-- manifest.json

アイコンはそれぞれ、16×16、24×24、32×32、(pixel)で作成しました。

これらの画像を読み込むには、manifest.jsonに、以下のように追加します。

manifest.json

{
	"name": "元気が出るスイッチ",
	"manifest_version": 3,
	"version": "0.1",
	"permissions": ["activeTab","scripting"],
	"background": {
		"service_worker": "alert.js"
	},
	"action": {
		"default_icon": {
			"16": "images/icon16.png",
			"24": "images/icon24.png",
			"32": "images/icon32.png"
		}
	}
}

拡張機能を変更したら、chromeで機能を更新する必要があります。

これで、アイコンを変更することができます。

ポップアップ画面の作成

つづいて、ポップアップ画面を作成してみましょう。

りこ

やっぱりアイコンをクリックしたときは、ポップアップ画面を出したほうが拡張機能っぽいわよね!

R

えっと、ポップアップってのは、どういうものですか?

りこ

こんなかんじの画面を表示したいの

R

なるほど、拡張機能っぽい!

りこ

この「ちょっと気持ちが沈んできたよ」っていうボタンをクリックしたときに、元気が出るアラートが表示されるようにするわ

今回使用したいのは、にっこりマークの画像(images/face.png)と、ポップアップ画面を作るHTML(popup.html)、さらにそのレイアウトを整えるCSS(popup.css)と、アラートを表示するためのJavaScript(alert.js)です。

chrome-extensions/
|-- images/
|   |-- face.png
|   |-- icon16.png
|   |-- icon24.png
|   `-- icon32.png
|-- alert.js
|-- popup.css
|-- popup.html
`-- manifest.json

manifest.jsonは以下のようにします。

manifest.json

{
	"name": "元気が出るスイッチ",
	"manifest_version": 3,
	"version": "0.1",
	"action": {
		"default_icon": {
			"16": "images/icon16.png",
			"24": "images/icon24.png",
			"32": "images/icon32.png"
		},
		"default_popup": "popup.html"
	}
}

11行目でHTMLファイルを読み込んでおり、これがポップアップの画面になります。
またJavaScriptはpopup.htmlから呼び出すので、"permissions"の項目は削除しました。

popup.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>元気が出るスイッチ</title>
	<link rel="stylesheet" href="popup.css">
</head>
<body>
	<h1>元気が出るスイッチ</h1>
	<img src="images/face.png">
	<button type="button" id="alertButton">ちょっと気持ちが沈んできたよ</button>
	<script src="alert.js"></script>
</body>
</html>

さらにレイアウトを整えるためのCSSも作成しておきます。

popup.css

body {
	min-width: 300px;
}

img {
	width: 100%;
}

alert.js

function showAlert() {
    alert("今日も楽しく開発しよう!");
}
document.getElementById("alertButton").onclick = function() {
	showAlert();
};
りこ

拡張機能を更新したあと、アイコンをクリックして、こんなふうに表示されたら成功よ
あ、あとボタンをクリックしたときに、ちゃんとアラートが表示されるかも確認しておいてね

「ちょっと気持ちが沈んできたよ」のボタンをクリックすると、次のようなアラートが表示されます。

りこ

ここに表示されるテキストは、自分にとって元気が出る言葉に変更してもいいわね

R

ふむふむ。「明日こそ、りこ師匠をけちょんけちょんにするぞー」とかですかね

R

しまった、考えていることが口から出てしまった……違うんです、明日じゃなくて、十年後ぐらいには……

りこ

てめぇ、パラシュートをパラシュートなしでやるか! (殴

R

ぎえぇぇぇっ! 元気が出るスイッチください!

まとめ

今回はChromeの拡張機能を自作する方法を紹介しました。

Chromeの拡張機能を自作することができれば、ちょっとした便利な機能を追加したり、Webサイトを見るときにそのサイトを自分好みにカスタマイズして表示したりと、さまざまなことができるようになります。

今回紹介した「元気が出るスイッチ」も、画像を変更したり、いろんな言葉をランダムに表示したりと、カスタマイズ次第で、もっと元気になれるものが作れると思います。

ぜひ、お試しください。

スポンサードリンク

関連コンテンツ

オススメ記事

Pug

PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

【Unity】開発したゲームをAndroidで実機テストする方法

こんにちは。現在、最新ゲーム熱意製作中の@It_is_Rです。 さて、今回はUnityで開発したゲームをAndroidで実機テストする方法です。Unity上で再生したときは動いていたゲームも、

pipenvの使い方。MacにPython環境を構築する方法

みなさんこんにちは。@It_is_Rです。今回はpipenvを使って、MacにPython環境を構築する方法を紹介します。 pipenvとは pipenvは、Pythonでの開発

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

マップ上をキャラが移動できるようにしよう!

【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回は、JavaScriptでのマップの作り方を紹介《しょうかい》しました。しかし、まだマップを配置《はいち》しただけで

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です