Chrome Extension -Ajaxリンク/ナビゲーションから複数回積み上げられるコンテンツスクリプト
-
27-10-2019 - |
質問
私はChrome拡張機能を完全に実行することに非常に近いですが、現在1つの最後の問題に遭遇しています。
問題は、Facebookのようなサイトに繰り返し注入されているコンテンツスクリプトに関連しているようです。このサイトでは、リンクなどをクリックするとページ全体がリロードされていません...
この問題は、サイトが非常にajax依存していることに関連していると思います。
ページ全体を更新したり、初めてロードしたりした場合、問題はありません。私の拡張機能が実行され、コンテンツスクリプトが適切に注入されます。
ただし、最初の時間をページにロードすると、サイトのリンクをクリックすると、Facebookの「コンテンツセクション」がクリックしたリンクをロードしますが、上部のフローティングブルーナビゲーションバーは更新または変更されません。まったく。
つまり、ページ全体がリロードされません。サイトの「コンテンツセクション」とナビゲーションバーの両方が同じフレームにあるため、コンテンツスクリプトは、クリックするたびに別の時間を挿入し続けます。
そのため、最終的にはコンソールログで2倍、3x、4x、5xなどを実行していることがわかります。より多くのリンクをクリックすると、数は毎回1増加します。
だから私の質問はこれです:
コンテンツスクリプトが再び注入する前に、コンテンツスクリプトがすでに存在/アクティブであるかどうかを確認する簡単な方法はありますか?または、このような状況のためのワークアラウンドとして他に何を使用できますか?
解決
拡張機能のコンテンツスクリプトを書くときに同様の問題を予測したので、 <body>
拡張機能名とバージョンを備えた各ページの要素。
コンテンツスクリプトが最初に行うことは、この属性がすでにスクリプトであるかどうかを確認し、それが行われている場合に停止することです。それ以外の場合は、この属性を追加します(値があります true
)そしてその目的を続けます。
あなたが私を見たいなら 解決;
この手法の少し複雑な側面は、使用してバージョンを取得することです メッセージの合格 JSONオブジェクトにマニフェスト(Ajaxリクエストで取得)を解析します。
私がこの見方をどのように達成したかを正確に見るために init
と onRequestHelper
機能 ここ;
もちろん、バージョンをハードコードするか、完全に省略することもできます。属性名が一意である限り。
他のヒント
親フレームに、追加できますか window.doneInjecting = true;
または似たようなもの? (または、おそらくページに非表示の要素を追加します - 子供のフレームが親のJavaScript変数にアクセスできるかどうかはわかりません)
ただし、基本的には単純なフラグを設定するため、コンテンツスクリプトが挿入されるたびに、フラグが存在するかどうかを確認し、そうでない場合にのみ継続しますか?
タブの状態が変更されるたびに発火した火災。コンテンツスクリプトをロードするだけです changeInfo.status == "complete"
background.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
chrome.tabs.getSelected(null, function(tab) {
// Do some stuff
if (changeInfo.status == "complete")
{
// load your scripts here
chrome.tabs.executeScript(tabId, {file: "jquery.js"});
chrome.tabs.executeScript(tabId, {file: "jquery.highlight.js"});
}
});
});