/ programing

世界時計のChrome拡張機能のmanifest version 2対応でやったこと

2012年中に公開しているChrome拡張機能を更新しないといけない件についての対応で世界時計のChrome拡張機能をアップデートしました。

World Clocks

manifest version 2対応でやったこと

実際のところはmanifest version 2対応より、ずっと放置していたレビューを読みなおして要望にいろいろ対応したのとChrome Store向けの画像作成の方が時間がかかっているのだけど・・・とりあえずmanifest version 2で対応したことについて。

manifest.jsonの変更

変更部分の抜粋です。

manifest.json(manifest ver1)
  "background_page": "background.html",
  "options_page": "options.html",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  }
}

manifest_versionを指定して、content_security_policyを追加。background_pageをbackground:pageに変更、browser_action:popupをbrowser_action:default_popupに変更。

manifest.json(manifest ver2)
  "manifest_version": 2,
  "content_security_policy": "script-src 'self'; object-src 'self'",
  "background": {
    "page": "background.html"
  },
  "options_page": "options.html",
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

外部サイトのスクリプトを拡張機能に同梱

manifest.jsonのcontent_security_policyで外部URLを指定せず、すべてのファイルを拡張機能に持つことに。

background.html(manifest ver1)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
background.html(manifest ver2)
<script src="jquery.min.js"></script>

粛々とhtmlから別ファイルに分離

Content Security Policyではhtml内に直接cssやscriptを記述することを禁止しているので外部ファイルから呼び出すように修正。

background.html(manifest ver1)
<script>
(function($){
    $(document).ready(function() {
....
    });
})(jQuery);
</script>
background.html(manifest ver2)
<script src="background.js"></script>

ライブラリのprototypeを上書きしてContent Security Policy対応

恐れていたのが使っているライブラリのファイルがContent Security Policy対応できていないパターン。

coolclock.js
nextTick: function() {
  setTimeout("CoolClock.config.clockTracker['"+this.canvasId+"'].tick()",this.tickDelay);
},

以下のようなjsファイルを後から読み込んで上書き。

coolclock.js
(function(c){
    c.nextTick = function() {
        // Content Security Policy (CSP)
        // http://code.google.com/chrome/extensions/contentSecurityPolicy.html
        var me = this;
        setTimeout(function(){
            me.tick();
        },this.tickDelay);
    };
})(CoolClock.prototype);

こういうパターン多い気がする。

面倒ですがhtmlで沢山処理をしていなければ、manifest version 2対応はそれほど難しくはないと思います。なお、この拡張機能はgithubにコードを置いています。

https://github.com/makotokw/world-clocks
Markdown with by ❤ wp-gfm