Getting "Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist." error

Question

I am developing an extension plus website similar to LOOM. I used chrome.runtime.sendMessage in my angular app and an addListener in my content.js file. But somehow, I am getting the error "Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist."

I am using this method in my angular file where I am triggering the button

chrome.runtime.sendMessage(editorExtensionId, 'version', response => {
        if (response && response.type === 'success') {
          console.log('version', response.version);
        } else {
          console.log('Failed to get version',response);
        }
      });

and following code is written in content.js file of my extension

chrome.runtime.onMessageExternal.addListener(
        function(message, sender, sendResponse) {
            if (message == 'version') {
                const manifest = chrome.runtime.getManifest();
                sendResponse({
                  type: 'success',
                  version: manifest.version
                });
                return true;
              }
        });