0

Twitter用のChrome拡張機能を開発しようとしています。そして、私はこの問題に遭遇し、オンラインで見つけることができるすべてを試しましたが、それでも問題は解決しませんでした.

詳細な説明はこちらです。

content_scripts を使用して独自の js コードを挿入し、Twitter Web ページの div を操作します。

ソースコードは次のようになります。

マニフェスト.json

   "content_scripts": [ { 
      "js": [ "jquery.js", "code.js" ],
      "matches": [ "http://*.twitter.com/*", "https://*.twitter.com/*" ]
   } ],

code.js

function JSCode()
{  
/* my own jquery code here */
}

$(document).ready(function() {
var node = document.createElement('script');
var toInject = "("+JSCode.toString()+")();";

node.innerText = toInject ;
document.querySelector('body').appendChild(node);
});

そしてソースコードのtwitterページをデバッグし、

<script>/*my own jquery code here */</script>
</body>

常に body タグの一番下にあります。

Chrome のアドレス バーに twitter.com または twitter.com/user_name と入力してヒット アンド ゴーすると、JavaScript は正常に動作します。

すでに twitter.com Web ページを開いている場合 (最初に Web ページをロードするときに js コードが機能します)、自分のプロファイル リンクをクリックして、同じ chrome Web ページにある自分の twitter ページにリダイレクトしますが、javascript が実行されていないようです。 （jsコードはまだ本文の最後に追加されていますが）、Webページ全体をリロードするだけで、JavaScriptが再び機能します。

これがなぜなのか、どうすれば解決できるのかについてのアドバイスはありますか? ありがとうございました

4

1 に答える 1

0

Ctrl+Shift+j を押すと、コンソールが表示され、スクリプト エラーが表示されます。そこから簡単に絞り込めるはずです。(または、右上の [ツール] --> [JavaScript コンソール] の chrome 3 バー メニューに移動します)

jQueryを使用している場合は、これを行うこともできます...

$(document).ready(function() {
    $('body').append($('<script>').html('('+JSCode.toString()+')();'));
});

...だから私たちが発見したことは、JSCode 内のコードが読み込まれ、正常に実行されていることです...しかし、新しい要素がドキュメントに追加されたときに、CSS が「魔法のように」それらに適用されていませんでした (もちろん、これがその方法です)察するに）。必要な変更を加えた新しい要素をドキュメントの head に追加すると、ドキュメント全体で新しく作成されたすべての要素に永続性が維持されます...最初に良い例を示し、次に期待どおりに機能しなかった方法を示します。 ..

$('head').append($('<style>.fullname { color: red; border: 2px dotted green; }</style>'));

以下は、この動的にロードするページではうまく機能しませんでした...

$(".fullname").css({color:"red", border:"2px dotted green"});
于 2013-10-26T07:22:05.493 に答える