瀏覽器擴展程序彈出注入的JavaScript不止一次

我剛開始學習如何做的擴展......瀏覽器擴展程序彈出注入的JavaScript不止一次

我想它，以便彈出第一次打開時，它的JavaScript注入到活動選項卡。彈出窗口中還有一些按鈕與注入的JavaScript進行交互。

我遇到的問題是每次打開彈出窗口時，都會將JavaScript注入到活動選項卡中。每發生一次，所有保存的變量都會重置。所以，我最終做出了一個全局變量來解決這個問題。

下面是代碼的樣本，我使用：

popup.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>My Extension</title> 
    <link href="popup.css" rel="stylesheet"> 
    <script src="popup.js"></script> 
</head> 

<body> 
    <div class="controls"> 
     <div class="action1">action 1</div> 
     <div class="action2">action 2</div> 
    </div> 
</body> 
</html>

popup.js

var command = { 
    action1 : function(){ 
     chrome.tabs.executeScript(null, { 
      code: 'myExtension("action1");' 
     }); 
    }, 
    action2 : function(){ 
     chrome.tabs.executeScript(null, { 
      code: 'myExtension("action2");' 
     }); 
    } 
}; 

chrome.windows.getCurrent(function(win) { 
    chrome.tabs.query({ 
     'windowId': win.id, 
     'active': true 
    }, function(tabArray) { 

     // windows.done pretty much doesn't do anything 
     if (!window.done) { 
      chrome.tabs.insertCSS(tabArray[0].id, { 
       file: 'myextension.css' 
      }); 

      chrome.tabs.executeScript(null, { 
       file: 'myextension.js' 
      }, function(){ 
       window.done = true; 
       chrome.tabs.executeScript(null, { 
        code: 'myExtension("init");' 
       }); 
      }); 
     } 

     // action1 
     var el = document.querySelector('.action1'); 
     el.removeEventListener('click', commands.action1); 
     el.addEventListener('click', commands.action1); 

     // action2 
     var el = document.querySelector('.action2'); 
     el.removeEventListener('click', commands.action2); 
     el.addEventListener('click', commands.action2); 

    }); 
});

在我myextension.js文件，我做這樣的事情如此我不會丟失我需要保存的內部變量：

(function(){ 

    window.myExtension = function(command) { 
    if (typeof myExtensionVariables === 'undefined') { 
     window.myExtensionVariables = { 
     que : [], 
     flags : {} 
     } 
    } 
    if (command === 'init') { 
     // initialize! 
    } 

    // etc 

    }; 

})();

我不認爲我需要一個background.html或background.js，

我真的想是爲了防止JavaScript注入的發生不止一次。

有什麼建議嗎？

來源

2015-08-28 Mottie

如果注入的內容腳本的大小是一個問題，然後注入少量代碼來檢查狀態：

chrome.tabs.executeScript({code: "window.myExtensionVariables"}, function(result) { 
    if (!result[0]) { 
     /* inject the script */ 
    } 
});

全局變量myExtensionVariables是沒有問題的，因爲只有你的注入內容腳本看到它，而不是網頁。

至於彈出腳本中的window.done，window指的是彈出的小窗口，而不是網頁，所以對於任務來說的確是無用的。

總的來說，我會堅持你的實施，因爲它是最簡單的。否則，您必須跟蹤webNavigation事件並在chrome.storage或持久背景頁面中維護帶有注入腳本的標籤ID列表。

來源

2015-08-28 20:18:20 wOxxOm

哦！我沒有意識到'executeScript'在回調中有一個參數。太好了，謝謝！ – Mottie

雖然你在'{code：...}'之前忘了'null'，但我會編輯你的答案;） – Mottie

@Mottie，它是一個可選參數，你不必指定它。 – wOxxOm

瀏覽器擴展程序彈出注入的JavaScript不止一次

回答

相關問題