プロフィール

Extrose
2002年頃から電脳海にいる。制作ペースは激減したものの今でも現役の作曲者(自称)であり、機会があればBMSも作る。が、最近はVを被ってゲーム実況に勤しんでいる。興味があるものになんでも手を出すのでかなりの趣味を抱えている。

柊雷夜
ユーチューブ地方で見かけるVのすがた (↑)。たまに VRChat にも出る。 VRoid Studio 製。

リリース

個人活動

実績(依頼など)

読み物

[Chromium(Google Chrome/Edge他) 拡張機能開発] - 拡張機能を開発する (Hello world)

概要

拡張機能開発の入門として、「Hello world」を表示する拡張機能を開発する

ファイル構成

ルート/
+ manifest.json
+ popup.html

必要なのはこの2ファイル

記述

manifest.json

{
  "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "これはHello worldを表示するだけの拡張機能です。",
  "action": {
    "default_popup": "popup.html"
  }
}

項目	説明
manifest_version	2025/6/6 時点は 3 固定、拡張機能のフォーマットのバージョン
name	拡張機能名
version	この拡張機能のバージョン、何でも良い
description	拡張機能の説明
action	拡張機能の動作に関するブロック
default_popup	拡張機能をクリックしたときに表示される

popup.html

<!DOCTYPE html>
<html>
 <head>
   <title>Hello World</title>
 </head>
 <body>
   Hello, world!
 </body>
</html>

モーダルウィンドウはHTMLによって定義する
この書き方は通常のHTMLと変わらない
スタイルシートも通用する

開発中の拡張機能を使う方法

Chromium において設定項目名はしょっちゅう変わるので、使用しているバージョンで該当する項目を探して同様の操作を行う

拡張機能の管理 (edge://extensions/) を開く
開発者モードをオン
「展開して読み込み」(Edge 2025/6/6時点の表現)を押す
フォルダ選択画面が開くので、プロジェクトフォルダ(正確にはmanifest.jsonが置いてあるフォルダ)を開く

実行結果

スクリーンショット

拡張機能を追加すると拡張機能欄にアイコンが表示されるので、それをクリックする
すると、popup.html が表示される

Stoic Sounds 元はExtroseが運営する個人サイト名