"manifest_version: 2"とContent-Security-Policy

2012-08-06T00:00:00+00:00 Chrome Extension JavaScript

前記事のChrome ExtensionでTwitter OAuthを利用してAPIを利用するっていうデモにおいて、manifest_versionを2にすると動かないっていうのが判明。理由がContent Security Policy(CSP)っていうのにひっかかるかららしい。例えば

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="popup.css" />
    <script type="text/javascript" src="jquery.js"></script>
  </head>
  <body>
    <div id="content">
      <div id="twitter-login">
        <a href="javascript:void(0)" onclick="login()">Twitterにログイン</a>
      </div>
    </div>
    <script type="text/javascript" src="popup.js"></script>
  </body>
</html>

前記事のこれの場合onclickな属性でリンクをクリックした際の処理を書いてる訳だけど、こういうのがCSP関係で問題になりmanifest_versionが2な場合は動かなくなる。なのでこういう場合onclickをJavaScriptでバインドするのが望ましい模様

document.querySelector("#twitter-login > a").addEventListner(
  "click",
  function() {
    // 省略
  }
);

というようにしたりしなければならない。っていう感じ。他にも外部(CDNとか)で配信されているスクリプト等のロードに関しても制限されている模様。今後はmanifest_version: 1なのは推奨されないと思われるので、manifest_versionを2だと前提した環境での開発をするのが良いのがベストかと

参考1: http://code.google.com/chrome/extensions/contentSecurityPolicy.html

参考2: http://www.netplan.co.jp/archives/1959

Chrome Extension開発を勉強してみる (14) - file:// へのアクセスに関して - Chrome Extension開発を勉強してみる (13) - oauth.jsでTwitter API -