chrome拡張のポップアップ画面でalert()やconsole.log()を出力する方法

chrome拡張のポップアップ画面でalert()やconsole.log()を出力する方法

Posted at June 23,2014 12:55 AM
Tag:[Chrome, Extension]

chrome拡張のポップアップ画面でalert()やconsole.log()を出力する方法を紹介します。

1.問題点

Google Chrome拡張の作り方(その4:オプション画面と保存データのバックグラウンド・ポップアップとの連携)」で作成したポップアップ画面のデバグをするために、次のようにalert()やconsole.log()をpopup.htmlに埋め込んでみましたが、alert()も表示されず、console.log()も出力されません。

var showOption = function() {
    var str = localStorage.getItem("test");
    var obj = JSON.parse(str);
    console.log(obj['tab'])
    $('#maxtab').text(obj['tab']);
};
$(function(){
    showOption();
    var BG = chrome.extension.getBackgroundPage();
    if ( BG.isLimit() ) {
        alert("OK");
        $('#maxtab').css('color', '#f00');
    } else {
        $('#maxtab').css('color', '#000');
    }
});

2.ポップアップ画面でalert()やconsole.log()を出力する

ポップアップ画面でalert()やconsole.log()を出力するには、拡張一覧に表示されたIDをコピー。

拡張一覧に表示されたID

アドレスバーに、

chrome-extension://ID/popup.html

と入力します。上記のIDであれば、

chrome-extension://ikbmacnmcobhgppnbgpfnmiaimmfeaba/popup.html

となります。

これで新しいページが開き、ポップアップの内容がページに表示されます。

(クリックで拡大)
新しいページ

あとはページ上で右クリックして「要素を検証」を選択(またはF12を押下)し、開いたデベロッパーツールで「Console」を選択すればconsole.log()の内容が表示されます。

(クリックで拡大)
console.log()の内容が表示

alert()も出力する条件が揃えばこのページに表示されます。

(クリックで拡大)
alert()を出力

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)