とほほのChrome拡張機能開発入門

Chrome の拡張機能を開発する手順について説明します。まずは、拡張機能が実行されたらポップアップを表示するだけのものを作成してみます。下記のフォルダとファイルを作成します。

 my-extension
   manifest.json
   popup.html

manifest.json

{
  "name": "My Extension",
  "description": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html>
<body>
  <h1>Hello world!</h1>
</body>
</html>

Chrome で chrome://extensions を開き、[パッケージ化されていない拡張機能を読み込む] から上記で作成した my-extension フォルダを指定して読み込みます。Chrome の画面上部の [拡張機能] のアイコンから [My Extension] を実行すると「Hello world!!」というポップアップメッセージが表示されれば成功です。拡張機能は、メニューバーにピン止めすることも可能です。

ショートカットキーを設定する

拡張機能を実行するためのショートカットキーを設定します。manifest.json に下記を追加してください。

manifest.json

  "action": {
    "default_popup": "popup.html"
  }, ← カンマ(,)を追加
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+H",
        "mac": "MacCtrl+Shift+H"
      },
      "description": "Run extension."
    }
  }
}

manifest.json を変更したので、拡張機能管理画面で [更新] を行ってください。キーボードから Ctrl+Shift+H を押すことでポップアップが表示されるようになります。

アイコンを設定する

拡張機能を実行する際のアイコンを表示するには、16x16 の画像ファイル(my-extension.png)を用意し、manifest.json に下記を追加します。

manifest.json

  "action": {
    "default_popup": "popup.html", ← カンマ(,)を追加
    "default_icon": "my-extension.png"
  },

manifest.json を変更したので、拡張機能管理画面で [更新] を行うことでアイコンが反映されます。

スクリプトを実行する

表示しているタブに対してスクリプトを実行してみます。manifest.json に下記を追加し、タブへのアクセスとスクリプトの実行を許可します。

manifest.json

  "manifest_version": 3,
  "permissions": ["activeTab", "scripting"],
  "action": {

popup.html の内容を下記に変更します。

popup.html

<!DOCTYPE html>
<html>
<body>
  <button id="btn">Run</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js を作成します。非同期関数 tabs.query() で現在のタブ情報を取得し、得られたタブに対して onRun() 関数を実行します。

popup.js

document.getElementById("btn").addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: onRun,
  });
});

function onRun() {
  document.body.style.backgroundColor = "#fcc";
}

manifest.json を変更したので、拡張機能管理画面で [更新] を行ってください。拡張機能のポップアップから [Run] ボタンを押すと、ページの背景色が変われば成功です。

オプション設定画面

拡張機能のオプション設定画面を追加します。オプション情報はストレージに格納するので、ストレージに対するアクセス権も設定します。manifest.json に下記を追加してください。

manifest.json

  "permissions": ["activeTab", "scripting", "storage"],
  "options_page": "options.html",
  "action": {

options.html を下記の内容で作成してください。

options.html

<!DOCTYPE html>
<html>
<style>
.color {
  width: 4rem;
  height: 3rem;
  margin: .5rem;
  color: #666;
  border: 0;
}
</style>
<body>
  <h1>Options</h1>
  <div>
    <button class="color" style="background: #fcc">Pink</button>
    <button class="color" style="background: #cfc">Green</button>
    <button class="color" style="background: #ccf">Blue</button>
  </div>
  <div id="msg"></div>
  <script src="options.js"></script>
</body>
</html>

options.js を下記の内容で作成してください。色ボタンが押されたときに色情報などのオプション情報をストレージに格納します。

options.js

document.querySelectorAll(".color").forEach((elm) => {
  elm.addEventListener("click", (e) => {
    var options = {
      colorValue: e.target.style.backgroundColor,
      colorName: e.target.innerText
    }
    chrome.storage.sync.set(options);
    document.querySelector("#msg").innerText = `Set color to ${options.colorName}.`;
  });
});

popup.js を下記の様に修正してください。ストレージからオプション情報を読み取り、背景色を変更します。

popup.js

function onRun() {
  chrome.storage.sync.get(null, (options) => {
    document.body.style.backgroundColor = options.colorValue;
  });
}

拡張機能を更新し、拡張機能のアイコンを右クリックして [オプション] を実行すると、オプション設定画面が表示されます。色を選択するとストレージに色情報が格納されます。拡張機能実行時にストレージから色情報を読み出して設定します。