我是制作Chrome扩展程序的新手,并完成了简单的教程,但我无法找到我需要的内容。我希望扩展程序允许用户在网页上选择图像,然后将该图像的URL复制到扩展名中。谁能帮我吗?我确信如果我看到一个例子,我会更好地了解扩展如何与页面交互。
答案 0 :(得分:6)
根据我对您的问题的理解,我想您要创建一个context menu项,当您右键单击图像时会显示该项。例如,在后台脚本中,使用:
chrome.contextMenus.create({
title: "Use URL of image somehow",
contexts:["image"],
onclick: function(info) {
handleImageURL(info.srcUrl);
}
});
function handleImageURL(url) {
// now do something with the URL string in the background page
}
这将添加一个显示在所有页面上的上下文菜单项,但只有在右键单击图像时才会显示。当用户选择它时,菜单项的onclick
处理程序以图像的URL作为参数触发handleImageURL
。 URL可以以您喜欢的任何方式处理,例如,保存在localStorage
列表中,通过Ajax发送到服务器,或passed in a message到当前标签中的监听content script。 / p>
使用替代方案进行编辑:
您可能希望将content script注入每个页面。该脚本可以在加载时将事件侦听器绑定到每个图像元素:
// in my_content_script.js...
var imgs = document.getElementsByTagName("img");
for(var i = 0, i < imgs.length; ++i) {
imgs[i].addEventListener("click", function() {
alert(this.src);
// do things with the image URL, this.src
});
}
要将其注入example.com
的所有子域,您的清单将包括:
...
"content_scripts": {
"matches":["*://*.example.com/*"],
"scripts":["my_content_script.js"]
},
...
请注意,此纯JS解决方案不会将侦听器附加到加载时间后动态添加的图像。要使用jQuery在内容脚本中执行此操作,请使用:
$(document).on("click", " img", function() {
alert(this.src);
});
将您的jQuery文件名添加到清单中的scripts
数组,my_content_script.js
旁边。
答案 1 :(得分:0)
基于此Google Chrome Extension sample:
var images = [].slice.apply(document.getElementsByTagName('img'));
var imageURLs = images.map(function(image) {
return image.src;
});
chrome.extension.sendRequest(images);
有关更详细的示例(例如,如何处理请求),您可以查看我写的名为Image Downloader
的扩展程序