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

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

ぜひ、お試しください。

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの最強カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法

webpackを使うと、JavaScriptをまとめることができて便利です。しかし、webpackにはたくさんの機能があり、パッケージをインストールすることで、様々な機能が使えるようになります。

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

gulp

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回はgulp4の使い方を、インストールか

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

今回も、小学生からのScratch《スクラッチ》入門、はじめていきます。 前回、「Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門」では、Scratchを使ってシ

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

M1 Mac対応。DockerでWordPress開発環境を構築する方法

みなさんこんにちは。@It_is_Rです。 ローカルにWordPressの開発環境を作りたいとき、Dockerを使うと、とても簡単に構築することができます。しかし、実際に運営しているWordP

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

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

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