Question

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

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

这部分工作正常，但如何在调用函数后获取图像？我已经尝试了一些使用eventlisteners的方法，最后得到了这个函数：

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发送回您的背景页面，这样您就可以随意使用它。

Chrome扩展程序：获取所有图片

1 个答案: