javascript - Chrome 扩展 : Get all images on page

Question

在阅读 Google 文档和 Stackoverflow 数小时后，我决定发布这个问题。已经有一些类似的，但我还没有找到真正帮助我的答案。但是，我试图获取页面上嵌入的所有图像的列表，以便在 Chrome 扩展程序中使用它。我尝试使用 simle 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]);
    });
}

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

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 发送回您的背景页面，这样您就可以用它做任何您想做的事情。