Offscreen support #162
Comments
|
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:
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'),
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
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
I was wondering if you could add support for offscreen script https://developer.chrome.com/docs/extensions/reference/offscreen/
Thanks for the awesome boilerplate !!
The text was updated successfully, but these errors were encountered: