GoogleChrome拡張機能の作り方 - tohokuaikiのチラシの裏

日本語で入る情報のページの方は、この記事執筆の現時点では色々と違ってた。

Chromeは特にBetaで無くても良いみたい。

いちいち作った拡張機能をインストールとかしなくても良いようにする。

ここから、

の「デベロッパーモード」をONにする。

で、隣の「パッケージ化されていない・・・」から開発中のフォルダを指定。これだけでOK。

とりあえず、サンプルmanifest.jsonをダウンロードして、サンプルicon.pngを持ってきて指定。
これだけで動く。

manifest.jsonの

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

のpopup.htmlを記述する。

<meta charset="utf-8" />

を入れておくことで文字コードを指定できる。

HTMLは変更したら即座に反映される。
ただし、manifestを変更した場合は、chrome://extensions/ パネル*1をリロードする必要がある。

画像や、JavaScript、CSSなどは相対パスで指定すれば良い。

ポップアップで表示されたHTML上で右クリックをするといつものGoogleデバッガが表示される。
ただし、これはメイン画面のデバッガとは関係なく、この部分のみのデバッガのようだ。*2

HTML内の直接埋め込みはダメらしい。こういうの

<!-- popup.html -->
<script>
alert(123); // 実行されない
</script>
<a href="javascript:alert(123);">これも実行されない</a>

これはmanifestのv2でダメになったっぽく、日本語情報のページのサンプルはこのためアウト。

解決のために、外出しするのとインラインでは書かないようにすること。

popup.htmlに

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

と書いてもダメ。セキュリティエラーで動かない。

manifestに

   "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

を追加する。
script-src（>script src="..."<）として指定可能なのは、自分自身と、googleということ。
この指定には、script-srcとobject-srcを併記しないとダメらしい。

あるいは、デフォルトは

   "content_security_policy": "script-src 'self'; object-src 'self'",

なので、おとなしくダウンロードしたJSをjsフォルダに入れて使うのが良いかも。

この時点では、manifestのpermissionsにはGoogleを特に加えなくても良い。このpermissionsに加えるのはAjaxやJSONPなどを使う時。

先ほどのようにmanifestに

    "permissions": [
        "http://example.com/"
        ]

を追加する。
最後の/が必要なようで、ないとmalformed URLだと怒られた。

さらにいうと、どうもこのURLはドメイン部分までしか有効にならないらしく、その下のパスについて指定しても無視されるようだ。

manifestの"content_security_policy"の"script-src"に'unsafe-eval'を加える必要がありました。

拡張機能パネル chrome://extensions からパッケージ化が可能。
最初の1回目はpemファイルが不要。自動生成される。
2回目からこれを使うことでパッケージの唯一性が保証される。

野良パッケージをインストールするには、拡張機能 chrome://extensions パネルに直接このCRXファイルを突っ込む。
URLからダウンロード実行とかはできません。

*1:URLにchrome://extensions/を入力して表示される。あるいは、ツール=>拡張機能でもOK

*2:これを使うのにはBeta版(開発者版)が必要なのかもしれない。