feat: support gtag cdn js in extension (#591)

Author: honwhy

src/modules/build-extension.ts

@@ -68,38 +68,41 @@ export function htmlScriptToVirtual(
     {
       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`)
+      transformIndexHtml: {
+        order: `post`,
+        async handler(html) {
+          if (server == null) {
+            return html
+          }
+          const { document } = parseHTML(html)
+          // 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`) ?? ``
+              if (url?.startsWith(`http://localhost`)) {
+                resolve()
+                return
               }
-              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
+              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(`\nhtmlScriptToVirtual Old HTML:\n${html}`)
+          config.logger.debug(`\nhtmlScriptToVirtual New HTML:\n${newHtml}`)
+          return newHtml
+        },
       },
     },
     {
@@ -140,7 +143,7 @@ export function htmlScriptToLocal(
     name: `md:build-html-prerender`,
     apply: `build`,
     transformIndexHtml: {
-      order: `pre`,
+      order: `post`,
       async handler(html) {
         const { document } = parseHTML(html)
         const promises: Promise<void>[] = []
@@ -156,7 +159,10 @@ export function htmlScriptToLocal(
               }
               const textContent = await doFetch(url)
               const hash = murmurHash(textContent)
-              const jsName = url.match(/\/([^/]+)\.js$/)?.[1] ?? `.js`
+              let jsName = url.match(/\/([^/]+)\.js$/)?.[1] ?? `.js`
+              if (url.indexOf(`?`) > 0) {
+                jsName = `${url.substring(url.indexOf(`?`) + 1)}.js`
+              }
               const fileName = `${jsName.split(`.`)[0]}-${hash}.js`
               // write to file
               const outFile = path.resolve(wxt.config.outDir, `./${fileName}`)
@@ -194,8 +200,8 @@ export function htmlScriptToLocal(
         }
         await Promise.all(promises)
         const newHtml = document.toString()
-        wxt.config.logger.debug(`Old HTML:\n${html}`)
-        wxt.config.logger.debug(`New HTML:\n${newHtml}`)
+        wxt.config.logger.debug(`\nhtmlScriptToLocal Old HTML:\n${html}`)
+        wxt.config.logger.debug(`\nhtmlScriptToLocal New HTML:\n${newHtml}`)
         return newHtml
       },
     },