当浏览弹出窗口时，Google Chrome的行为会有所不同 [英] Google Chrome behaves differently when the popup is being inspected

问题描述

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

奇怪的是，它的工作原理与我期望的完全一样我右键单击扩展名图标并单击检查弹出窗口。当我正常使用它时，不会按预期工作。正常使用时，它只能打开3或4张图像（即使是狡猾的是它每次打开的图像数量也不同）。

这是我的代码

popup.html
$ b

 < ; script type =text / javascript> 
 
函数getImages（）{
 chrome.tabs.getSelected（null，function（tab）{
 chrome.tabs.sendRequest（tab.id，{code：getImages }，function（images）{
 console.log（images）; 
 openImages（images）; 
}）; 
}）; 
 
 
函数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（）;>打开图片< / 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）; 
 
为（var i = 0; i< images.length; i ++）{
 urls.push（images [i] .src）; 
} 
 console.log（urls）; 
回应（网址）; 
} 
} 
）; 
  

任何人都有任何想法，为什么会这样？

解决方案

当您打开新窗口时，它会获得焦点，从而导致弹出窗口失去焦点。通常情况下，Chrome会在关闭焦点时关闭扩展程序弹出窗口，但在使用WebInspector检查时会保持打开状态。看起来，在弹出页面中，你的 images 列表变量被杀死。

解决这个问题：

• 将一个URL数组赋给 windows.create（） code>函数。 （最佳解决方案）

• 创建窗口而不给它焦点（将focused：false 添加到赋予create函数的对象），并且只在创建最后一个标签页时才给予焦点。


• 打开内容脚本或背景页面的标签。

In my attempts to learn how to write Google Chrome extensions I decided to write one where upon clicking a button in the popup the extension opens a new window and opens a new tab for every image on the page. Each tab's url is the src for each image. (I don't think this is particularly useful, I'm doing it merely as an exercise).

The weird thing is that it works exactly as I would expect when I have right-clicked on the extension icon and clicked 'inspect popup'. It doesn't work as expected when I just use it normally. When used normally it only opens 3 or 4 of the images (even weirder is that it's a different number of images it manages to open each time).

Here is my code

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);
        }
    }
);

Anyone have any ideas why this might be?

解决方案

When you open the new window, it gets focus, thereby the popup loses focus. Normally, Chrome closes an extension popup when it loses focus, but keeps it open when you're inspecting it with WebInspector. It seems that with the popup page, your images list variable gets killed.

3 ideas out of many more to fix this:

• Instead of one URL, give an array of URLs to the windows.create() function. (best solution)
• Create the window without giving it focus (add "focused ": false to the object given to the create function) and only give it focus when creating the last tab.
• Open the tabs from the content script or a background page.

这篇关于当浏览弹出窗口时，Google Chrome的行为会有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！