Chrome 扩展：获取页面上的所有图像

Question

在阅读了几个小时的 Google 文档和 Stackoverflow 之后，我决定发布这个问题。已经有一些类似的答案，但我还没有找到真正对我有帮助的答案。但是，我正在尝试获取页面上嵌入的所有图像的列表，以便在 Chrome 扩展程序中使用它。我尝试使用简单的 Javascript (document.images) 来完成此操作，但没有得到任何条目。经过一些研究，我发现从页面读取元素的唯一方法是使用事件监听器。应使用 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]);
    });
}

第一个警报工作完美，但其他一切都什么也没做。

Answer 1

首先，您必须实际获取图像，方法是使用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每个图像发送回背景页面，以便您可以对其执行任何操作。