ブラウザ拡張機能の作り方を徹底解説【サンプルプロジェクト付き】

この記事では、ブラウザ拡張機能とは何か、どのように動作するのか、そして自分でオリジナルの拡張機能を作る方法について解説します。

記事の最後には、実際に「ワンクリックでコードスニペットをクリップボードにコピーできる」拡張機能を作成します。とても楽しい内容ですよ!

この記事を読み進めるには、以下が必要です。

• JavaScriptの基本的な知識
• Firefoxブラウザ(他のブラウザでも可)

ブラウザ拡張機能とは?

ブラウザ拡張機能とは、ブラウザに追加することでその機能を拡張し、閲覧体験を向上させるツールのことです。

例えば、デバイスにインストールした広告ブロッカーを思い浮かべてください。Webを閲覧する際に広告をブロックすることで、快適なブラウジングを実現してくれます。

基本的なブラウザ拡張機能の作り方

それでは、ごくシンプルな拡張機能の作成から始めましょう。

まず、フォルダを作成し、その中に manifest.json という名前のファイルを作ります。

マニフェストファイルとは?

マニフェストファイルは、あらゆるブラウザ拡張機能に必須のファイルです。このファイルには、拡張機能の名前やバージョンなどの基本情報が含まれています。

manifest.json ファイルに以下のコードを記述してください。

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "Test"
}

拡張機能ファイルを読み込む方法

Firefoxユーザーの場合は、次の手順に従ってください。

アドレスバーに以下を入力します。

about:debugging#/runtime/this-firefox

「一時的なアドオンを読み込む(Load Temporary Add-on)」というオプションが表示されるので、それをクリックし、ディレクトリ内の manifest.json ファイルを選択します。

Chromeユーザーの場合は、アドレスバーに以下を入力します。

chrome://extensions

• デベロッパーモードを有効にします。
• 「パッケージ化されていない拡張機能を読み込む(Load unpacked)」ボタンをクリックし、拡張機能のディレクトリを選択します。

これで拡張機能のインストールは完了です!ただし、現時点ではまだ何も動作しません。次に、拡張機能に機能を追加していきましょう。そのために、manifest.json ファイルを以下のように編集します。

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "Test",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["main.js"]
    }
  ]
}

上記のコードでは、manifest.json にコンテンツスクリプトを追加しました。コンテンツスクリプトを使うと、WebページのDOM(ドキュメントオブジェクトモデル)を操作できます。つまり、JavaScript(CSSも)をWebページに注入できるのです。

"matches" には、コンテンツスクリプトを適用するドメインとサブドメインのリストを指定し、"js" には読み込むJSファイルの配列を指定します。

次に、同じディレクトリ内に main.js ファイルを作成し、以下のコードを追加します。

alert("テスト拡張機能が起動しました")

拡張機能を再読み込みして、任意のURLにアクセスすると、アラートメッセージが表示されます。

コードを編集したら、必ず拡張機能を再読み込みすることを忘れないでください。

ブラウザ拡張機能のカスタマイズ方法

ここからは、もう少し面白いことをしてみましょう。

今回作るのは、訪問したWebページ上のすべての画像を、自分が選んだ画像に置き換える拡張機能です。

そのためには、現在のディレクトリに任意の画像を追加し、main.js を以下のように変更します。

console.log("拡張機能が起動しました");

var images = document.getElementsByTagName('img')

for (elt of images){
   elt.src = `${browser.runtime.getURL("pp.jpg")}`
   elt.alt = '代替テキスト'
}

ここで何が行われているのか、順番に見ていきましょう。

var images = document.getElementsByTagName('img')

この行では、Webページ内のすべての img タグ要素を選択しています。

その後、forループで画像の配列を処理し、runtime.getURL 関数を使って、すべての img 要素の src 属性をURLに置き換えています。

ここでの pp.jpg は、筆者の環境におけるカレントディレクトリ内の画像ファイル名です。

コンテンツスクリプトに pp.jpg ファイルを認識させるため、manifest.json を以下のように編集します。

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "Test",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["main.js"]
    }
  ],
  "web_accessible_resources": [
    "pp.jpg"
  ]
}

あとは拡張機能を再読み込みして、好きなURLにアクセスしてみてください。すべての画像が、作業ディレクトリ内の画像に置き換わっているはずです。

拡張機能にアイコンを追加する方法

manifest.json ファイルに以下のコードを追加します。

"icons": {
  "48": "icon-48.png",
  "96": "icon-96.png"
}

拡張機能にツールバーボタンを追加する方法

次に、ブラウザのツールバーに配置されるボタンを追加します。ユーザーはこのボタンを通じて拡張機能とやり取りできます。

ツールバーボタンを追加するには、manifest.json に以下の行を追記します。

"browser_action": {
  "default_icon": {
    "19": "icon-19.png",
    "38": "icon-38.png"
  }
}

すべての画像ファイルはカレントディレクトリに配置しておいてください。

拡張機能を再読み込みすると、ブラウザのツールバーに拡張機能のアイコンが表示されるはずです。

ツールバーボタンにイベントリスナーを追加する方法

ユーザーがボタンをクリックしたときに何かを実行したい場合もあるでしょう。例えば、ボタンがクリックされるたびに新しいタブを開きたいとしましょう。

そのために、再び manifest.json に以下を追加します。

"background": {
  "scripts": ["background.js"]
},
"permissions": [
  "tabs"
]

次に、作業ディレクトリに background.js という名前の新規ファイルを作成し、以下のコードを記述します。

function openTab(){
  var newTab = browser.tabs.create({
    url: 'https://twitter.com/abhilekh_gautam',
    active: true
  })
}

browser.browserAction.onClicked.addListener(openTab)

さあ、拡張機能を再読み込みしましょう!

ボタンがクリックされると openTab 関数が呼び出され、TwitterプロフィールへのリンクURLを持つ新しいタブが開きます。また、active キーを true に設定すると、新しく作成されたタブが現在のタブになります。

なお、バックグラウンドスクリプトではブラウザが提供するAPIを使用できます。APIの詳細については、「JavaScript APIs」に関する記事を参照してください。

これでブラウザ拡張機能の基本が身についたので、次は開発者の日常で役立つ拡張機能を作ってみましょう。

最終プロジェクト

それでは、日常的に役立つものを作りましょう。StackOverflowのコードスニペットをワンクリックでコピーできる拡張機能を作成します。この拡張機能は、Webページに「Copy」ボタンを追加し、クリックするとコードがクリップボードにコピーされます。

デモ

まず、新しいフォルダを作成し、その中に manifest.json ファイルを追加します。

ファイルに以下のコードを記述してください。

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "copy code",
  "content_scripts": [
    {
      "matches": ["*://*.stackoverflow.com/*"],
      "js": ["main.js"]
    }
  ]
}

コンテンツスクリプト内の matches に注目してください。この拡張機能は、StackOverflowのドメインとサブドメインでのみ動作するように設定されています。

次に、同じディレクトリに main.js というJavaScriptファイルを作成し、以下のコードを追加します。

var arr = document.getElementsByClassName("s-code-block")

for(let i = 0 ; i < arr.length ; i++){
  var btn = document.createElement("button")
  btn.classList.add("copy_code_button")
  btn.appendChild(document.createTextNode("Copy"))
  arr[i].appendChild(btn)
  // ボタンのスタイリング
  btn.style.position = "relative"

  if(arr[i].scrollWidth === arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetHeight)
    btn.style.left = `${arr[i].offsetWidth - 70}px`
  else if(arr[i].scrollWidth != arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetWidth)
    btn.style.left = `${arr[i].offsetWidth - 200}px`
  else
    btn.style.left = `${arr[i].offsetWidth - 150}px`

  if(arr[i].scrollHeight === arr[i].offsetHeight)
    btn.style.bottom = `${arr[i].offsetHeight - 50}px`
  else
    btn.style.bottom = `${arr[i].scrollHeight - 50}px`
  // スタイリング終了

  console.log("Appended")
}

まず、クラス名 s-code-block を持つすべての要素を選択しています。なぜかというと、StackOverflowのサイトを検証したところ、すべてのコードスニペットがこのクラス名の要素内に格納されていたからです。

その後、これらの要素をループ処理し、各要素にボタンを追加しています。最後に、ボタンの位置とスタイルを適切に調整しています(スタイリングはまだ完璧ではありませんが、まずは第一歩として)。

先ほどの手順で拡張機能を読み込み、StackOverflowにアクセスすると、コピーボタンが表示されるはずです。

ボタンに機能を追加する方法

次に、ボタンがクリックされたら、スニペット全体がクリップボードにコピーされるようにします。そのために、main.js に以下のコードを追加します。

var button = document.querySelectorAll(".copy_code_button")
button.forEach((elm)=>{
  elm.addEventListener('click',(e)=>{
    navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)
    alert("Copied to Clipboard")
  })
})

まず、querySelectorAll を使ってサイトに追加したすべてのボタンを選択します。そして、ボタンがクリックされたときのクリックイベントを監視します。

navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)

上記の行で、コードがクリップボードにコピーされます。スニペットがコピーされるたびに、「Copied to Clipboard」というメッセージでユーザーに通知し、これで完成です。

まとめ

Web拡張機能はさまざまな場面で活用できます。この記事を通じて、皆さんも自分だけの拡張機能を作れるようになったと思います。

すべてのコードはGitHubリポジトリで公開しています。より良いスタイリングや、クリップボード履歴などの新機能を思いついたら、ぜひプルリクエストを送ってください。

Happy Coding!