Chrome拡張機能付きページを動的に再読み込みするとコンテンツスクリプトが再挿入される

Question

タブが更新されたときにコンテンツスクリプトを挿入する拡張機能があります。 メインスクリプト：

chrome.browserAction.onClicked.addListener(function(tab) { 
    "use strict"; 
    const sendScriptToPage = function(tabId, changeInfo, tab) { 
     if (changeInfo.status === "complete" && tab && tab.url && tab.url.indexOf("http") === 0) { 
      console.log ("executeScript "); 
      chrome.tabs.executeScript(tabId, { 
       file: "content.js", allFrames: true 
      }); 
     } 
    }; 
    chrome.tabs.onUpdated.addListener(sendScriptToPage); 
}); 

コンテンツスクリプト：私はタブをリロードするとき

const Content = (function() { 
    "use strict"; 
    console.log("Content"); 
    const makeRandomColor = function(){ 
     let c = ''; 
     while (c.length < 6) { 
      c += (Math.random()).toString(16).substr(-6).substr(-1) 
     } 
     return '#'+c; 
    }; 
    document.body.style.backgroundColor = makeRandomColor(); 
} 
)(); 

それは正常に動作します。ただし、タブが動的に再読み込みされると、コンテンツスクリプトは既に読み込まれますが、タブに読み込まれます。これは、constを再宣言できないため、ログに表示されます。

アップデートが発生したときにコンテンツスクリプトをアンロードするべきではありませんか？コンテンツスクリプトが既に読み込まれているかどうかはどのように知ることができますか？この動作を示し

URL： http://www.prisjakt.nu/produkt.php?p=391945#rparams=ss=android

検索フィールドに何かを入力するにはonUpdatedイベントハンドラをトリガしますが、コンテンツのスクリプトがページに既にあります。

テスト拡張： https://github.com/hawk-lord/chrome-test

Answer 1

ナビゲーションは、コンテンツスクリプトを拭くだろうが、onUpdatedは多くのものによってトリガすることができます。

最初に気になるのは、読み込まれているiframeです。メインページはナビゲートしませんが、無差別に注入します。

多くのアプローチが可能である：あなたが何かをする前に

1. が定義されているContentをチェックすることで、コンテンツのスクリプトより堅牢に。
2. さまざまなイベント（たとえば、さまざまなwebNavigation APIイベント）を聞きます。それらは、それらが参照するフレームを一意に識別する。
3. イベントを監視しないでください。常に、トリガーロジックを挿入して変更してください（たとえば、フラグをchrome.storageに保存してください）。