Chrome Extensionのmanifestバージョンを上げる(1から2へ)
Chrome Extensionを更新しようとすると、Manifestバージョンを1から2にあげろといわれたので対応してみました。
今回対応したのは、Zabbixトリガーチェック用Chrome Extensionの「Chromix - Chrome Web Store」です。
そもそも今までmanifestバージョンを指定していなかったので、
まずmanifest.jsonに以下を追記します。
(指定しなかった場合は1とみなされるようです)
"manifest_version":2,
これで拡張機能をインストールしてみると、設定がおかしいとかでエラー。
browser_actionにbackground_pageの項目を設定していたが、この指定方法が変更になるらしい。
"background_page":"background.html" ↓ "background":{"page":"background.html"}
これでインストール時のエラーはでなくなったが、今度はbrowser_actionが動かない。
ここの記述方法も変更になっており、
"browser_action":{ "popup":"popup.html" } ↓ "browser_action":{ "default_popup":"popup.html" }
これでpopupはうまく表示されました。
すると次は、inlineで読み込んでいるJavaScriptが動作しない。
開発ツールのコンソールでエラーを確認すると、以下のエラーが発生。
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
セキュリティポリシーでブロックされているらしい。
ということで、これも修正。
の中に直接JavaScriptを書いていたところをすべて外だしのファイルにして、
src="js/xxx.js"という形で読み込むように修正。
これで修正してもまだエラーが発生。
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
<a href="#" id="add" onclick="displayLoginBox()" tabindex="1">Add Zabbix</a>
aタグの中のonclickにJavaScriptを埋め込んでいた部分でもエラーが発生。
この部分はjQueryで処理できるように以下のようにJavaScriptファイルに書き換えて対応。
$("#add").click(function(){ displayLoginBox(); });
以上で問題なく動作するようになった。
inlineでの読み込みじゃなく、正しくJavaScript処理をファイルで分けていればmanifest.jsonの書き換えだけでなんとかなるのではないでしょうか。
最終的なmanifest.jsonはこんな感じになりました。
{ "name":"Chromix", "version":"1.2", "manifest_version":2, "background":{"page":"background.html"}, "description":"Zabbix Alert Check Extension", "options_page":"options.html", "permissions":[ "notifications", "tabs", "http://*/*", "https://*/*" ], "browser_action":{ "default_icon": "image/chromix_normal_icon.png", "default_popup":"popup.html" }, "icons": { "16": "image/chromix_icon_16x16.png", "48": "image/chromix_icon_48x48.png", "128": "image/chromix_icon_128x128.png" } }
ここに変更箇所が書かれているのでチェックしてください。
http://developer.chrome.com/extensions/manifestVersion.html
バージョン1はサポートされなくなるらしいので、version1で作成している人は修正が必要になるかと思います。
※2012/08/27追記
Desktop Notificationで画像アイコンを表示させていたのですが、
Manifestバージョンを2に上げた時から表示されなくなってしまいました。
http://developer.chrome.com/extensions/manifest.html#web_accessible_resources
ここの記述によると、web_accessible_resourcesという設定を追加して、
利用している画像ファイルをあらかじめ指定しておかないとパーミッションエラーで弾かれるようです。
ということで最終的にはこんな感じになりました。
{ "name":"Chromix", "version":"1.5", "manifest_version":2, "background":{"page":"background.html"}, "description":"Zabbix Alert Check Extension", "options_page":"options.html", "permissions":[ "notifications", "tabs", "http://*/*", "https://*/*" ], "browser_action":{ "default_icon": "image/chromix_normal_icon.png", "default_popup":"popup.html" }, "icons": { "16": "image/chromix_icon_16x16.png", "48": "image/chromix_icon_48x48.png", "128": "image/chromix_icon_128x128.png" }, "web_accessible_resources": [ "image/chromix_error_icon.png", "image/chromix_normal_icon.png", "image/warning.png", "image/secure.ico" ] }