Javascript Bookmarklets

inspect.js

        const script = document.createElement("script")
        script.type = "module"
        script.src = "https://cdn.jsdelivr.net/gh/vanillawc/wc-monaco-editor@1/index.js"
        document.head.appendChild(script)
        const mainDiv = document.createElement("div")
        mainDiv.id = "inspect-main"
        const textarea = document.createElement("wc-monaco-editor")
        textarea.setAttribute("language", "html")
        textarea.setAttribute("src", `data:text/plain,${encodeURIComponent(document.documentElement.innerHTML)}`)
        document.body.appendChild(mainDiv)
        textarea.spellcheck = false
        mainDiv.appendChild(textarea)
        const style = document.createElement("style")
        style.id = "inspect-style"
        const buttonsDiv = document.createElement("div")
        buttonsDiv.id = "inspect-buttons"
        const applyBtn = document.createElement("button")
        applyBtn.id = "inspect-btns-apply"
        applyBtn.innerText = "Apply"
        buttonsDiv.appendChild(applyBtn)
        function inspectDestruct(){
            document.getElementById("inspect-main").remove()
            document.getElementById("inspect-style").remove()
        }
        applyBtn.addEventListener("click", () => {
            document.documentElement.innerHTML = textarea.value
            setTimeout(() => {
                inspectDestruct()
            }, 100);
        })
        mainDiv.appendChild(buttonsDiv)
        style.innerHTML = `
            /* pikapower9080 inspect main CSS, injected by bookmarklet */
            #inspect-main{
                position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                padding: 10px;
                width: 90vw;
                height: 80vh;
                border: 1px solid gray;
                border-radius: 4px;
                z-index: 1000;
                background-color: white;
            }
            #inspect-main textarea{
                width: 100%;
                font-family: monospace;
            }
        `
        document.head.appendChild(style)