Tadashi Aikawa

Chrome拡張に必要な最低限のファイル

manifest.json

{
  "manifest_version": 3,
  "name": "Sample Chrome Extension",
  "description": "Sample of the Chrome Extension",
  "version": "0.1.0"
}

インストールしてみよう

1. sample-chrome-extension ディレクトリを作成する
2. 先ほどの manifest.json を sample-chrome-extension の中に作成

Google Chrome のアドレスバーに chrome://extensions と入力してEnter

パッケージ化されていない拡張機能を読み込む から先ほど作成したディレクトリを選択

追加されていれば成功です

必要なもの

CSSファイルの作成

sample-chrome-extension の中に main.css を作成します。

* {
  color: red !important;
}

すべてのWebページでCSSを適応

manifest.json を編集します。

{
  "manifest_version": 3,
  "name": "Sample Chrome Extension",
  "description": "Sample of the Chrome Extension",
  "version": "0.1.0",
  "content_scripts": [ // コレを追加
    {
      "matches": ["<all_urls>"], // すべてのURL(Webページ)で読み込む
      "css": ["main.css"]        // さきほど作成したCSSファイルを
    }
  ]
}

『拡張のリロード』と『ページのリロード』を忘れずに

chrome://extensions から ボタンを押して 拡張をリロード します。

その後 ブラウザの任意の ページをリロードする と...

特定のページだけに適応させたい

manifest.json で適当するサイトのURLを設定します。

{
  "manifest_version": 3,
  "name": "Sample Chrome Extension",
  "description": "Sample of the Chrome Extension",
  "version": "0.1.0",
  "content_scripts": [
    {
      "matches": ["https://minerva.mamansoft.net/*"], // <all_urls> から具体的なURLのパターンに変更
      "css": ["main.css"]
    }
  ]
}

この拡張で行う2つのこと

• ページの右上にボタンを設置する
• ボタンを押したときページリンクテキストを作成してコピーする

必要なもの

JavaScriptファイルの作成

ボタン要素の作成と押したときの挙動を main.js に書きます。

const button = document.createElement("button");             // ボタン要素を作成

button.textContent = "ページリンクコピー";                      // ボタンに表示する文字列をセット
button.className = "copy-button";                            // ボタンのクラスをセット(CSSで使います)
button.addEventListener("click", async () => {               // ボタンが押されたときの処理をセット
  const title = document.querySelector("title").innerText;   // ページのタイトルを取得
  const url = window.location.href;                          // ページのURLを取得

  await navigator.clipboard.writeText(`[${title}](${url})`); // Markdownのリンク形式でクリップボードに登録

  alert(`リンクをコピーしました！\n${title}\n${url}`);           // コピー成功メッセージ
});

document.querySelector("body").appendChild(button);          // ボタンをページに追加

CSSファイルの編集

ボタンを画面右上に常に表示する設定を main.css に書きます。

.copy-button {
  position: absolute;  /* ページ内の絶対座標で位置を指定 */
  top: 8px;            /* 上から8pxの位置 */
  right: 16px;         /* 右端から16pxの位置 */

  cursor: pointer;     /* カーソルがあたったらポインタアイコンを表示 */

  z-index: 10000;      /* どの要素よりも手前に表示 */
}

manifest.jsonの編集

main.js を main.css 同様に読み込み対象へ追加します。

{
  "manifest_version": 3,
  "name": "Sample Chrome Extension",
  "description": "Sample of the Chrome Extension",
  "version": "0.1.0",
  "content_scripts": [
    {
      "matches": ["https://minerva.mamansoft.net/*"],
      "css": ["main.css"],
      "js": ["main.js"] // コレを追加
    }
  ]
}

リロードしてサイトにアクセスしてみると...

開発のヒント Chrome devtoolsを使おう

• ちょっとした便利ツールをつくってみたけどデプロイ先がない

• ちょっとした便利ツールをつくってみたけどデプロイ先がない
• デプロイ先は見つかった...けどCORSに悩まされる
  • かといってサーバー立てたくはない(サーバーレス含む)

• ちょっとした便利ツールをつくってみたけどデプロイ先がない
• デプロイ先は見つかった...けどCORSに悩まされる
  • かといってサーバー立てたくはない(サーバーレス含む)
• ElectronやTauriでクロスプラットフォーム対応バイナリつくる?
  • 面倒くさそうだしバイナリサイズ大きくなりそう...

• ちょっとした便利ツールをつくってみたけどデプロイ先がない
• デプロイ先は見つかった...けどCORSに悩まされる
  • かといってサーバー立てたくはない(サーバーレス含む)
• ElectronやTauriでクロスプラットフォーム対応バイナリつくる?
  • 面倒くさそうだしバイナリサイズ大きくなりそう...
• みんなにNode.jsやDeno入れてもらって起動コマンドを実行してもらって...
  • 開発者以外の人がそんなことするわけないじゃないか

• ちょっとした便利ツールをつくってみたけどデプロイ先がない
• デプロイ先は見つかった...けどCORSに悩まされる
  • かといってサーバー立てたくはない(サーバーレス含む)
• ElectronやTauriでクロスプラットフォーム対応バイナリつくる?
  • 面倒くさそうだしバイナリサイズ大きくなりそう...
• みんなにNode.jsやDeno入れてもらって起動コマンドを実行してもらって...
  • 開発者以外の人がそんなことするわけないじゃないか
• Chrome拡張ならなんとかなるのでは...!?
  • 今さら JavaScript/HTML/CSS の世界に戻れないよ

• ちょっとした便利ツールをつくってみたけどデプロイ先がない
• デプロイ先は見つかった...けどCORSに悩まされる
  • かといってサーバー立てたくはない(サーバーレス含む)
• ElectronやTauriでクロスプラットフォーム対応バイナリつくる?
  • 面倒くさそうだしバイナリサイズ大きくなりそう...
• みんなにNode.jsやDeno入れてもらって起動コマンドを実行してもらって...
  • 開発者以外の人がそんなことするわけないじゃないか
• Chrome拡張ならなんとかなるのでは...!?
  • 今さら JavaScript/HTML/CSS の世界に戻れないよ
• TypeScriptとReact/Vueとかでサクっと作れればなぁ...

次世代Web拡張フレームワーク WXT

WXTのすごいところ

• 多くのブラウザをサポート
  • Chrome, Firefox, Edge, Safari, その他 Chromiumベースのブラウザに対応
• デフォルトでTypeScriptをサポート
• 主要フレームワークをサポート
  • Reacta, Vue, Svelte, Solid, ... etc
• ファイルベースのエントリポイントサポート
• ホットリロードサポート
• Viteプラグインサポート
• ルーティングサポート
• Auto-imports サポート

entrypointsが重要

まとめ

• Web初心者の方向け
  • manifest.json だけでChrome拡張はできる
  • 見た目を変えるならCSSファイルを書く
  • 操作をするならJavaScriptファイルを書く
• Web中級者以上の方向け
  • WXTを使うといつものWeb開発と同じノリでChrome拡張開発ができる