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()功能提供一系列网址。（最佳解决方案）
在不给予焦点的情况下创建窗口（将"focused ": false添加到赋予create函数的对象中），并在创建最后一个选项卡时仅对其进行焦点化。
从内容脚本或背景页面打开标签。

在检查弹出窗口时，Google Chrome的行为会有所不同

1 个答案: