Chrome拡張機能でbackground.jsの処理を実行する方法３つ

## はじめに

Chrome拡張機能を開発する時に、`background.js`ってどうやって実行するんだっけ？とよく忘れるため、備忘録も兼ねて３つご紹介します。manifestバージョン３で実際に動作するリポジトリを公開しておきます。ダウンロードしてChromeの拡張機能ページから読み込めば動作するので試してみてください。

## background.jsの実行の確認方法

Chromeの拡張機能ページの`Service Worder`のリンクをクリックするとDevToolsが表示されます。`background.js`が実行されると、このコンソールにログが表示されます。

![スクリーンショット 2023-09-27 17.42.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125523/6b562242-1676-c241-564b-d9f73f39cdcb.png)

![スクリーンショット 2023-09-27 17.38.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125523/498aabf9-960f-6a03-2b29-2456569283cb.png)


## 拡張機能のアイコンをクリック

Chromeブラウザの右上にある拡張機能アイコンのクリックで`background.js`を実行する方法です。３つの方法の中では一番簡単でコードの行数も少ないため、動作テストするだけならおすすめです。

### リポジトリ

https://github.com/mori-goq/chrome-extention-click-icon

### コード

```javascript:background.js
// 拡張機能のアイコンがクリックされたら実行
chrome.action.onClicked.addListener(() => {
  console.log('拡張機能のアイコンがクリックされました')
})
```

`"action": {}`は空オブジェクトですが、アイコンがクリックされたことを知らせるために必要です。

```json:manifest.json
{
  "name": "Chrome Extention Click Icon",
  "version": "1.0",
  "manifest_version": 3,
  "background" : {
      "service_worker" : "background.js"
  },
  "action": {}
}
```

## コンテキストメニューをクリック

ページの右クリックで出るメニューのクリックで`background.js`を実行する方法です。コンテキストメニューに新しいメニューを追加して、そのメニューをクリックすることで実行できます。

### リポジトリ

https://github.com/mori-goq/chrome-extention-contextmenus

### コード

```javascript:background.js
// 拡張機能をインストールした時に１度だけ実行
chrome.runtime.onInstalled.addListener(() => {
  // コンテキストメニューを追加
  chrome.contextMenus.create({
    id: 'custom-context-menu',
    title: 'カスタムコンテキストメニュー',
    contexts: ['all'],
  })
})

// コンテキストメニューのメニューをクリックしたら実行
chrome.contextMenus.onClicked.addListener((info) => {
  if (info.menuItemId === 'custom-context-menu') {
    console.log('カスタムコンテキストメニューがクリックされました。')
  }
})
```

```json:manifest.json
{
  "name": "Chrome Extention Contextmenus",
  "version": "1.0",
  "manifest_version": 3,
  "background" : {
      "service_worker" : "background.js"
  },
  "permissions": ["contextMenus"]
}
```

## `contentscript.js`からメッセージを送る

`contentscript.js`からメッセージを送って`background.js`を実行する方法です。逆に`background.js`からメッセージを送って`contentscript.js`を実行する処理も書いているので合わせてご確認ください。

### リポジトリ

https://github.com/mori-goq/chrome-extention-send-message

### コード

```javascript:contentscript.js
// background.jsにメッセージを送信
chrome.runtime.sendMessage({
  message: 'contextscript.jsからbackground.jsに送るメッセージ',
})

// メッセージが受信された時に実行する処理
chrome.runtime.onMessage.addListener((message) => {
  console.log(message.message)
})
```

```javascript:background.js
// メッセージが受信された時に実行する処理
chrome.runtime.onMessage.addListener((message, sender) => {
  console.log(message.message)

  const tabId = sender.tab.id

  if (tabId) {
    // contextscript.jsにメッセージを送信
    chrome.tabs.sendMessage(tabId, {
      message: 'background.jsからcontextscript.jsに送るメッセージ',
    })
  }
})
```

```json:manifest.json
{
  "name": "Chrome Extention Send Message",
  "version": "1.0",
  "manifest_version": 3,
  "background" : {
      "service_worker" : "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentscript.js"]
    }
  ]
}
```

## まとめ

Chrome拡張機能で`background.js`の処理を実行する方法を３つご紹介しました。どの方法でも`background.js`は実行できますが、それぞれ`manifest.json`の設定が異なるため注意が必要です。

## 最後に

### GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。

https://goqsystem.recruit.site?qiita=faa217531ec9ec1ccaa9