Offscreen support - Githubissues

Hey. I just had to implement this myself. Nothing really stops you from adding an offscreen document into the file structure but you'll have to add a few lines for webpack.

I'll try to suggest a pull request for this later but here are the instructions for now:

In your webpack.config.js:

Add this line.

popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
background: path.join(__dirname, 'src', 'pages', 'Background', 'index.ts'),
offscreen: path.join(__dirname, 'src', 'pages', 'Offscreen', 'offscreen.ts'), // THIS ONE
contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.tsx'),

You can also add it to hot reload in the same file.
```
notHotReload: [..., 'offscreen'],
```

Next to HtmlWebpackPlugin add this.

new HtmlWebpackPlugin({
  template: path.join(__dirname, 'src', 'pages', 'Offscreen', 'index.html'),
  filename: 'offscreen.html',
  chunks: ['offscreen'],
  cache: false,
}),

In your manifest.json add this.

"permissions": [..., "offscreen"],

Create src/pages/Offscreen/index.html.

</head>
<body>
  <script src="offscreen.ts" type="module"></script>
  <textarea id="text"></textarea>
  OFFSCREEN HTML
</body>

Create src/pages/Offscreen/offscreen.ts:

console.log("Offscreen.ts works")

Add these lines to your background script.

const OFFSCREEN_DOCUMENT_PATH = 'offscreen.html'

// ------------ OFFSCREEN DOCUMENT ------------
const createOffscreenDocument = async () => {
  console.log('Try creating offscreen doc')
  if (!(await hasDocument())) {
    console.log('Creating offscreen doc')
    console.log(OFFSCREEN_DOCUMENT_PATH)

    await chrome.offscreen
      .createDocument({
        url: OFFSCREEN_DOCUMENT_PATH,
        // TODO: HERE YOU NEED TO PUT YOUR REASON FOR OFFSCREEN FOR EXAMPLE DOM_PARSER
        reasons: [chrome.offscreen.Reason.DOM_PARSER],
        justification:
          'YOUR_JUSTIFICATION',
      })
      .then((e: any) => {
        console.log('Created offscreen doc')
        console.log(e)
      })
      .catch((e: any) => {
        console.log('err')
        console.log(e)
      })
  }
  // Now that we have an offscreen document, we can dispatch the
  // message.
}
createOffscreenDocument()

async function hasDocument() {
  // Check all windows controlled by the service worker if one of them is the offscreen document
  try {
    // @ts-ignore clients
    if (clients) {
      // @ts-ignore clients
      const matchedClients = await clients.matchAll()
      for (const client of matchedClients) {
        if (client.url.endsWith(OFFSCREEN_DOCUMENT_PATH)) {
          return true
        }
      }
    }
  } catch (e) {
    console.log(e)
  }
  return false
}

lxieyang / chrome-extension-boilerplate-react

Offscreen support #162