はじめに
この記事で作る拡張機能は入門レベルになっており、対象者は拡張機能を作ったことが無い・プログラミング初心者です。
簡単なので良いから、とりあえず拡張機能を作りたい！という方におすすめです。
今回作るChrome拡張機能
今回はChromeで開いているタブを一番左の1つを残して全て閉じる、という拡張機能を作ります。
拡張機能開発のはじめの一歩としておすすめです。
前提知識
この記事ではコードをコピペするだけでも拡張機能を1つ作成することができます。
プログラミング経験がある方には簡単な内容になっていると思います。
拡張機能とは
拡張機能とは、ブラウザ上で使える便利ツールです。言葉で説明するよりも実際に使ってみた方が理解しやすいので、実例を紹介します。
とても便利なのでぜひ使ってみてください。1つ目はPCでYoutubeなどの動画をバックグランド再生してくれます。
2つ目はサイト上でクリックしたら色を自動取得してくれる拡張機能です。
このように拡張機能とは、本来のアプリケーションの機能を更に充実させるためのものです。
概要を把握したところで、実際に拡張機能を作っていきましょう。
Chrome拡張機能を作る流れ
全体像をつかむために流れを説明します。
①Chrome拡張機能のタイプを決める
最初は拡張機能のタイプを決めます。
今回はChromeの右上にあるアイコンをクリックしたタイミングで実行する拡張機能を作ります！
他のタイプについて詳しい説明はここではしませんが、興味のある方はこちらの記事をご覧ください。
②必須ファイルの作成
Chrome拡張機能を作る際は最低2つのファイルが必要になります。
- manifest.json
- jsファイル
の2つです。
ここから実際に手を動かして拡張機能を作っていきましょう。
【manifest.json】の中身
manifest.jsonは拡張機能の設定を行うファイルになります。これが無いと拡張機能は作れません。
それではまず、拡張機能用のフォルダを1つ作成してください。名前はなんでもOKです。
そして、その中にmanifest.jsonとアイコン用の画像を作成してください。
それでは、manifest.jsonの中身を書いていきます。
{
"name": "Sample Extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_icon": {
"16": "./extension.png"
}
},
"background": {
"service_worker": "./content.js"
},
"permissions": [
"tabs"
]
}
中身を解説していきます。
version
versionは拡張機能のバージョン設定になっています。
拡張機能は自動更新されるんですが、その際にこのバージョンが必要になります。
現在は、下記の形式がサポートされています。
- "version": "1"
- "version": "1.0"
- "version": "2.10.2"
- "version": "3.1.2.4567"
今回は1.0にしました。（バージョンの違いがよくわかっていません）正確な情報はGoogle公式ページを確認することをおすすめします。
manifest_version
これはmanifest.jsonの書き方についてのバージョンです。
現在はバージョン2とバージョン3がありますが、これから使う方は必ずバージョン3を使ってください。バージョン2は近い内にサポートが終了するようです。
バージョン2と3では書き方がかなり違うので、バージョン2で書かれた過去の記事などを参考にしないように気を付けてください。
action
ここでは拡張機能のアイコンファイルを指定しています。
default_iconのextension.pngは拡張機能のアイコンになるので、自分で変更してください。
background
backgroundのservice_workerにプログラムを書いたjsファイルを指定います。
permission
permissionではChrome拡張機能を作る上で許可する動作を設定します。今回はChromeのタブを消すため、tabsを設定しておきます。
【content.js】の中身
ソースコードです。
// 拡張機能アイコンがクリックされたら実行
chrome.action.onClicked.addListener(() => {
// 左端を残して全てのタブを消す
function deleting(pages) {
const len = pages.length - 1
for(let i = len; i > 0; i--){
chrome.tabs.remove(tabId[i].id)
}
}
// エラー起きてたらメッセージ出力
function onError(error) {
console.log(`エラーメッセージ： ${error}`);
}
// currentWindow：アクティブウィンドウ上のみ実行
const queries = chrome.tabs.query({currentWindow: true})
queries.then(deleting, onError)
})
簡単に流れを説明します。
-
chrome.action.onClicked.addListenerでアイコンがクリックされた時に中身のコードが実行される - chrome.tabs.queryで全てのタブを取得
- deleting関数実行でタブが削除される
という流れです。
実際に使ってみましょう。
③Chromeにアップしてテスト
現在のフォルダの中身はこのようになっているはずです。
それではChromeで使ってみましょう。
ここをクリックして、「拡張機能を管理」をクリックしてください。
開いたら、パッケージ化されていない拡張機能を読み込むとあるので、そこをクリックしてください。
そして、フォルダをアップロードします。
ここまでいけば後は作った拡張機能をピンしてクリックすれば、実行されるはずです。
※タブが消えるので注意
実際に拡張機能を他の人でも使えるようにするためには、もう少し作業が必要です。今回は細かい設定などは全て省いて必須項目だけに絞って説明してきました。
公開する方法は他の方の記事を参考にしてみてください。
初めて自分の作った拡張機能が動いた瞬間はとても感動しました。この記事がみなさんの助けになっていれば嬉しいです。
cti1650さんの勉強会のおかげで拡張機能を作ることができました！本当に感謝です！