Tampermonkey

facebook-icon.js

// ==UserScript==
// @name         Facebook Albums Icon
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  try to take over the world!
// @author       Kananek Thongkam
// @match        https://www.facebook.com/media/set/?set=*type=3
// @match        https://www.facebook.com/*/media_set/?set=*
// @grant        none
// ==/UserScript==

const elementDownload = (elem) => {
    return elem.innerHTML.match(/aria-label=".+?"[\W\w]+?<\/a>/ig).map(e => (/<img[\W\w]+?src="([\W\w]+?)"/ig.exec(e) || [])[1].replace(/&amp;/ig,'&')).filter(e => e)
}
const elementFetch = async (className) => {
    console.log('GET::', className)
    const elem = Array.from(document.querySelectorAll(className))
    const col = elem.length
    let manga = []
    let i = 0, l = 0
    for await (const e of elem) {
        const url = await elementDownload(e)
        l = 0
        for (const e of url) {
            manga.push({ id: (i + l * col) + 1, url: e })
            l++
        }
        i++
    }
    return manga.sort((a,b) => a.id > b.id ? 1 : -1)
}

const delayElement = (t) => {
    return new Promise((r) => {

        const recheck = () => {
            let titleName = document.body.innerHTML.match(/<span.class="([\w ]+?)".dir="auto">([\w ]+?)<\/span>/ig)
            let className = /aria-label="รูปภาพอัลบั้มรูปภาพ"/.exec(document.body.innerHTML)
            if (!className || !titleName) {
                return setTimeout(recheck, t)
            }
            let index = className.index
            className = document.body.innerHTML.substring(index - (94 + 9*3), index).substring(0, 9*3)
            className = className.replace(/ /ig,'.')

            let [ , cName, cTitle ] = /<span.class="([\w ]+?)".dir="auto">([\w ]+?)<\/span>/ig.exec(titleName[1])
            titleName = cTitle.trim()

            const title = document.querySelector('.'+cName.replace(/ /ig,'.'))
            const image = document.querySelectorAll(className)

            if (title.length > 0 && image.length > 0) return r({ className, titleName })
            setTimeout(recheck, t)
        }
        setTimeout(recheck, t)
    })
}

const addIconDownload = async ({ className, titleName }) => {
     const icon = `<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" style="fill: #3bad22;" viewBox="0 0 944.699 944.699" xml:space="preserve"><g>
	<path d="M894.801,579.05h-309.5l-41.5,47.199c-18,20.5-44.102,32.301-71.401,32.301c-27.3,0-53.4-11.801-71.4-32.301l-41.5-47.199
		H50c-27.6,0-50,22.4-50,50v198.5c0,27.6,22.4,50,50,50h844.699c27.602,0,50-22.4,50-50v-198.5
		C944.801,601.45,922.4,579.05,894.801,579.05z M139.2,770.95c-23.5,0-42.6-19.102-42.6-42.602s19.1-42.6,42.6-42.6
		s42.6,19.1,42.6,42.6S162.7,770.95,139.2,770.95z"/>
	<path d="M419.4,579.05l15.4,17.6c10,11.301,23.8,17,37.6,17c13.799,0,27.6-5.699,37.6-17l15.4-17.6L734.1,341.25
		c28.4-32.3,5.4-83-37.6-83h-65.6v-141.1c0-27.6-22.4-50-50-50h-217c-27.6,0-50,22.4-50,50v141.2h-65.6c-43,0-65.9,50.7-37.6,83
		L419.4,579.05z"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>`

    let eTitle = document.getElementsByClassName(titleName)[0]

    var eLink = document.createElement("a");
    eLink.setAttribute('href','#')
    eLink.setAttribute('style','margin-top: 10px;margin-right:7px;')

    var eIcon = document.createElement('div');
    eIcon.innerHTML = icon
    eLink.appendChild(eIcon.firstChild)
    eLink.addEventListener('click', (e) => {
        event.preventDefault()
        eLink.remove()
        return elementFetch(className).then(manga => {
            console.log(manga)
        }).catch(console.error)
    }, false)
    eTitle.appendChild(eLink)
    eTitle.appendChild(eTitle.firstElementChild)
}

(async () => {
    'use strict';
    delayElement(1000).then(async (data) => {
        console.log('RUN::addIconDownload')
        await addIconDownload(data)
    })
})()