tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>＼(＾o＾)／

【chrome extensions】Google Chrome拡張機能の作り方③ - backgroundスクリプト、contentスクリプト、popupスクリプト、webページ内のjavascriptの読み込まれる順番

chrome extensions

はじめに

chrome extensionsは簡単に作れますが、 いっちばんはじめに作った際にどういう順番で処理が動いてるのか把握しにくかったのでそのへんをメモ。

導入編、デバッグ、処理のながれという感じで下記記事にまとめてあります。

確認する方法

確認する方法としては単純にalertを仕込みました。
console.logにしなかったのは、前回のデバッグの仕方の記事見てもらうとわかると思うのですが
出力される場所がいくつかあり、裏で出力されていてもどっちが早く呼ばれるかとかわからないからです。

こんかいの構成

構成

今回の構成はこんな感じにしてみました。
実際に拡張機能に読み込むディレクトリとしてはchrome-extensions-processing-order/extensionsになります。

# tree
./chrome-extensions-processing-order
├── README.md
├── extensions
│   ├── background.js
│   ├── content.js
│   ├── manifest.json
│   ├── popup.html
│   └── popup.js
└── web
    └── index.html
中身

また各ファイルにはそれぞれalertが仕込んであります。

  • extensions/background.js
alert("this is background.js");
  • extensions/content.js
alert("this is content.js");
  • web/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>extension processing order</title>
  <script>
  alert("this is script in index.html ");
  </script>
</head>
<body>
  <h1>processing order test!</h1>
</body>
</html>
  • extensions/popup.js
alert("this is popup.js");
置き場

一式を下記においておきました。
https://github.com/tweeeety/chrome-extensions-processing-order

確認する手順

手順として書く必要もないですが、ながれを書いておきます。
なんでもメモですね。

  1. chromeでextensionsを読み込む
  2. ローカルのweb/index.htmlを読み込む
  3. extensionsアイコンをクリック(popupを表示)

結果

結果は手順に沿って書くとこんな感じですかね。

  1. chromeでextensionsを読み込む
    • this is background.jsとalert表示される
  2. ローカルのweb/index.htmlを読み込む
    • this is script in index.htmlとalert表示される
    • this is content.jsとalert表示される
  3. extensionsアイコンをクリック(popupを表示)
    • this is popup.jsとalert表示される
図で

また、無駄にgliffyでアクティビティ図的に書いてみました。
使ってみたかっただけですねw
緑の吹き出しがalertが表示されるタイミングです。 f:id:tweeeety:20150305155047p:plain

補足

content.jsですが、manifest.jsonのcontent_scripts.run_atプロパティで読み込む順番を少しだけ制御できます。
使える値は下記があります。

  • document_start
  • document_end
  • document_idle(指定しない場合のデフォルト)

run_atについては下記のページに書いてあるので見てみてください。
→https://developer.chrome.com/extensions/content_scripts

みるとこんな感じで書いてあります

Optional. Controls when the files in js are injected. Can be "document_start", "document_end", or "document_idle". Defaults to "document_idle".

まとめポイント
  • backgrounc.jsを読みんだ後はalert表示されて人間にボールが移る
    (次の処理的へ連続性があるわけじゃない。書き方もいったん切るか迷いました)
  • popupとwebコンテンツ読まれるタイミングは同期していない
  • webコンテンツ(とコンテンツ内のjs)とcontent.jsが読み込まれる順番はrun_atで制御可
gliffyについて

gliffyはすごくキレイな図が書けるwebアプリケーションです。
http://www.gliffy.com/

注意として少しほおっておくと書いた図が消えてしまうっぽいですw
自分もpngエクスポートしておいたからよかったもののもう消えてなくなってしまってました...orz

まとめ

今となっては(慣れると)どんな風に呼ばれるか当たり前じゃんくらいなことなんですが、
最初はどのスクリプトがどんなふうに呼ばれてるかが結構とまどった記憶があります。
なので、同じような方のご参考になれば！＼(＾o＾)／