Zenn
🎉

Chrome拡張 チートシート

2024/07/30に公開
Chrome拡張
JavaScript
ServiceWorker
tech

目的

Chrome拡張は情報盗む修正が混ざりこんでることが多いとニュースで聞いて怖いから、簡単なものなら自作で対応するために作り方を調べた

参考サイト

公式

概要

最小限必要なファイルmanifest.json、service_worker.js、管理画面をポップアップするならindex.html

フォルダ構成

root
  > manifest.json
  > service_worker.js
  > index.html

manifest.json の書き方

manifest.jsonの例

manifest.json
{
  "manifest_version": 3,
  "name": "[拡張のショートカット名]",
  "description": "[拡張の説明]",
  "version": "1.0",
  "action": {
    "default_popup": "/index.html"
  },
  "background": {
    "service_worker": "/service_worker.js",
    "type": "module"
  },
  "host_permissions": ["https://google.com/*"],
  "permissions": ["background", "tabs", "storage"]
}

manifest.jsonの各フィールドの説明

  1. manifest_version とりあえず3でいい
  2. name chrome拡張の名前
  3. description chrome拡張の説明
  4. version 最初は0.1からでも
  5. action.default_popup ポップアップ表示されるhtmlのpath
  6. background.service_worker service workerとして裏で動くjsファイルのpath
  7. background.type service_workerをファイル分割するならmoduleで、ファイル分割しないなら指定しなくていい
  8. host_permissions chrome拡張が動作するurl
    https://*/*をしていするとhttpsで始まるURLはすべて対象になる
  9. permissions 使用する権限を設定する 例では バックグラウンド、タブ操作、ブラウザのストレージ操作を許可している

service_worker.js

サンプル

service_worker.js
// 別ファイルを参照する場合はimportを使用する
// import { getInterval, getIsLoading, sleep } from "./storage.js";

// サービスワーカーのインストール時に呼び出されるイベントリスナー
self.addEventListener("install", async (event) => {
  console.log("install service worker");
});

// サービスワーカーが実行可能になったらloopFunc関数を呼び出す
self.addEventListener("activate", async (event) => {
  await loopFunc();
});

async function loopFunc() {}

index.html

サンプル

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>chrome拡張サンプル</title>
    <style>
      body {
        width: 200px;
        text-align: center;
      }
      input {
        display: inline-block;
      }
      #interval {
        width: 30px;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <h1>設定</h1>
    <form id="form">
      <div>
        <label for="interval">さんぷる</label>
        <input id="sample" type="text" value="サンプル!" />
      </div>
      <button type="submit">保存！</button>
    </form>
    <!--
    <script type="module" src="popup.js"></script>
    -->
  </body>
</html>

コメント

html内でjsを呼ぶ場合はtypeにmoduleを使用するとbundlerを使用せずにjsを読み込める
moduleなのでimport文が使えます

typescriptを使うなら

chromeの型を読み込むために以下を実行する
npm i -D @types/chrome

Discussion