web-dev-qa-db-ja.com

Chrome拡張コンテンツスクリプトで、ドキュメントを処理する前にdocument.readyを待つ必要がありますか？

具体的には、ページ上のすべての画像を評価して特定の属性があるかどうかを確認し、それらの属性に基づいてDOMに新しい<div>を追加します。 ChromeがDOMの必要な部分をすべてロードしたことを保証するために、これらの変更を実行する前にdocument.readyが起動するのを待つ必要がありますか？

私が遭遇している問題は、document.readyが起動するのに少し時間がかかり、ユーザーがすでにページを閲覧していて、なぜ私の拡張機能がまだ効果がないのか疑問に思っていることです。通常、問題は一瞬しか続きませんが、煩わしいほどです。

Document.readyをわざわざ待たずに、すぐにドキュメントを処理すると、すべてらしい動作します。でも運が良かったのかな。

javascriptjquerygoogle-chromegoogle-chrome-extension
32
David Mills

実際、待つ必要はありません。 コンテンツスクリプト ですぐに処理できます。 document_start属性でrun_atを使用しないように注意してください。

document_endでは、ファイルはDOMが完了した直後、ただし画像やフレームなどのサブリソースが読み込まれる前に挿入されます。 document_idle（デフォルト値）は後で発生します。

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"],
      "run_at": "document_end"
    }
  ],
  ...
}
59
Mohamed Mansour

簡単な答え：はい。

長い答え：jQueryは、まだレンダリングされていないDOM要素を取得できません。私は何度かトラブルに巻き込まれたことを知っています。しばらくの間何かをデバッグしてから、コードをdocument.readyでラップするのを忘れたことに気付くのは非常に面倒です。それがあなたのために働いているなら、それはあなたの幸運のためです。また、スクリプトがページの下部、終了bodyタグのすぐ上にある場合は、それをdocument.readyでラップする必要はありません。

3
thinkdevcode