2

私はクロム拡張機能を作成していますが、これまでのところ成功しています。最後の機能として、ユーザーが拡張機能のパネルの [about] セクションをクリックしたときに、現在開いているタブ/ページの本文に div (私の個人サイトに関する小さな刺激のない広告を表示するもの) を添付しようとしています。私もそれを働かせました。

しかし、問題は、この div がメイン ページの body タグに関連付けられていないことです。そのページに facebook like または twitter フォロー ウィジェットが含まれている場合。代わりに、上記のウィジェットの iframe の body タグに添付されます。

そのようなページの dom 構造を確認したところ、これらのウィジェットは iframe 内に独自の html>body 構造を作成しています。そして、それがこの問題の原因です。

次のように、この div を最初の body 要素にアタッチしようとしました。

var mainbody = document.getElementsByTagName('body');
mainbody[0].appendChild(adDiv);  --> adDiv = new element I created above this code with its own properties

上記の 2 番目のステートメントでは、内側のタグではなく、最初のタグに関連付けられることを期待していました。

残念ながら、これも機能していません。main ではなく facebook/twitter ウィジェットに接続されていることがわかります。私がしていることに何か問題がありますか？

編集

@stan のコメントから、facebook/twitter ウィジェット (iframe を含むもの) を含むページの問題を修正できました。今私のコードは次のようになります：

document.body.appendChild(adDiv);

-- ありがとう、スタン。

しかし今、私は別の問題に直面しています。特定のサイト ( http://www.glassdoor.com/index.htmなど) では、ページに div が表示されません。実際に何が起こるかというと、div が body にアタッチされますが、同時に削除されます。これは、html インスペクター (この場合は chrome のインスペクター) の助けを借りてのみ見ることができます。

div(adDiv) は、マークアップの本文に添付されて消えます。まるで、体に自分自身を結合することができないかのようです。結果: ページに何も表示されません。

なぜこれが起こっているのですか？上記のような少数のサイトでのみ発生しています。

background.js

chrome.browserAction.onClicked.addListener(function(tab){
    chrome.tabs.sendMessage(tab.id,{clicked:1});
});

content.js

chrome.extension.onMessage.addListener(function(request,sender,sendResponse){
    if(request.clicked==1){
        /* Create adDiv and apply style to it using JS */
        document.body.appendChild(adDiv);
    }
}
4

1 に答える 1

0

質問の最初の部分については、おそらく試してみてくださいdocument.body.appendChild。【うまくいくことがわかった。】

質問の 2 番目の部分については、コードを使用してテスト拡張機能を作成し (div を定義するためにいくつかのものを追加しただけです)、http://www.glassdoor.com/index.htmで完全に動作します。アクション ボタンをクリックすると、ページの下部に div が表示されます。他の拡張機能がブラウザに干渉していないことを確認してください - 他のすべての拡張機能を無効にしてください。div を定義する方法は次のとおりです (これも重要な場合があります)。

var adDiv = document.createElement('div'); 
adDiv.id = "idadv"; 
adDiv.style.width = "200px"; 
adDiv.style.height = "100px"; 
adDiv.style.display = "block"; 
adDiv.style.backgroundColor = "blue";

問題が散発的に発生するとおっしゃっていたように (私も再現できません)、傍受するのは難しいと思います。回避策として、DOM を監視し、div が欠落していると思われるたびに再作成してみてください。たとえば、次のようになります。

setInterval(createDivIfDoesNotExist, 1000);

また、自己広告の別の配置を検討する必要があります。たとえば、マニフェストを介してブラウザー アクションにバインドされたポップアップを表示し、browserAction のイベント リスナーを介して外部ページを変更しないでください。

于 2012-11-04T12:37:34.207 に答える