VSCodeを使ったオリジナルのChrome系ブラウザ拡張の作り方

WEB系開発を行っているときなどに「こんな拡張が欲しい」と思うことも多々あるかと思いますが、そんなときにVSCodeを使って手軽にオリジナルのChrome系ブラウザ拡張を作成する方法を紹介します。

また、ここでは説明していませんが、作った拡張は一般公開しなくても限定公開で社内など特定のメンバー間だけで共有するような利用も可能です。

ブラウザ拡張に限ったことではありませんが、昨今では人気のある拡張の開発者が第三者に権利を譲渡(売却)してしまい、知らぬ間にスパイウェア/マルウェア化された拡張を使い続けたことによりセキュリティインシデントを起こしてしまう事案なども多く発生していますので、拡張の導入には注意が必要です。

Chrome系ブラウザ拡張作成手順

今回はブラウザ上で拡張ボタンを押下するとブラウザに登録されているブックマークをポップアップで一覧表示するシンプルな拡張を作成します。

プロジェクト用の任意のフォルダを作成してVSCodeで開く。
※本例では作成するフォルダ名をPopupExtensionとしています。
VSCodeのExplorerで以下の3つの空ファイルを作成する。
ファイル構成:
```
PopupExtension
├manifest.json
├popup.html
└popup.js
```

手順2で作成した各ファイルに以下のコードを貼り付ける。
manifest.json:

{
"manifest_version": 3,
"name": "Popup Extension Sample",
"version": "0.0.1",
"description": "Sample extension using a popup",
"permissions": [
    "bookmarks"
],
"action": {
    "default_popup": "popup.html"
}
}

popup.html:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bookmark Viewer</title>
<style>
  body {
    width: 400px;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    margin-bottom: 5px;
  }
</style>
</head>
<body>
<h1>Your Bookmarks</h1>
<ul id="bookmarkList"></ul>
<script src="popup.js"></script>
</body>
</html>

popup.js:

document.addEventListener('DOMContentLoaded', function () {
chrome.bookmarks.getTree(function (bookmarkTreeNodes) {
const bookmarkList = document.getElementById('bookmarkList');

function addBookmarks(nodes) {
  for (const node of nodes) {
    if (node.url) {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.href = node.url;
      a.textContent = node.title;
      a.target = '_blank';
      li.appendChild(a);
      bookmarkList.appendChild(li);
    }
    if (node.children) {
      addBookmarks(node.children);
    }
  }
}

addBookmarks(bookmarkTreeNodes);
});
});

ブラウザのデベロッパーモードを有効にする。
ブラウザの拡張機能ページを開き、画面右上のデベロッパーモードをオンにします。
作成した拡張をインストールする。
拡張機能ページ左上のパッケージ化されていない拡張機能を読み込むから手順1で作成したPopupExtensionフォルダを読み込みます。
インストールした拡張の動作を確認する。
ブラウザ右上の拡張ボタンからPopup Extension拡張を選択するとポップアップにブックマーク一覧が表示されます。

デバッグ用のlaunch.jsonファイルを作成する。
.vscode/launch.jsonファイルを作成します。Configuration/urlのextensionId部分は、手順5の画面のPopup Extension拡張に表示されているID欄の値に置き換えます。
ファイル構成:

PopupExtension
├.vscode
│　└launch.json
├manifest.json
├popup.html
└popup.js

launch.json:

{
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Debug Chrome Extension",
        "url": "chrome-extension://extensionId/popup.html",
        "webRoot": "${workspaceFolder}",
        "runtimeArgs": [
            "--load-extension=${workspaceFolder}"
        ]
    }
]
}

デバッガを起動する。
VSCodeでF5キーを押下するとデバッグモードでブラウザが起動してポップアップ画面の内容が表示されます(このときブラウザのDevToolsが起動します)。
ソースコードのデバッグを行う。
VSCodeでpopup.jsファイルにブレークポイントを設定しておけば、手順8の起動時やブラウザ右上の拡張ボタンからPopup Extension拡張を選択したときにブレークポイントで処理がブレークしてデバッグを行うことができます。

参考ウェブサイトなど

Chrome Developers
マニフェストファイル形式

以上です。