Quick 'n dirty little userscript for accessing pictures and videos off of Instagram. Everything is accessed via right-clicking image or video. Note: for videos requires viewing the actual post (not just in the feed).
目前为
// ==UserScript==
// @name Instagram Downloader
// @namespace https://lawrenzo.com/p/direct-picture-link
// @version 1.0.2
// @description Quick 'n dirty little userscript for accessing pictures and videos off of Instagram. Everything is accessed via right-clicking image or video. Note: for videos requires viewing the actual post (not just in the feed).
// @author Lawrence Sim
// @license WTFPL (http://www.wtfpl.net)
// @match https://*.instagram.com/*
// @grant none
// ==/UserScript==
(function() {
var contextMenu,
styles = {
'position': 'absolute',
'background': '#efefef',
'border-radius': '0.2em',
'box-shadow': '1px 1px 3px 1px rgba(0,0,0,0.4)',
'padding': '0.2em 0.5em',
'font-size': '0.85em',
'z-index': '999999'
};
var openContextMenu = (evt, src, isVideo) => {
let a;
if(!contextMenu) {
contextMenu = document.createElement("div");
for(let key in styles) contextMenu.style[key] = styles[key];
a = document.createElement("a");
a.setAttribute("target", "_blank");
contextMenu.append(a);
document.body.append(contextMenu);
}
a = a || contextMenu.querySelector("a");
a.setAttribute("href", src);
if(isVideo) {
a.setAttribute("download", "video");
a.innerHTML = "> view video";
} else {
a.setAttribute("download", "");
a.innerHTML = "> view image";
}
contextMenu.style.left = `${evt.pageX}px`;
contextMenu.style.top = `${evt.pageY}px`;
};
document.body.addEventListener("click", () => {
if(!contextMenu) return;
contextMenu.remove();
contextMenu = null;
});
var postRegExp = /https?:\/\/(?:www\.)?instagram\.com\/(?:p|reel|tv)\/([A-Za-z0-9\-\_]+)\//,
getPostId = () => (window.location.href.match(postRegExp) || [null])[1],
fixMediaUrl = url => "https://scontent"+url.slice(url.indexOf(".cdninstagram.com"));
var mediaUrlMap = {};
var getMediaUrls = async (postID, onComplete) => {
if(mediaUrlMap[postID]) {
return Promise.resolve(mediaUrlMap[postID]);
}
return fetch("https://www.instagram.com/p/"+postID+"/?__a=1")
.then(res => {
if(!res && !res.ok) throw Error(res.statusText);
return res.json();
})
.then(json => {
if(!json) throw Error("Could not fetch JSON");
let shortcodeMedia;
try {
shortcodeMedia = json.graphql.shortcode_media;
} catch(e) {
throw Error(`Error reading JSON (${!!json.grapql},${json.graphql && json.graphql.shortcut_media})`);
}
let edges, mediaUrls;
switch(shortcodeMedia.__typename) {
case 'GraphImage':
mediaUrls = [fixMediaUrl(shortcodeMedia.display_url)];
break;
case 'GraphVideo':
mediaUrls = [fixMediaUrl(shortcodeMedia.video_url)];
break;
default:
edges = shortcodeMedia.edge_sidecar_to_children && shortcodeMedia.edge_sidecar_to_children.edges;
mediaUrls = edges && edges.map(edge => {
return fixMediaUrl(edge.node.is_video ? edge.node.video_url : edge.node.display_url);
});
break;
}
return mediaUrlMap[postID] = mediaUrls;
})
.catch(err => console.log(err) && null);
};
var linkPicture = (img, src, multi) => {
let btn = multi ? multi.querySelector("div[role='button']") : img.parentNode.parentNode;
if(!btn) return;
btn.addEventListener("contextmenu", evt => {
evt.preventDefault();
openContextMenu(evt, src || img.getAttribute("src"));
});
img.setAttribute("ilnkd", 1);
};
var linkVideo = (vid, src, multi) => {
let btn = multi ? multi.firstChild : vid.parentNode.parentNode.parentNode.parentNode;
if(!btn) return;
btn.addEventListener("contextmenu", evt => {
evt.preventDefault();
openContextMenu(evt, src, true);
});
vid.setAttribute("ilnkd", 1);
};
var linkPost = async (mutated, postID, onComplete) => {
var mediaUrls = await getMediaUrls(postID);
if(!mediaUrls) return;
mutated.forEach(mutant => {
mutant.target.querySelectorAll("li").forEach(li => {
let media = li.querySelector("img, video");
if(!media || media.getAttribute("ilnkd") !== null) return;
let thisIndex = 0;
[li.previousSibling, li.nextSibling].find((sibling, i) => {
if(!sibling) return;
let siblingMedia = sibling && sibling.querySelector("img, video"),
nearIndex = parseInt(siblingMedia && siblingMedia.getAttribute("ilnkd") || -1);
if(~nearIndex) {
thisIndex = nearIndex + (i ? -1 : 1);
return true;
}
});
if(media.tagName === "IMG") {
linkPicture(media, mediaUrls[thisIndex], media.closest("li > div"));
} else {
linkVideo(media, mediaUrls[thisIndex], media.closest("li > div"));
}
media.setAttribute("ilnkd", thisIndex);
});
let media = mutant.target.querySelector("article img, article video");
if(!media || media.getAttribute("ilnkd")) return;
if(media.tagName === "IMG") {
linkPicture(media, mediaUrls[0]);
} else {
linkVideo(media, mediaUrls[0]);
}
});
};
var link = (mutated, observer) => {
mutated = mutated || [{target: document.body}];
let postId = getPostId();
if(!postId) {
mutated.forEach(mutant => {
Array.from(mutant.target.querySelectorAll("article img") || [])
.filter(img => !img.getAttribute("ilinkd"))
.forEach(img => linkPicture(img, fixMediaUrl(img.getAttribute("src")), img.closest("li > div")));
});
} else {
linkPost(mutated, postId);
}
};
link();
var obs = new MutationObserver(link);
obs.observe(document.body, {childList:true, subtree:true});
})();