Chapter 02

hello world 編

gia
gia
2022.02.08に更新

とにもかくにも hello world !

必要なもの

  • エディタ
  • chrome

コードを書く

ディレクトリ構成

// ディレクトリ構成

src/
 ├ index.js
 └ lmanifest.json

alert.js

// alert.js

window.alert('hello world 🎉');

manifest.json

// manifest.json

{
  "name": "hello world",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "chrome の拡張機能",
  "content_scripts": [{
    "matches": ["https://*/*"],
    "js": [
      "alert.js"
    ]
  }]
}

chrome で拡張機能を読込む

  • 拡張機能アイコンをクリック

  • 拡張機能を管理をクリック

  • デベロッパーモードのトグルボタンを on にする
  • パッケージ化されていない拡張機能を読み込むをクリック
  • 用意したソースコードが入っている src ディレクトリを読み込む

  • src ディレクトリを選択すると、拡張機能として取り込まれる🎉

  • 拡張機能リストから hello world をピン留めすると、chrome のヘッダに表示される (べつにやらなくてもいい)

  • 適当なページでリロードすると 「hello world 🎉」 が表示される🎉🎉🎉

おつかれさまでした☕️

参考資料