检查弹出窗口时，谷歌浏览器的行为有所不同

Question

在我尝试学习如何编写 Google Chrome 扩展程序时，我决定编写一个，在单击弹出窗口中的按钮时，扩展程序会打开一个新窗口并为页面上的每个图像打开一个新选项卡。每个选项卡的 url 是每个图像的 src。 （我认为这不是特别有用，我只是作为练习）。

奇怪的是，当我右键单击扩展图标并单击“检查弹出窗口”时，它的工作方式与我预期的完全一样。当我正常使用它时，它没有按预期工作。正常使用时，它只会打开 3 或 4 张图片（更奇怪的是，每次打开的图片数量都不同）。

这是我的代码

popup.html

<script type="text/javascript">

function getImages() {
    chrome.tabs.getSelected(null, function(tab){
        chrome.tabs.sendRequest(tab.id, {code: "getImages"}, function(images) {
            console.log(images);
            openImages(images);
        });
    });
}

function openImages(images) {
    chrome.windows.create({url: images[0]}, function(window) {
        for(var i=1; i<images.length; i++) {
            chrome.tabs.create({windowId: window.id, url: images[i]});
        }
    });
}

</script>

<button onclick="getImages();">Open images</button>

contentscript.js

chrome.extension.onRequest.addListener(
    function(request, sender, response) {
        if(request.code == 'getImages') {
            console.log("We're in!");
            var urls = [];
            var images = document.getElementsByTagName("img");

            for(var i=0; i<images.length; i++) {
                urls.push(images[i].src);
            }
            console.log(urls);
            response(urls);
        }
    }
);

有人知道为什么会这样吗？

Answer 1

当您打开新窗口时，它会获得焦点，从而弹出窗口失去焦点。通常，Chrome 会在失去焦点时关闭扩展弹出窗口，但在您使用 WebInspector 检查时保持打开状态。似乎在弹出页面中，您的 images 列表变量被杀死了。

解决此问题的更多想法中的 3 个：

• 给windows.create() 函数提供一组URL，而不是一个URL。 （最佳解决方案）
• 创建窗口时不为其提供焦点（将"focused ": false 添加到创建函数的对象中）并且仅在创建最后一个选项卡时为其提供焦点。
• 从内容脚本或背景页面打开选项卡。