Chrome 扩展弹出窗口注入 javascript 不止一次

Question

我刚刚开始学习如何进行扩展...

我想要它，以便当弹出窗口首次打开时，它会将 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 注入发生不止一次。

有什么建议吗？

Answer 1

如果注入的内容脚本的大小有问题，则注入一小段代码来检查状态：

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

全局变量 myExtensionVariables 不是问题，因为只有您注入的内容脚本才能看到它，网页看不到。

至于弹窗脚本中的window.done，window指的是弹窗小窗口，不是网页，确实对任务没用。

总的来说，我会坚持使用您的实现，因为它是最简单的实现。否则，您必须跟踪 webNavigation 事件并在 chrome.storage 或持久后台页面中维护带有注入脚本的选项卡 ID 列表。

Chrome 扩展弹出窗口注入 javascript 不止一次

Chrome extension popup injecting javascript more than once

javascript

popup

google-chrome-extension