LoginSignup
0
1

chrome拡張機能作り方

Last updated at Posted at 2023-10-03

manifest.json作成

まずフォルダを作成します(名前何でも良し)
そこの中に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を作成し開きます。
そしてこう入れます。

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/
に行って
まずデベロッパーモードのスイッチをオンにします。
Screenshot 2023-10-06 07.27.45.png
その次に上に
Screenshot 2023-10-06 07.28.31.png
これがあるのでこれを押してフォルダのインポートをします。
そうすると追加されるはずです

次の記事

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1