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

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.

enter image description here

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.