如何获得铬扩展中的图像列表 [英] How to get a list of images urls in chrome extension
问题描述
我一直在创建我的第一个Chrome扩展。我已经完成了几个示例扩展，可以在 https://developer.chrome.com/extensions / getstarted
I have been working on creating my first chrome extension. I have done several of the sample extensions that can be found at https://developer.chrome.com/extensions/getstarted
如何制作一个扩展程序，它将返回chrome中打开选项卡上所有图像的src列表？
How do I make an extension that will return a list of the src of all of the images on an open tab in chrome?
我知道javascript的基础知识，所以我想用该语言创建扩展。这不像另一个，我想获得完整的网址，我想使用简单的JavaScript而不是尝试使用json，我不知道。
I know the basics in javascript, so I would like to create the extension with that language. This is not like the other in that I would like to get the full url and I would like to use simple javascript instead of trying to use json which I don't know.
这是我的manifest.json文件
Here is my manifest.json file
{
"name": "Getting Started",
"description": "Get The sources of the images",
"version": "2.0",
"permissions":[
"activeTab",
"tabs"
],
"browser_action":{
"default_title": "Image Source",
"default_popup": "popup.html"
},
"content_scripts":[
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"manifest_version": 2
}
这里是我的content.js文件
And here is my content.js file
var len = document.images.length;
var imgs = document.images;
var sources = "";
for (var i = 0; i < imgs.length; i++){
sources = sources + imgs[i].src + "<br>";
}
document.getElementById("sources").innerHTML = sources;
/*if (len > 0){
alert(len + " images were found on page");
}
else{
alert("No images were found on page");
}*/ // Used these to see if there were any images on the page
最后，我的popup.html
And finally my popup.html
<html>
<head>
<title>Awesome extension</title>
<script src="content.js"></script>
</head>
<body>
<p id="sources">There might be images here</p>
</body>
</html>
推荐答案
当您的扩展程序点击你可以使用 chrome.tabs.executeScript注入你的内容脚本 ，而不是在manifest.json中包含content_scripts条目，并使用 Array.prototype.map 以获取图片来源的数组：
To get the images from the active tab when your extension is clicked you can inject your content script using chrome.tabs.executeScript instead of having a content_scripts entry in the manifest.json and use Array.prototype.map to get an array of the images' sources:
popup.html
<html>
<head>
<title>Awesome extension</title>
<script src="popup.js"></script>
</head>
<body>
<p id="sources">There might be images here</p>
</body>
</html>
popup.js
var callback = function (results) {
// ToDo: Do something with the image urls (found in results[0])
document.body.innerHTML = '';
for (var i in results[0]) {
var img = document.createElement('img');
img.src = results[0][i];
document.body.appendChild(img);
}
};
chrome.tabs.query({ // Get active tab
active: true,
currentWindow: true
}, function (tabs) {
chrome.tabs.executeScript(tabs[0].id, {
code: 'Array.prototype.map.call(document.images, function (i) { return i.src; });'
}, callback);
});
manifest.json
{
"name": "Getting Started",
"description": "Get The sources of the images",
"version": "2.0",
"permissions":[
"activeTab",
"tabs"
],
"browser_action":{
"default_title": "Image Source",
"default_popup": "popup.html"
},
"manifest_version": 2
}
这篇关于如何获得铬扩展中的图像列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
