Chrome Extension with React App to record the audio in background

111 Views Asked by At

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:

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:

  1. in order to troubleshoot the error, I need to know what Status code: 10 stands for

  2. if 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!

0

There are 0 best solutions below