I'm using Chrome Extension ReactJS which I'd like to insert this in popup.html:

<script src="https://unpkg.com/ringcentral-c2d@1.0.0/build/index.js"></script>
<script>
  window.clickToDialInject = new RingCentralC2D();
  window.clickToDialInject.on(
    RingCentralC2D.events.call,
    function (phoneNumber) {
      console.log('Click To Dial:', phoneNumber);
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const currentTabId = tabs[0].id;
        chrome.tabs.sendMessage(currentTabId, { clickToCall: phoneNumber });
      });
      // alert('Click To Dial:' + phoneNumber);
    }
  );
  window.clickToDialInject.on(
    RingCentralC2D.events.text,
    function (phoneNumber) {
      console.log('Click To SMS:', phoneNumber);
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const currentTabId = tabs[0].id;
        chrome.tabs.sendMessage(currentTabId, { clickToSMS: phoneNumber });
      });
      // alert('Click To SMS:' + phoneNumber);
    }
  );
</script>

I am having this error in console. I already tried the meta tag but I cant figure out what directive should I use.

Right now, it only works if I directly paste the script from https://unpkg.com/ringcentral-c2d@1.0.0/build/index.js inside the popup.jsx, but its not appropriate way.

How could I overcome this?