// ==UserScript==
// @name         下载instgram图片
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Download instgram picture, only support picture
// @description  Click three circle button to show '下载图片' button
// @author       You
// @match        https://www.instagram.com/*
// @require      https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        unsafeWindow
// @run-at       document-idle
// @license MIT 
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';

    // Your code here...
    /** 更多选项列表的选择器 */
    const selectionListSelector = 'div.RnEpo.Yx5HN > div > div > div > div';
    /** 复制图片按钮选择器 */
    const copyURLSelector = `${selectionListSelector} > button:nth-last-child(3)`;
    /** 下载图片按钮 */
    const downloadPictureBtn = '<button downloadpicture="true" class="aOOlW   HoLwm " tabindex="0" style="color: #58c322">下载图片</button>';
    /** 下载图片按钮事件*/
    $('body').click(async (el) => {
        if (el.target.getAttribute('downloadpicture') === 'true') {
            $(copyURLSelector).click();
            const copiedText = await navigator.clipboard.readText();
            console.log(`copiedText`, copiedText);
            downloadPicture(copiedText);
        }
    });

    /** DOM变动的回调函数 */
    const callback = function (mutationRecord) {
        for (const record of mutationRecord) {
            const nodeList = record.addedNodes;
            if (nodeList.length === 1 && isMoreOptionButton(nodeList[0])) {
                $(selectionListSelector).prepend(downloadPictureBtn);
            }
        }
    };
    /** 检测DOM变动 */
    const observer = new MutationObserver(callback);
    observer.observe(document.body, {
        childList: true,
        subtree: false
    });

    /**
     * 判断是否是更多选项按钮
     * @param {Node} node
     * @return {boolean}
     */
    function isMoreOptionButton(node) {
        const classList = node.classList;
        if (classList) {
            return classList.contains('RnEpo') && classList.contains('Yx5HN');
        }
        return false;
    }

    /**
     * 根据链接下载图片
     * @param {string} uri
     */
    async function downloadPicture(uri) {
        let formatedUri = uri;
        if (uri.includes('?utm_source')) {
            formatedUri = uri.match(/.*(?=\?utm_source)/);
        }
        formatedUri += '?__a=1';
        try {
            const {
                data
            } = await axios.get(formatedUri);
            const {
                src
            } = data.graphql.shortcode_media.display_resources[2];
            // window.open(src, '_blank');
            download(src);
            console.log('src :>> ', src);
        } catch (error) {
            console.log('download error :>> ', error);
        }

    }

    /**
     * 下载源
     * @param {string} src
     */
    function download(src) {
        const a = document.createElement('a');
        a.target='_blank';
        a.href = src;
        document.body.append(a);
        a.click();
        a.remove();
    }
})();