chrome拡張機能作り方(簡易)

しましま猫にゃー

manifest.json作成

まずフォルダを作成します(名前何でも良し)
そこの中にmanifest.jsonを作ります。
中身

{
  "name": "サンプル",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Sample Chrome Extension",
    "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "content_scripts": [{
    "matches": ["https://www.google.com/*"],
    "js": [
      "alert.js"
    ]
  }]
}

alert.js作成

alert.jsを作成し開きます。
そしてこう入れます。

window.alert('入れたい言葉');

icon作成

好きな画像を三枚用意して1つ目は128.pngという名前で保存。
2つ目は48.pngという名前で保存。
3つ目は16.pngという名前で保存。
そして
128.pngを128×128pxにして保存。
48.pngを48×48pxにして保存。
16.pngを16×16pxにして保存。
フォルダの中にiconsというフォルダを作ります。
そして
128.pngと48.pngと16.pngをiconsフォルダに入れます。
これokです
今回の拡張機能の仕組みはgoogle.comにアクセスすると
上にアラート（ポップアップ）が出てきます。

chrome://extensions/
に行って
まずデベロッパーモードのスイッチをオンにします。

オンにする

その次に上に

 

これがあるのでこれを押してフォルダのインポートをします。
そうすると追加されるはずです

ダウンロード

次の記事

お待ちください

この記事が気に入ったらサポートをしてみませんか？