新規タブ作成後の処理

[vanilla]

こんばんは、質問させて下さい。

拡張アイコン：クリック
↓
新規タブ作成：url：http://reader.livedoor.com/reader/logout（ログアウトする）
↓
livedoor Reader：フォームに、ID、パスワードを入力して、submit

というような流れを作成しているのですが、新規タブを作成して、フォームに入力する前の処理で、躓いています。
logoutLDR()をコメントアウトすれば、現在のタブで、livedoor Readerフォームに、ID、パスワードを入力して、
submit することは成功しています。


■background_page：background.html
==============================================================
function logoutLDR(){
chrome.tabs.create({url: 'http://reader.livedoor.com/reader/
logout'});
};

function inputForm(){
chrome.tabs.getSelected(null, function(tab){
chrome.tabs.sendRequest(tab.id, {"sendCheck": "OK"});
});
};

chrome.browserAction.onClicked.addListener(function(tab){
logoutLDR();
inputForm();
});
==============================================================

■content_scripts：content.js（jquery-1.5.min.js を使用しています）
==============================================================
chrome.extension.onRequest.addListener(function(req, sender,
sendResponse){
if(req.sendCheck == 'OK'){
$('input[name="livedoor_id"]').val('ID');
$('input[name="password"]').val('PASS');
//$('form[name="loginForm"]').submit();
alert('OK');
}
});
==============================================================

新規タブを作成してすぐに、次のコマンドが実行されるので何も起こらないと思うのですが

新規タブ作成
↓
タブ作成後：データのロードが終わるまで待機
↓
フォーム入力

というようにしたいのですが、具体的にどうしたら良いのかわかりません。
力を貸して下さい、よろしくお願いします。

[Toru Yoshikawa]

初めまして、吉川と申します。

直接フォームを操作するのではなく、onloadイベントに
登録する方法はどうでしょうか？

■content_scripts：content.js（jquery-1.5.min.js を使用しています）
==============================================================
chrome.extension.onRequest.addListener(function(req, sender,
sendResponse){
if(req.sendCheck == 'OK'){

$(document).ready(function(){

$('input[name="livedoor_id"]').val('ID');
$('input[name="password"]').val('PASS');
//$('form[name="loginForm"]').submit();
alert('OK');
});
}

});
==============================================================

2011年2月4日20:55 vanilla <vanilla.s...@gmail.com>:

> --
> このメールは Google グループのグループ「Chromium-Extensions-Japan」の登録者に送られています。
> このグループに投稿するには、chromium-ext...@googlegroups.com にメールを送信してください。
> このグループから退会するには、chromium-extension...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/chromium-extensions-japan?hl=ja からこのグループにアクセスしてください。
>
>

--
Toru Yoshikawa
mail: pikotea[at]gmail.com
twitter: yoshikawa_t
blog: http://d.hatena.ne.jp/pikotea/

[vanilla]

リプライありがとうございます。
$(document).ready(function() は既に試しましたが、効果がなかったです。
エラーがでる訳でもなく、alert によるポップアップも表示されない状態になります。

[Toru Yoshikawa]

吉川です。

content_scriptのrun_atは設定していますか？

2011年2月5日0:43 vanilla <vanilla.s...@gmail.com>:

> リプライありがとうございます。
> $(document).ready(function() は既に試しましたが、効果がなかったです。
> エラーがでる訳でもなく、alert によるポップアップも表示されない状態になります。
>

[vanilla]

■manifest.json
==============================================================
"content_scripts": [
{
"js": [ "jquery-1.5.min.js" , "content.js" ],
"matches": [ "http://*/*", "https://*/*" ],
"run_at": "document_start"
}
],
==============================================================

こんな感じで設定していますが、間違っているでしょうか？

[Toru Yoshikawa]

吉川です。

先にログアウトで画面遷移していたんですね。
すみません、よく見ていませんでした。

画面が切り替わる前にsendしている状態になっていると思われるので
matchesでURLをログイン画面に絞って、ログイン画面からバックグラウンドへ
データを取りに来るようにすれば、うまく行くのではないでしょうか。

ただ、全体を見ていないのでなんともいえませんが、
IDやパスワードをそのまま扱うのはあまりおすすめできませんが…。

2011年2月5日1:00 vanilla <vanilla.s...@gmail.com>:

[Toru Yoshikawa]

連投すみません。

ログイン画面からバックグラウンドへ
データを取りに来るようにする場合は、run_atをdocument_endにしてください。

2011年2月5日1:12 Toru Yoshikawa <pik...@gmail.com>:

[Shogo Ohta]

こんにちは、太田です。

横から失礼します。
まず、バックグラウンドページで次のようにしていますね。

chrome.browserAction.onClicked.addListener(function(tab){
logoutLDR();// ログアウト画面を開く命令
inputForm();// ログアウト画面に値を入力させる命令
});

ここでポイントとなるのは、このログアウト画面を開く命令とその処理は非同期に実行されるという点です。
# 非同期というと分かりにくいかもしれませんが、
# タブを開くように命令する人と、実際にタブを開く人の二人いて別々に動くイメージをするとわかりやすいかと思います。
つまり、バックグラウンドページがログアウトページを開くように命令を出すとChromeは新しいタブを開きますが、
その開く処理をしている間にバックグラウンドページはinputFormの処理に進んでいます。
このときタブを開き終えていないので、フォームの入力に失敗してしまうわけです。

というわけでタブを開き終えて、さらにログイン画面の読み込みも待ってからフォームに値を入れる処理を行う必要があります。
まず、browserAction.onClickedのときの処理はlogoutLDRだけにしましょう。
chrome.browserAction.onClicked.addListener(function(tab){
logoutLDR();
});

ログアウト後は、 https://member.livedoor.com/login/〜
のようなURLにリダイレクトされるので、そのリダイレクト先でContentScriptを実行します。

"content_scripts": [
{
"js": [ "jquery-1.5.min.js" , "content.js" ],

"matches": [ "https://member.livedoor.com/login/*" ],
"run_at": "document_end"
}
],
吉川さんも指摘されていますが、ここでdocument_endにするのがポイントです。
ページの読み込み後でないとフォームが存在しないので、操作できないからです。
# もちろん、document_startにしてjQueryのreadyを使うという方法も可能です

さて、最後にContent Scriptとバックグラウンドページのやり取りについても少し修正が必要です。
まず、バックグラウンドページで次のようにContentScriptからのリクエストに備えておきます。
chrome.extension.onRequest.addListener(function(request, sender, sendResponse){
sendResponse({sendCheck:'OK' });
});
chrome.extension.onRequestでContentScriptからのメッセージを受け取ったら、
第3引数(ここではsendResponse)でメッセージを送り返します。

そして、content.jsの中は次のようにしてください。
chrome.extension.sendRequest(null, function(res){
if(res.sendCheck == 'OK'){

$('input[name="livedoor_id"]').val('ID');
$('input[name="password"]').val('PASS');
//$('form[name="loginForm"]').submit();
alert('OK');
}
});

こちらはバックグラウンドページにリクエストを送り、そのレスポンスを受け取ってからフォームを操作しています。
こんな感じでご希望の動作になるかと思います。
# ただ、十分な検証はできていないので、どこか間違っていたらごめんなさい…

--
太田昌吾 <os0...@gmail.com>

2011年2月5日1:14 Toru Yoshikawa <pik...@gmail.com>:

[vanilla]

こんばんは。
吉川さん、太田さん リプライありがとうございます。
試してみました結果、うまくいきました。
ありがとうございました。


私なりに流れを書いてみたのですが、合っていますでしょうか？

タブの指定URLを content.js で常に監視
↓
拡張アイコンをクリック
↓
新規タブ作成開始（logoutLDR()）
↓
新規タブ作成終了
↓
ログインフォーム（https://member.livedoor.com/login/*）のURLが一致したので、content.js を
document_end で実行
↓
ログインフォームのロードが完了
↓
content.js 処理開始
↓
sendRequest でコールバック付きで、バックグラウンドページに単発メッセージとして送る
↓
sendResponse で content.js に sendCheck確認を含めて、応答メッセージ返す
↓
sendCheckが正しいので、ログインフォーム入力コマンド開始
↓
ログインフォームに入力


現在の状態では、普通にログインフォーム（https://member.livedoor.com/login/*）を開いても
content.js が実行されてしまうので、拡張アイコンをクリックした場合にのみ反応するように、以下のように修正してみました。
もっと良い方法があれば教えて下さい。

■background_page：background.html

var clickCheck = undefined;

function logoutLDR(){
chrome.tabs.create({url: 'http://reader.livedoor.com/reader/
logout'});
};

chrome.browserAction.onClicked.addListener(function(tab){
logoutLDR();
clickCheck = true;
});

chrome.extension.onRequest.addListener(function(request, sender,
sendResponse){
var check = {
"sendCheck": "OK",
"clickCheck": clickCheck
};
sendResponse(check);
clickCheck = undefined;
});

■content_scripts：content.js

chrome.extension.sendRequest(null, function(res){
if(res.sendCheck == 'OK' && res.clickCheck == true){

$('input[name="livedoor_id"]').val('ID');
$('input[name="password"]').val('PASS');
//$('form[name="loginForm"]').submit();
alert('OK');
}
});

> IDやパスワードをそのまま扱うのはあまりおすすめできませんが…。
テスト用にシンプルにしたものでテストしていました。
options_page を使用して、localStorage に保存するようにしていますが、そこにパスワードを保存しても安全でしょうか？


最後にもう一つ質問があるのですが、
content_scripts 内で、console.log() を使用したいのですが、何か良い方法があるでしょうか？

質問ばかりですいませんが、よろしくお願いします。

[Toru Yoshikawa]

吉川です。

うまくいって何よりです。
概ね合ってると思います。
clickCheckのところは、そもそもsendResponseしなくても
良いのではとも思いますが細かい話なので問題ないでしょう。

chrome.extension.onRequest.addListener(function(request, sender, sendResponse){
if ( clickCheck == true ) {

var check = {
"sendCheck": "OK"

};
sendResponse(check);
clickCheck = false;
});

>テスト用にシンプルにしたものでテストしていました。
>options_page を使用して、localStorage に保存するようにしていますが、そこにパスワードを保存しても安全でしょうか？

localStorageもクッキーと同じでセキュアではないので注意してください。
livedoorにはlivedoor authというAPIもあるようなので、余裕があればチャレンジしてみてください。
http://auth.livedoor.com/

>content_scripts 内で、console.log() を使用したいのですが、何か良い方法があるでしょうか？

特に問題なく使えると思います。ただ、content_scriptsは、対象のページで実行されるので
console.logの結果が表示されるのは、ポップアップページでもバックグラウンドページでもなく、
実際の表示されているページの中です。

2011年2月6日0:42 vanilla <vanilla.s...@gmail.com>:

[vanilla]

こんにちは、吉川さん。

> clickCheckのところは、そもそもsendResponseしなくても良いのではとも思います
本当ですね、無駄な処理をしていました。
ご指摘ありがとうございます。
早速修正しました。

> livedoorにはlivedoor authというAPIもあるようなので
以前にチラっと見たのですが、私には難しいようなので、そっとページを閉じました。
Chrome Extension作成 も javascript も、ここ1週間で勉強を開始したばかりなので
なにやら初歩的なミスや質問ばかりで申し訳なく思っています。

> content_scriptsは、対象のページで実行されるので
ひえー、当たり前のことをチェックしていませんでした。
ページに対してのデベロッパーツールで確認すると、ちゃんと console.log() 確認出来ました。
なぜか、デベロッパーツールは、1つしか起動出来ないものと勘違いしていました・・・。

[Toru Yoshikawa]

吉川です。

OAuthやOpenIDは、確かに初心者の方にはとっつき辛いので後回しで良いと思います。

頑張ってください。　:)