Chrome扩展，点击即可复制图片URL

Question

我是做Chrome扩展的新手，也做过简单的教程，但我很难找到我需要的东西。我希望扩展允许用户选择网页上的图像，然后将该图像的URL复制到扩展中。有人能帮我吗？我敢肯定，如果我看到一个例子，我会更好地掌握扩展如何与页面交互。

Answer 1

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

使用alternative进行编辑：

您可能需要一个注入到每个页面中的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文件名添加到清单中my_content_script.js旁边的scripts数组中。

Answer 2

基于此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的扩展