読者です 読者をやめる 読者になる 読者になる

tohokuaikiのチラシの裏

技術的ネタとか。

Confluenceのプラグイン開発を承ります。ご連絡はこちらのホームページからお願いいたします。

GoogleChrome拡張機能の作り方

公式ドキュメント
https://developer.chrome.com/extensions/getstarted.html
と、日本語の情報はじめてみよう | Chrome Extensions API リファレンスを参考にしてみたことのメモ

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

Chromeの設定

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

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

ここから、

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

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

manifest.json を作成

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

アイコンクリック時に表示されるHTML

manifest.json

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

のpopup.htmlを記述する。

<meta charset="utf-8" />

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

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

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

ポップアップのHTMLのデバッグ

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

JavaScriptの扱いについて

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

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

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

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

GooglejQueryを使う

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に加えるのはAjaxJSONPなどを使う時。

Ajaxを実行

先ほどのようにmanifestに

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

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

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

その他

ファイルを作ってダウンロードさせるには

http://jsdo.it/hazama_akkarin/80ID
が参考になりました。

JavaScriptでevalするには

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

パッケージ化

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

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

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

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