【文系でもできる】Chrome拡張機能の作り方

10666 ワード
google Chrome 拡張機能 初心者 Manifest Chrome テキストリンク

はじめに

この記事で作る拡張機能は入門レベルになっており、対象者は拡張機能を作ったことが無い・プログラミング初心者です。
簡単なので良いから、とりあえず拡張機能を作りたい！という方にはおすすめです。

今回作るChrome拡張機能

今回はChromeで開いているタブを一番左の1つを残して全て消す、というシンプルな拡張機能を作ります。

実行タイミングはアイコンをクリックした時にするので、かなり理解しやすいと思います。

前提知識

この記事ではコードをコピペするだけでも拡張機能を1つ作成することができます。
しかし、より詳しく理解するためには

  • Javascript
  • 画像の作り方
    などを触った経験があるとベターです。

拡張機能とは

拡張機能とは、ブラウザ上で使える便利ツールです。言葉で説明するよりも実際に使ってみた方が理解しやすいと思うので、いくつか紹介します。
僕が作った拡張機能ではありませんが、とても便利なので、ぜひ使ってみてください。1つ目はPCでYoutubeなどの動画をバックグランド再生してくれます。2つ目はサイト上でクリックしたら色を自動取得してくれる拡張機能です。

このように拡張機能とは、本来のアプリケーションの機能を更に充実させるためのものです。今回はChrome拡張機能を作るので、ブラウザはChromeにしてください！

概要を把握したところで、実際に作る流れを説明していきます。

Chrome拡張機能を作る流れ

全体像をつかむために拡張機能を作る流れを説明します。

①Chrome拡張機能のタイプを決める

最初は拡張機能のタイプを決めます。

今回はChromeの右上にあるアイコンをクリックしたタイミングで実行する拡張機能を作ります！

他のタイプについて詳しい説明はここではしませんが、興味のある方はこちらの記事をご覧ください。

②必須ファイルの作成

Chrome拡張機能を作る際は最低2つのファイルが必要になります。

  • manifest.json
  • jsファイル

の2つです。

ここから実際に手を動かして拡張機能を作っていきましょう。

【manifest.json】の中身

manifest.jsonは拡張機能の設定を行うファイルになります。これが無いと拡張機能は作れません。

それではまず、拡張機能用のフォルダを1つ作成してください。名前はなんでもOKです。

そして、その中にmanifest.jsonとアイコン用の画像を作成してください。

それでは、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】の中身

ソースコードです。

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さんの勉強会のおかげで拡張機能を作ることができました！本当に感謝です！

参考