Chrome扩展程序，点击复制图片网址

我是制作Chrome扩展程序的新品牌，并且已经完成了简单的教程，但我无法找到所需的内容。我希望扩展程序允许用户选择网页上的图像，然后将该图像的URL复制到扩展程序中。谁能帮我吗？我确信如果我看到一个例子，我会更好地理解扩展如何与页面交互。Chrome扩展程序，点击复制图片网址

来源

2012-05-03 Keith

你能澄清你的意思是什么“将URL复制到扩展名*”中？你到底想做什么？ – apsillers

我的意思是，当我点击任何图片时，标签的src属性可供Chrome扩展程序访问，因此我可以使用它进行操作。 – Keith

添加了一个可能更接近您想要的选项。 – apsillers

从我对你的问题的理解中，我想说你想创建一个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。

编辑与替代：

你可能想的是被注入到每个页面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。

来源

2012-05-03 04:50:57 apsillers

谢谢！所以我从文档中知道“匹配”是必需的。你如何编写匹配，使其适用于任何域？就像“http：// */*”？ – Keith

这适用于HTTP页面，但不适用于HTTPS页面。通用匹配模式是'*：// */*' - 所有域上的所有主机上的所有文件。（如果允许文件访问，真的只是'http'，'https'和'file';任何其他协议，例如'ftp'，都不允许。）请参阅[匹配模式]（http://code.google .com/chrome/extensions/match_patterns.html）。 – apsillers

在此基础上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

来源

2012-07-13 17:15:12

Chrome扩展程序，点击复制图片网址

回答

相关问题