4

在 Google 文档和 Stackoverflow 中阅读了数小时后，我决定发布这个问题。已经有一些类似的，但我还没有找到真正帮助我的答案。但是，我正在尝试获取嵌入页面的所有图像的列表，以便在 Chrome 扩展中使用它。我试过用简单的 Javascript (document.images) 来做，但没有得到任何条目。经过一些研究，我发现从页面读取元素的唯一方法是使用 EventListener。该功能应使用 chrome 上下文菜单启动。

    chrome.contextMenus.create({
    title: "ExampleFunction", 
    contexts:["page"], 
    onclick: exampleFunction,
});

这部分工作正常，但是调用函数后如何获取图像？我尝试了一些使用事件监听器的方法，终于得到了这个功能：

function downloadImages(info,tab) {
    alert('o');
    chrome.extension.onRequest.addListener(function(result){
        for (var i in result.images) {
            allImages.push(result.images[i]);
        }
        alert(allImages[0]);
    });
}

第一个警报完美无缺，但其他一切都无济于事。

4

1 回答 1

4

首先，您必须实际获取图像，这样做的方法是使用content script. 我假设你的 onclick 是一个错字，而你有这个：

chrome.contextMenus.create({
  title: "ExampleFunction", 
  contexts:["page"], 
  onclick: downloadImages,
});

然后你会想要这样的东西：

function downloadImages(info,tab) {
  alert('o');
  chrome.tabs.executeScript(tab.id,{file:"script.js"});
}

chrome.runtime.onMessage.addListener(function(message){
  //In case you want to do other things too this is a simple way to handle it
  if(message.method == "downloadImages"){
    message.images.forEach(function(v){
      allImages.push(v);
    });
    alert(allImages[0]);
  }
});

然后对于您的 script.js：

var images = [];
for(var i = 0; i < document.images.length; i++){
  images.push(document.images[i].src);
}
chrome.runtime.sendMessage({method:"downloadImages",images:images});

这会抓取图像数组并将src每个图像的返回到您的背景页面，这样您就可以对它做任何您想做的事情。

于 2013-04-19T20:04:30.510 回答