もっとも単純なChrome拡張の作り方

admin

7年前

もっとも単純なChrome拡張の作り方

Chromeに色々な機能を追加できるのでつくってみよう。
Chrome拡張といっても中身はjs/html/cssファイルと普通のWebファイルと同じ(メモ帳だけで作れる)
最低限の構成は、以下の２ファイルのみ
1, manifest.json // このchrome拡張の説明書
2, hogehoge.js // したい処理を書く。ファイル名は自由

manifest.json

{
  "name": "ChromeExtensionTest",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "テスト用Chrome拡張",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["test.js"]
    }
  ]
}

{

"name": "ChromeExtensionTest",

"version": "0.0.1",

"manifest_version": 2,

"description": "テスト用Chrome拡張",

"content_scripts": [

{

"matches": [

"<all_urls>"

"js": ["test.js"]

}

]

}

manifest.jsonにはコメントが書けないので、項目を抜き出すと
name = このchrome拡張の名前
version = このchrome拡張のバージョン。自分で管理する
manifest_version = このmanifest.jsonのバージョン。2しかないので実質固定
description = 概要説明
content_scripts = 処理系の設定
matches = 処理を行うURLを正規表現で指定。全URLなら
js = 処理の本体であるJSファイル名を書く

test.js 新しいページを開く度に、helloとダイアログを出すだけの超ウザいChrome拡張

alert("hello");

1	alert("hello");

自分のchromeに導入方法
1, 好きな場所(デスクトップ等)に新規フォルダ(test等)を作って、manifest.jsonとtest.jsを配置
2, chrome拡張管理ページを開く( chrome://extensions/ )
3, 右上にあるディベロッパーモードのチェックボックを入にすると「パッケージ化されていない拡張機能を読み込む」ボタンが表示されるのでtestフォルダを指定
4, 他のchrome拡張機能と同様に一覧に表示されてインストール完了。有効チェックボックを確認。
5, 以降、新しいページを開く度に、helloとダイアログを出すだけの超ウザいChrome拡張が完成！

備考
1, ディベロッパーモードなので、test.jsを修正はすぐに反映される(chrome拡張一覧からリロードする必要あり)
2, 削除方法は、chrome拡張一覧から削除するか、ブラウザ右上のアイコンから右クリックで削除できる。

参考URL
今から３分で，Chromeブラウザのアドオン（拡張機能）を作ろう。

関連記事