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サイトを見るときにそのサイトを自分好みにカスタマイズして表示したりと、さまざまなことができるようになります。

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

ぜひ、お試しください。

スポンサードリンク

関連コンテンツ

オススメ記事

小学生からのプログラミング入門。プログラミングってなぁに?

小学校でプログラミングを勉強しなくてはいけないことになり、「プログラミングなんてやったことないし、そもそもプログラミングってなんなんだろう」と思う方も多いのではないでしょうか。 といっても、「

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利にする方

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこで今回は、

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

みなさんこんにちは。今回もたのしくプログラミングを学んでいきましょう! 前回の「JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方」では、JavaScriptでゲームエンジ

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

コメントを残す(コメントは承認後に反映されます)

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