浏览器扩展程序弹出注入的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不止一次

回答

相关问题