Hatena::ブログ(Diary)

ike-daiの日記 このページをアンテナに追加 RSSフィード Twitter

この日記のはてなブックマーク数

2012-08-21

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:".

セキュリティポリシーでブロックされているらしい。

ということで、これも修正。

<script></script>

の中に直接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"
  ]
}

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

リンク元