I am developing a google chrome plugin, when I open the plugin popup UI, shows an error like this in the devtool console:

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

I just wonder what should I do to avoid this problem? someone said that the background.js send message to script.js, when the script.js is not ready will face this error, I checked my code and did not send any message in the background.js. this is what the error looks like in the devtool console.

why the google chrome show that the error came from HTML? is it possible to let the chrome tracing into which js file throw this error? from the error and tracing information, I have no idea where is going wrong and what should I do to fix it or avoid it. BTW, I did not call any sendMessage function in the plugin. I have removed all sendMessage function, this error still did not fix.

  //chrome.runtime.sendMessage({ action: 'shanbay_authorize' })

After take me more than hours, finally found this was throw by the client.js:

import {createClient} from 'connect.io';
export default createClient();

this was a lib that make message send simple. what should I do to avoid this problem? this is the component code that using client.js:

import client from './client';
import getOptions from '../public/default-options';
import {read} from '../public/clipboard';
import { defineComponent } from 'vue';

export default defineComponent( { 
  client ,
  async compiled() {
    this.inline = true;
    this.showForm = true;
    const {defaultApi , autoClipboard} = await getOptions( [ 'defaultApi' , 'autoClipboard' ] );

    this.query.api = defaultApi;
    if ( autoClipboard ) {
      this.query.text = read();
      this.safeTranslate();
    }
  } ,
  ready() {
    setTimeout( ()=> this.$els.textarea.focus() , 200 );
  },render() {
   
  }
} );

is it possible to make the client just retry and not throw error if the server side not ready?