Chrome拡張の自作
まぁ別に「こんな機能が作りたい！」なんてのはないので、ベースになる部分ができたらまずは満足。
Javascritpの知識
htmlの知識？
なんか適当にエディタ
0. 必要なもの
GoogleChromeJavascritpの知識
htmlの知識？
なんか適当にエディタ
1. フォルダ準備
まずはプロジェクトフォルダの作成。場所は自由。めんどいのでデスクトップに作るズボラっぷり。
フォルダ名も特に制約っぽい制約もない？別にどこかに表示されるでもなし。
たぶんパッケージ名になるのだろうと予想。
2. ファイル作成
1で作ったフォルダの中でいろいろファイルを作る。まずはmanifest.json。これが無いと始まらない。
その名の通りjson形式での記入。うだうだコードを書かなくていいのは素晴らしいとおもう(小並感)
必要なファイルごとに追ってみる。
2-1. manifest.json
必須ファイル。先述の通りjsonで書く設定ファイル。アイコンの指定や使うファイル等はこいつが持ってる。簡単にコード-A
{
"manifest_version": 2, // マニフェストのバージョン. 2にしないと怒られる
"name": "my extention", // name. 表示される名前でもある
"version": "1.0", // アプリversion. 更新があったらあげていく.
"description": "my first extention", // 説明文.
"icons": { // iconの設定. サイズごとに設定できる
"16": "icons/icon.png",
"48": "icons/icon.png"
},
// コード-Bに続く
}
まずは基本の宣言。 manifest_versionは拡張機能作成全体に言えることみたいなので、とりあえず2に。
ほかは表示の問題。コード的にはエラーを起こしたりはしないが、nameに関しては必須事項らしい。
簡単にコード-B
{
// コード-Aから
"browser_action": {
// ツールバー右上に表示するのに必要な設定. Chrome4からのAPIで、それ以前のものでは使えない。
"default_icon": "icons/icon.png", //表示するアイコン
"default_title": "titil test", // 説明. 右上にアイコンを出す場合はホバーすると見られる
"default_popup": "htmls/popup.html" // 右上に表示されたアイコンを押した際に出るhtmlの指定.
}
}
この辺りから実用的な設定。拡張を有効にすると出てくる右上アイコンの設定についてのお話。
iconとtitleはともかく、問題はpopup。アイコンクリック時に出るアレはここの中で作る。
manifest.jsonについてはひとまずはこの辺。
2-2. html
簡単にコード-B 中に出てきたhtmlを作成。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <div class="main_contents"> <span>Hello, World! <a href="http://www.google.co.jp" target="_blank">Google検索</a></span> </div> </body> </html>
ただHello, World!と Google検索 というリンクが並んでいるだけのページ。 拡張で使うのにGoogleへのリンクなのはキニシナイ
とりあえずはシンプルにこれだけ。これをmanifest.jsonのパスに合うように、1で作ったフォルダ内に配置する。
ChromeExt(1のフォルダ)━ ┳━manifest.json
┃
┣━htmls━popup.html
┃
┗━icons━icon.png
現在こんな感じなはず。
3. 登録
準備ができたらいよいよ配置してみる。機能はとりあえず二の次。
まずは設定を開く。メニューから開くのが楽かと。
設定タブが新たに出てきたら、今度は左側の「拡張機能」を選択。
デベロッパーモードのチェックボックスにチェックを入れたら、
「パッケージ化されていない拡張機能を読み込む」を選択、ディレクトリが選択できるので、 1で作成したディレクトリを選択すると、拡張機能の一覧に追加されて
こうなるはず。icon設定していないのがバレバレである。なんか見えちゃいけないものがちらほらあるので塗りつぶし。ヽ('A`)ﾉ
エラーなんかはここに出てくる。修正したら下の リロード を押せばOK。簡単。
ここに登録できたら、右上に注目。ちゃんと「有効」になっていれば設定したアイコンがいるかと。
押せばこうなるはず。 もちろんGoogle検索 を押せばGoogleトップへ。
今回はこんなところで。∩( ・ω・)∩
参考: ドットインストール
0 件のコメント:
コメントを投稿