Using puppeteer in a wxt / vite project

[blikblum]

When following the official guide to bundle puppeteer in a chrome extension in a wxt project, the extension fails to load due to an UTF8 issue.

After digging a bit, i found that a lot of node libraries are bundled, bringing all kind of stuff like a full JS parser.

I managed to fix it by importing the connect function directly bypassing the module that loads it dynamically depending of the environment.

Here is the code that creates a small focused bundle

A hint for those using puppeteer in a chrome extension: is necessary to declare the 'debugger' permission in manifest

import { ExtensionTransport } from 'puppeteer-core/lib/esm/puppeteer/cdp/ExtensionTransport.js'
import { _connectToCdpBrowser } from 'puppeteer-core/lib/esm/puppeteer/cdp/BrowserConnector.js'
import type { Browser } from 'puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js'
import { initializeLogger, logger } from '../helpers/logger'

export default defineBackground(async () => {
  console.log('Background script initialized')
  await initializeLogger()
  logger.info('Logger initialized in background script')
  let tabBrowser: Browser | undefined
  browser.runtime.onMessage.addListener(async (message) => {
    logger.info('Received message in background script: {message}', { message })
    if (message.action === 'testPuppeteer') {
      logger.info('Received testPuppeteer message in background script')

        if (!tabBrowser) {
          const [tab] = await browser.tabs.query({
            active: true,
            currentWindow: true,
          })

          if (!tab?.id) {
            throw new Error('Failed to find active tab')
          }

          logger.info('Tab found: {tabId}', { tabId: tab.id })

          // Connect Puppeteer using the ExtensionTransport.connectTab.
          const transport = await ExtensionTransport.connectTab(tab.id)
          logger.info('Transport connected: {transport}', { transport })

          tabBrowser = await _connectToCdpBrowser(transport, '', {})

          logger.info('Connected to tab: {tabId}', { tabId: tab.id })
        }

        // You will have a single page on the browser object, which corresponds
        // to the tab you connected the transport to.
        const [page] = await tabBrowser.pages()

      tabBrowser?.disconnect()
      tabBrowser = undefined
    }
  })
})

[aklinker1]

See #353 (comment)

It's a one-line fix

[blikblum]

It's a one-line fix

Rolldown does not have this option

Anyway, bypassing the module that checks at runtime the environment has the benefit of a smaller, faster to build bundle

[aklinker1]

Looks like it's coming:

• [Feature Request]: Support custom charset/encoding like ESBuild rolldown/rolldown#8805
• feat(codegen): add ascii_only option oxc-project/oxc#18118