how to deal with cdn js files #1255

honwhy · 2024-12-06T13:51:40Z

honwhy
Dec 6, 2024

I have been working for several days on porting a web project into a Chrome extension, which, as a result, allows the web project to run in the form of the extension's options page.

However, the web project currently relies on some CDN-hosted JavaScript sources, which is not a standard practice for Chrome extensions. Significant work will be required: downloading the CDN-hosted JavaScript files, adding them to the project, and updating the HTML script links accordingly.

For example, the original index.html file looks like this:

<!-- index.html -->
<body>
    <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
</body>

After some necessary work, there will be a newly created file such as /chunks/tex-svg-{hash}.js, and the code lines in index.htmlwill change to:

<!-- index.html -->
<body>
    <script id="MathJax-script" src="/chunks/tex-svg-{hash}.js"></script>
</body>

However, it is possible to achieve this functionality using a Vite plugin, so you do not need to modify the web project's source code directly.

Fortunately, I have successfully implemented this approach in development server mode by using virtual files to mimic certain functionalities from the devPrerenderHtml plugin of the wxt project.

// Stored outside the plugin to effect all instances of the htmlScriptToVirtual plugin.
const inlineScriptContents: Record<number, string> = {}
export function htmlScriptToVirtual(
  config: wxt.ResolvedConfig,
  getWxtDevServer: () => wxt.WxtDevServer | undefined,
): vite.PluginOption {
  const virtualInlineScript = `virtual:md-inline-script`
  const resolvedVirtualInlineScript = `\0${virtualInlineScript}`

  const server = getWxtDevServer?.()
  return [
    {
      name: `md:dev-html-prerender`,
      apply: `build`,
      async transform(code, id) {
        if (
          server == null
          || !id.endsWith(`.html`)
        ) {
          return
        }
        const { document } = parseHTML(code)
        // Replace inline script with virtual module served via dev server.
        // Extension CSP blocks inline scripts, so that's why we're pulling them out.
        const promises: Promise<void>[] = []
        const inlineScripts = document.querySelectorAll(`script[src^=http]`)
        inlineScripts.forEach(async (script) => {
          promises.push(new Promise<void>((resolve) => {
            const url = script.getAttribute(`src`) ?? ``
            doFetch(url).then((textContent) => {
              const hash = murmurHash(textContent)
              inlineScriptContents[hash] = textContent
              script.setAttribute(`src`, `${server.origin}/@id/${virtualInlineScript}?${hash}`)
              if (script.hasAttribute(`id`)) {
                script.setAttribute(`type`, `module`)
              }
              resolve()
            })
          }))
        })
        await Promise.all(promises)
        const newHtml = document.toString()
        config.logger.debug(`transform ${id}`)
        config.logger.debug(`Old HTML:\n${code}`)
        config.logger.debug(`New HTML:\n${newHtml}`)
        return newHtml
      },
    },
    {
      name: `md:virtualize-react-refresh`,
      apply: `serve`,
      resolveId(id) {
        // Resolve inline scripts
        if (id.startsWith(virtualInlineScript)) {
          return `\0${id}`
        }

        // Ignore chunks during HTML file pre-rendering
        if (id.startsWith(`/chunks/`)) {
          return `\0noop`
        }
      },
      load(id) {
        // Resolve virtualized inline scripts
        if (id.startsWith(resolvedVirtualInlineScript)) {
          // id="virtual:md-inline-script?<hash>"
          const hash = Number(id.substring(id.indexOf(`?`) + 1))
          return inlineScriptContents[hash]
        }

        // Ignore chunks during HTML file pre-rendering
        if (id === `\0noop`) {
          return ``
        }
      },
    },
  ]
}
``

honwhy · 2024-12-07T18:39:15Z

honwhy
Dec 7, 2024
Author

in build mode, I make it work by another plugin

export function htmlScriptToLocal(
  wxt: wxt.Wxt,
): vite.Plugin {
  return {
    name: `md:build-html-prerender`,
    apply: `build`,
    transformIndexHtml: {
      order: `pre`,
      async handler(html) {
        const { document } = parseHTML(html)
        const promises: Promise<void>[] = []
        const httpScripts = document.querySelectorAll(`script[src^=http]`)
        if (httpScripts.length > 0) {
          httpScripts.forEach(async (script) => {
            /* eslint-disable no-async-promise-executor */
            promises.push(new Promise<void>(async (resolve) => {
              const url = script.getAttribute(`src`) ?? ``
              if (url?.startsWith(`http://localhost`)) {
                resolve()
                return
              }
              const textContent = await doFetch(url)
              const hash = murmurHash(textContent)
              const jsName = url.match(/\/([^/]+)\.js$/)?.[1] ?? `.js`
              const fileName = `${jsName.split(`.`)[0]}-${hash}.js`
              // write to file
              const outFile = path.resolve(wxt.config.outDir, `./${fileName}`)
              await writeFile(outFile, textContent, `utf8`)
              script.setAttribute(`src`, `/${fileName}`)
              // script.setAttribute(`type`, `module`)
              resolve()
            }))
          })
        }

        // Replace inline script with virtual module served via dev server.
        // Extension CSP blocks inline scripts, so that's why we're pulling them
        // out.
        const inlineScripts = document.querySelectorAll(`script:not([src])`)
        if (inlineScripts.length > 0) {
          inlineScripts.forEach(async (script) => {
            promises.push(new Promise<void>(async (resolve) => {
              // Save the text content for later
              const textContent = script.textContent ?? ``
              const hash = murmurHash(textContent)
              const fileName = `md-inline-${hash}.js`
              // write to file
              const outFile = path.resolve(wxt.config.outDir, `./${fileName}`)
              await writeFile(outFile, textContent, `utf8`)
              // Replace unsafe inline script
              const virtualScript = document.createElement(`script`)
              // virtualScript.type = `module`
              virtualScript.src = `/${fileName}`
              script.replaceWith(virtualScript)
              resolve()
            }),
            )
          })
        }
        await Promise.all(promises)
        const newHtml = document.toString()
        wxt.config.logger.debug(`Old HTML:\n${html}`)
        wxt.config.logger.debug(`New HTML:\n${newHtml}`)
        return newHtml
      },
    },
  }
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to deal with cdn js files #1255

{{title}}

Replies: 1 comment

{{title}}

Select a reply

how to deal with cdn js files #1255

honwhy Dec 6, 2024

Replies: 1 comment

honwhy Dec 7, 2024 Author

honwhy
Dec 6, 2024

honwhy
Dec 7, 2024
Author