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擴展程序，點擊複製圖片網址

回答

相關問題