I am trying to build a Chrome Extension with a React App front end. The extension should have a background to record the screen. I am using these repos:
- Amplify-Chrome-extension that explains how to set up a Chrome extension showing a React App front end on top of an existing web page
- Official Chrome tabcature recorder sample that explains how to set up an extension recording the screen in background.
And I would like to merge the two repos together to allow the recording of the screen in background from the react app.
I had a look at this useful post that I find very similar to my use case, but the Manfiest file is v2, so following some of the steps and transforming the Manifest to v3, I have this Manifest:
{
"manifest_version": 3,
"name": "React Content Script",
"version": "0.0.1",
"content_scripts": [
{
"matches": [
"https://docs.amplify.aws/"
],
"run_at": "document_end",
"js": [
"static/js/787.8d291908.chunk.js",
"static/js/main.979aaba6.js"
],
"css": [
"static/css/main.1e6c3ac9.css"
],
"media": []
}
],
"web_accessible_resources": [
{
"resources": [
"static/css/main.1e6c3ac9.css",
"static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg"
],
"matches": [
"<all_urls>"
]
}
],
"permissions": [
"tabCapture",
"offscreen"
],
"action": {
"default_icon": "icons/not-recording.png"
},
"minimum_chrome_version": "116",
"background": {
"service_worker": "service-worker.js"
}
}
and get an error like this:
Service worker registration failed. Status code: 10
...
"background": {
"service_worker": "service-worker.js"
}
...
So, I have two questions:
in order to troubleshoot the error, I need to know what
Status code: 10stands forif anyone has a working example similar to the use case to understand how to integrate the React App and a background service in a Chrome extension
Thank you!