I am creating a browser extension, and I want to open a React dialog/modal to the user when joining a Zoom meeting.

Ideally I want to pause the automatic opening of the Zoom application while the user doesn’t interact with the dialog, and when it does, if the interaction is positive (clicks the ‘yes’ button) resume the opening of the Zoom application. If negative, abort the opening.

I am also happy with a solution that shows the dialog without caring if the zoom app is opened or not.

I’ve tried doing this, but no success. The script is simply not ran.

Here is my manifest.json (some parts were omitted)

{
  "manifest_version": 2,
  "permissions": [
    "activeTab",
    "storage",
    "https://*zoom.us/*",
    "https://zoom.us/*"
  ], 
  "content_scripts": [
    {
      "matches": ["https://*.zoom.us/*", "https://zoom.us/*"],
      "js": ["js/contentScript.bundle.js"],
      "run_at": "document_end"
    }
  ]

contentScript.tsx

console.log('ContentScript running...');

// HTML injection
const app = document.createElement('div');
app.id = 'react-root';
document.querySelector('body')?.prepend(app);

ReactDOM.render(<Dialog />, document.getElementById('react-root'));

console log

Launched external handler for 'zoommtg://zoom.us/join?action=join&confno=SOME_NUMBER&pwd=SOME_PWD&confid=SOME_CONFID&browser=chrome'.

(no sign of ContentScript running...)

I’ve also tried changing the run_at in the manifest.json to "document_start" but then I get the following error:

Uncaught Error: Target container is not a DOM element.