画像を右クリックしてコンテキストメニューに表示される文字をクリックして選択した画像をダウンロードするChrome拡張機能を作ろうとしています。ダウンロードする方法は、aタグのhrefにData URL Schemeを入力します。しかし、URLを取得する際にjQueryのattr("src")ではundefinedが返ってきます。"data:image/jpeg;base64,/...jpg"のようなData URL Schemeを取得したいです。
欲しいData URL Scheme:
Undefinedがコンソールに表示される:
background.js
function image_download(url){
var downLoadLink = document.createElement("a");
downLoadLink.download = "test";
downLoadLink.href = url;
downLoadLink.click();
}
chrome.contextMenus.create({
"title":"Download Image",
"type":"normal",
"contexts":["image"],
"onclick":function(){
var src = $(this).children('img').attr('src');
console.log(src);
image_download(src);
}
});
manifest.json
{
"name": "Easy Image Download",
"description": "Automatically save the file names in order",
"version": "1.0",
"content_scripts": [{
"js": ["js/jquery-3.5.0.min.js","js/images.js"],
"matches": ["http://*/*", "https://*/*"]
}],
"background" : {
"scripts" : ["js/jquery-3.5.0.min.js","js/background.js"]
},
"browser_action": {
"default_icon": "img/icon.png",
"default_title": "Easy Image Download",
"default_popup" : "html/popup.html"
},
"permissions" : [
"contextMenus",
"http://*/*",
"https://*/*",
"downloads",
"storage"
],
"manifest_version": 2,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
}