Chrome扩展弹出式弹出多次注入javascript

时间:2015-08-28 19:16:36

标签: javascript google-chrome-extension popup

我刚开始学习如何制作扩展程序......

我想要它,这样当弹出窗口首次打开时,它会将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.htmlbackground.js

我真正想要的是防止javascript注入不止一次发生。

有什么建议吗?

1 个答案:

答案 0 :(得分:2)

如果注入的内容脚本的大小是个问题,那么请注入一个小代码来检查状态:

myExtensionVariables

全局变量window.done不是问题,因为只有您注入的内容脚本才会看到它,而不是网页。

对于弹出式脚本中的windowwebNavigation指的是弹出式迷你窗口,而不是网页,所以它确实对任务没用。

总的来说,我坚持你的实施,因为它是最简单的。否则,您必须跟踪chrome.storage个事件,并在IPAddress[] arr=Dns.GetHostAddresses(ConfigurationSettings.AppSettings["Host"].ToString()); foreach (IPAddress ip in arr) { Console.WriteLine(ip.ToString()); } 或持久性背景页面中维护带有注入脚本的标签ID列表。