Generated HTML file shows only black screen

[nguyenquoc2k]

Refused to load the script 'blob:null/25dc4d24-3dd0-4f07-8eab-18188fbd51b9' because it violates the following Content Security Policy directive: "script-src https://tpc.googlesyndication.com https://pagead2.googlesyndication.com 'unsafe-eval' 'unsafe-inline' https://ajax.googleapis.com/ajax/ https://s0.2mdn.net/ads/studio/cached_libs/ https://storage.googleapis.com/vr-assets-static/test_ads/GMAPlayable/ https://www.gstatic.com/ads/ci/ https://www.gstatic.com/swiffy/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

[scintil89]

I used the method to avoid the blob on facebook in another issue.

i fix exportSingleFile function in playable-adapter-core/src/exporter/base.ts

export const exportSingleFile = async (singleFilePath: string, options: TBuilderOptions) => {
  const { channel, transformHTML, transform } = options

  console.info(`【${channel}】adaptation started`)
  const singleHtml = readToPath(singleFilePath, 'utf-8')
  const targetPath = join(getGlobalProjectBuildPath(), `${channel}.html`)

  // Replace global variables.
  let $ = load(singleHtml)
  fillCodeToHTML($, options)

  // Inject additional configuration.
  await injectFromRCJson($, channel)
  writeToPath(targetPath, $.html())

  if (transformHTML) {
    await transformHTML($)
    writeToPath(targetPath, $.html())
  }

  if (channel === 'Google') {
    console.info(`【${channel}】applying blob-disabled patches`)

    try {
      let htmlContent = readToPath(targetPath, 'utf8')

      const start = htmlContent.indexOf('function __adapter_init_js')
      if (start === -1) {
        console.warn(`【${channel}】__adapter_init_js function not found`)
      } else {
        let open = 0, end = -1, inStr = false, strCh = '', esc = false

        for (let i = start; i < htmlContent.length; i++) {
          const ch = htmlContent[i]

          if (inStr) {
            esc = ch === '\\' && !esc
            if (!esc && ch === strCh) inStr = false
            continue
          }
          if (ch === '"' || ch === "'" || ch === '`') {
            inStr = true
            strCh = ch
            continue
          }

          if (ch === '{') {
            if (open++ === 0) { /* first bracket */ }
          } else if (ch === '}' && --open === 0) {
            end = i + 1
            break
          }
        }

        if (end === -1) {
          console.warn(`【${channel}】could not find closing brace for __adapter_init_js`)
        } else {
          const replacement = `function __adapter_init_js(){
    System.__proto__.createScript = function (e) {
        var t = __adapter_get_script(e.replace(__adapter_get_base_url(), ""));
        var s = document.createElement("script");
        s.async = !0;
        s.crossOrigin = "anonymous";
        s.text = t;
        setTimeout(() => { s.dispatchEvent(new Event("load")); });
        return s;
    };
}`

          htmlContent = htmlContent.slice(0, start) + replacement + htmlContent.slice(end)
          writeToPath(targetPath, htmlContent)
          console.info(`【${channel}】patched HTML file for Google compatibility`)
        }
      }
    } catch (error) {
      console.error(`【${channel}】Google patch failed:`, (error as Error).message)
    }
  }

  if (transform) {
    await transform(targetPath)
  }

  console.info(`【${channel}】adaptation completed`)
}

It works for me.