jquery - Chrome 拡張機能: jQuery を使用して内部 Gmail DOM を操作するには?

Question

css コンテンツスクリプトを使用して内部の Gmail コンテンツを操作することは問題ありませんが、jQuery とカスタム js コンテンツスクリプトを使用すると失敗します。

jQuery を使用して内部の Gmail DOM を操作したいと考えています。

マニフェスト.json

"content_scripts": [ {
        "matches":      ["*://*.mail.google.com/*"],
        "js":           ["jquery.js", "default.js"]
    } ],

default.js

$(document).ready(function() {
    $("div.gK").css("color", "red");
});

ただし、それぞれのdiv.gK要素には css の変更が反映されていません。

ここに画像の説明を入力

これが機能しない理由はありますか？

score 3 · Accepted Answer

DOMReady イベントは、ターゲット要素が作成されるずっと前に発生します。mail.google.com にアクセスすると、読み込みバーが表示されます。その直前に、イベントが発生したことが示されます。

GMail に信頼性の高いカスタムイベントがあるかどうかはわかりません。それ以外の場合は、

jQuery(window).load(function(){
  jQuery("div.gK").css("color", "red");
});

イベントをより詳細に分析したい場合は、[タイムライン] タブに焦点を当てて、Chrome 開発者ツールを読んで使用することをお勧めします。

score 1 · Accepted Answer

Javascript コンソールを見て、拡張機能がエラーをスローしていないことを確認してください。エラーがスローされているために実行されていないことが問題である可能性があります。乾杯！

2 に答える 2