メサイア・ワークス

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

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

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

manifest.json

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

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

自分の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
今から3分で,Chromeブラウザのアドオン(拡張機能)を作ろう。

モバイルバージョンを終了