Create React App - Link Error Overlay to VS Code

Autolink React.js

// ==UserScript==
// @name         Link Error Overlay to VS Code
// @homepageURL  https://gist.github.com/schuhwerk/c2cd7b4e2b40c462473d6142d15a7140
// @version      2024-06-20
// @description  create-react-app (https://github.com/facebook/create-react-app) comes with an error-overlay (which shows links to files). this script links those to your local vscode.
// @author       Vitus Schuhwerk
// @match        http://localhost:*/*
// @updateURL    https://gist.githubusercontent.com/schuhwerk/c2cd7b4e2b40c462473d6142d15a7140/raw
// @downloadURL  https://gist.githubusercontent.com/schuhwerk/c2cd7b4e2b40c462473d6142d15a7140/raw
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

// wip: https://cdnjs.cloudflare.com/ajax/libs/findAndReplaceDOMText/0.4.6/findAndReplaceDOMText.min.js

var prefixPath = GM_getValue("prefixPath",  "")
if ( ! prefixPath) {
    prefixPath = prompt ( `Path not set for ${location.hostname}. Please enter an absolute path (to your workspace, "like vscode://file/Users/.../" )`,'');
    GM_setValue ("prefixPath", prefixPath);
}

GM_registerMenuCommand("Change Path", () => {
  prefixPath = prompt (`Change "prefixPath" for ${location.hostname}:`, prefixPath )
  GM_setValue("prefixPath",  prefixPath);
});


;(function () {

    // @todo: any path: combination of not space and forward-slash /.
    const linkError = (prefix, text) =>
      text.replaceAll(/([^\s]+\.tsx?)[\s:]?([0-9]*)?/g, `<a style='color:inherit' href='${prefix}$1:$2'>./$1</a> $2`)

    const loopFrames = () =>
    document && document.querySelectorAll("iframe").forEach((iframe) => {
        let body = iframe.contentWindow.document?.body
        if ( body === null || ! body?.querySelectorAll || ! body ){
          console.log( "odd, your iframe does not have a body (yet)")
        }
        let elms = body ? body.querySelectorAll("div") : []
        elms.forEach((elm) => {
            /*console.log("fifi",findAndReplaceDOMText( elm, {
              find : /ERROR in ([^\s]+\.tsx?)[\s:]?([0-9]*)?/g,
              replace: (offsetText, foundText) => {
                  console.log( "ft", foundText , offsetText)
                  const anchor = document.createElement('a');
                  anchor.textContent = offsetText.text;
                  anchor.setAttribute('href', `${prefixPath}${foundText[0]}`);
                  return anchor;
              }
          }))*/
            // check for node that only contains text.
            if (elm.textContent && elm.childNodes.length == 1 && elm.childNodes[0].nodeType === 3) {
                elm.innerHTML = linkError( prefixPath, elm.textContent )
            }
        })
        // console.log("taper i", elms, findAndReplaceDOMText)
    })

    setTimeout(() => loopFrames(), 1500)
    window.addEventListener("message", (e) => {
        if (e.data.source == "react-devtools-content-script") {
            return
        }
        let lf = loopFrames()
        //console.log(findAndReplaceDOMText, e.data.source, e.data, "updating Autolink", lf )
        // loopFrames()
        })
})()