ひよこwebプログラマーの覚え書き

エクセルとwebで効率化しますさせます

*

google拡張機能を開発する その4 本編 manifest.jsonについて

   

Pocket

本題です。manifest.json以外は次の項で説明します。

manifest.json、windowsで言うとboot.iniみたいなものでしょうか、必須ファイルです。

しかも中身も結構ややこしいです。

ざっと見てみましょう。

{
“manifest_version”: 2,
“name”: “test”,
“description”: “change the world.”,
“version”: “0.0.1”,
“permissions”: [
“tabs”,”http://*/*”
],
“browser_action”: {
“default_icon”: “icon.png”,
“default_title”: “change the world”,
“default_popup”: “popup.html”
},
“content_scripts”: [
{
“matches”: [“http://*/*”,”file:///*”],
“js”: [“jquery.js”,”myscript.js”]
}
]
}

これはjson形式といいます。配列、特に連想配列のようなものと思って頂いて構いません。

ただしご覧のとおりやや特殊な記述方法になっています。順に見て行きましょう。

 

{

波括弧、中括弧とも言いますね。忘れると動きません。必ず付けましょう。

 

“manifest_version”: 2,

この一行はこう書きます。現在のmanifest.jsonのversionは2です。最後のカンマは忘れないようにしましょう。

 

“name”: “test”,

拡張機能の名前です。

 

“description”: “change the world.”,

簡単な説明です。公開した時に必要になります。
“version”: “0.0.1”,

公開後はバージョンアップ毎に上げる必要があります。非公開の場合はずっと0.0.1で良いです。

 

“permissions”: [
“tabs”,”http://*/*”
],

権限を表します。なるべく絞ったほうがいいのですが、非公開の場合はこれで良いです。

全てのサイトでタブの操作を可能にする、ということを表しています。

特定のサイトに限定するなら

“http://example.com/*”

などとしたほうが良いです。

最後の角括弧の後のカンマも忘れずに。

 

“browser_action”: {
“default_icon”: “icon.png”,
“default_title”: “change the world”,
“default_popup”: “popup.html”
},

iconはアイコン、titleはタイトルです。

“default_popup”はアイコンをクリックした時のポップアップするウィンドウのことです。CSSなども使えます。

“default_popup”: “popup.html”の後にカンマを付けてはいけません。

 

“content_scripts”: [

{
“matches”: [“http://*/*”,”file:///*”],
“js”: [“jquery.js”,”myscript.js”]
}
]

括弧が多いですが、頑張ってください。というかこのまま使うと良いです。

“matches”: [“http://*/*”,”file:///*”],

は全てのサイト、全てのローカルファイル(chromeを通さないファイルには影響しません。デスクトップにおいてあるhtmlファイルをChromeで閲覧する場合などに動作するという設定です。)

“js”: [“jquery.js”,”myscript.js”]

どのjsファイルを使うかです。jquery.js、myscript.jsは入れておき、適宜追加という形で良いと思います。

 

}

最後も括弧、忘れないで下さい。

 

以上です。やや癖のある構造ですが、慣れればそれほど難しくはないと思います。

他にもactionやらなんやらあるのですが、とりあえずこれだけ書けば動きます。

もっと詳しく知りたい方はこちらへ

https://developer.chrome.com/extensions/manifest

 

続く。

 - google-extension, プログラム

Message

メールアドレスが公開されることはありません。

  関連記事

Adobe_Illustrator_Icon_CS6-150x150
jQueryでクリックしたことにする

フォームに文字を入力する時「input要素をクリックする動作」を検知するサイトが …

wordpress-logo-notext-rgb
WordPress SEO by Yoastでイベントトラッキングが使えない時

「WordPress SEO by Yoast」という有名なプラグインがあります …

no image
jquery、jquery-mobileの.liveが使えない

jquery1.7で廃止されていました。 検索すると $(ページID).live …

no image
wordpressでファイル作成のtouch()を使った場合

$file_name = ‘./data.txt’; t …

no image
PHPのデバッグについて。ディレクトリ編

思わぬところでハマりました。phpでfopenやtouchする場合のディレクトリ …

no image
google拡張機能を開発する その5 本編 manifest.json以外について

manifest.jsonさえ乗り越えれば後は簡単です。ざっと見て行きましょう。 …

no image
cssがおかしい時に確認すること

突然ズレた、うまくいかない時に確認すること ・セミコロンが抜けている いつもの事 …

no image
9割役に立つというコードについて

・9割役に立つというコードは信用しないほうが良い 9割役に立つ、と言うのはとても …

no image
google拡張機能を開発する その1 導入編

公開して広告収入を稼ぐも良し、自分の作業を楽にする、サイトを自分好みに変える、な …

wordpress-logo-notext-rgb
Contact Form 7で複数の項目をPHPで処理する

Contact Form 7、お問い合わせフォームの定番プラグインです。 デフォ …