Chrome Extensionのチュートリアルをやってみたが・・・

チュートリアル

Tweet Thisボタンをツールバーに設置するExtensionです。

step by step

チュートリアルの説明の順番通りにやって行きます。

1. Extension 用のフォルダを作る

ファイルを格納するフォルダを作ります。自分は"~/TweetThis"を作りました。

2. Extension定義ファイルを作る

Extensionの定義ファイル=manifest.jsonを用意します。manifest.jsonにはname, version, description, toolstripを記述。またtoolstripにはTweet ThisボタンのHTMLドキュメントを指定します。

3. Tweet ThisボタンのHTMLドキュメントを作る

このHTMLの内容がツールバーに表示されます。manifest.jsonのtoolstripで指定したSOTC_tweet_this_toolstrip.htmlというファイル名で作成します。

4. Extensionをインストール

chrome://extensions/ から"Load Extension…"を選択し、インストールする。記述内容に誤りがなければ、 SOTC Tweet This for Chrome Version: 1.0 が追加され、ツールバーにTweet Thisボタンが表示されるはず。

5. コンテンツスクリプトを作る

ロードしたページのスコープ内で実行されるスクリプトです。ロードしたページのURLとタイトルを取得して、postMessageメソッドでToolstripsに対してメッセージ（URLとタイトル）をポストします。また、ユーザのタブ切り替え時のフォーカスイベントをフックしてURLとタイトルを更新するイベントリスナを追加します。

6. Tweet ThisボタンのHTMLにクリックイベントとスクリプトを追加する

HTMLにonClickイベントと、ボタンがクリックされたときの動作を記述するスクリプトファイルを追加します。

7. Tweet Thisボタンのスクリプトを作成する

コンテンツスクリプトからメッセージを受信するリスナと、Tweet Thisボタンがクリックされたときに実行される関数を記述します。ボタンがクリックされると、bit.lyのAPIで短縮URLを非同期に取得して、Twitterのホーム画面を新しいウィンドウで開きます。

しかしながら

ツールバーにあるTweet Thisボタンをクリックしても何も起きませんでした。
ん？と思って何度かクリックしてみるものの、やはり何も起きず。
Developer Tools for Google Chromeを使ってデバッグする事に。

クリック時に呼ばれる関数にブレークポイントを設定
longUrlとTitleを確認してみる。→値は設定されてるみたい
req.openしてreq.sendとステップ実行してみたが、onloadが呼ばれない
リクエストを送信してから、レスポンスを受信するところで何かしらエラーになっているのではないか？
onerrorを追加、readyState、status、statusTextをalertで表示してみる
readyState==4, status==0, statusText=null であった

XMLHttpRequestでstatus=0の問題

Googleで検索してみるといくつかの情報が見つかった。

https://developer.mozilla.org/ja/XMLHttpRequest
- file:// および ftp:// はHTTPステータスを返しません。そのため、statusについてはゼロが、statusText については空文字列を返されます。詳しくは bug 331610 を参照してください。
- リクエストはhttp://api.bit.lyへ送信しているので、該当しないと思われる。
oshiete.homes.jp/qa3246213.html
- ローカルのフォルダにあるHTMLを使っていたため。
- 今回もローカルのフォルダをロードして使っていたので、ローカルのウェブサーバ経由でcrxをインストールしてみたが現象は変わらず。
markos.gaivo.net/blog/?p=109
- submitボタンのtype="button"からtype="image"に変更
- 今回は使ってない