How to Debug Offscreen Pages in Chrome Extension Manifest V3

Debugging offscreen pages in Chrome extensions using Manifest V3 can be challenging, but there are effective methods to overcome this issue. Here are the primary approaches:

1. Use chrome://inspect/#other

Navigate to chrome://inspect/#other in Chrome to find and debug your offscreen page. This method allows direct access to the offscreen page's console and debugging tools.

2. Implement a logging relay system

If the offscreen window closes too quickly, create a helper function in the offscreen page to send logs to the background script:

const log = async (...args) => chrome.runtime.sendMessage({
  target: 'background',
  type: 'log',
  data: args,
});

Add a listener in the background script to receive and display these logs:

chrome.runtime.onMessage.addListener((message) => {
  if (message.target === 'background' && message.type === 'log') {
    console.log(...message.data);
  }
});

Use the log function in your offscreen page:

log('clipboard');

3. Inspect from the Chrome Extensions page

1. Go to chrome://extensions

2. Find your extension and open its details

3. Locate the "Inspect views" section

4. Click on your offscreen page link

This method opens Chrome DevTools for the offscreen page, allowing you to view console logs and debug effectively.