Why everything fine on dev but not working on build result?

[joisun]

I’m developing a "words lookup" extension. The core functionality allows users to select words, open a side panel, look them up, and sync data. Everything works as expected in development mode, but issues arise when building the extension.

For example:

• Word lookup is not triggered when opening the side panel in the built version.
• Data saved locally is not displayed.
• Syncing data does not seem to work.

I’m wondering why there are differences between dev and build modes, and how I can identify the cause of the issues.

Here below is development mode:

2025-02-14_21-02-51.mp4

And below is the result of wxt zip

2025-02-14_21-11-28.mp4

Here is my repo if needed https://github.com/joisun/Vocabify

Thanks for your help!

[aklinker1]

Dev mode adds the tabs and scripting permissions automatically to enable reloading on save.

Compare your dev and production manifests, then add any required permissions.

[aklinker1]

Alright, I'll checkout your repo in a bit and try and figure out what's going on.

[aklinker1]

So looks like you have a messaging error, when I inspected the sidepanel:

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

Unfortunately, this is one of the most annoying, hardest errors to figure out in extension development :/

Usually, this happens when the background sends a message to a specific tab/context, and chrome.runtime.onMessage.addEventListener hasn't been called yet. In your case, you're adding the listener inside a useEffect callback, so it's not getting added immediately. Meaning there could be time where the background tries to send the message to the sidepanel, but the sidepanel hasn't setup the listener yet.

https://github.com/joisun/Vocabify/blob/beb171211eb6425bb3c475ed56bc6748420a0e50/entrypoints/sidepanel/components/NewRecord.tsx#L85

Not sure what about the production build would cause this though...

[joisun]

Hi @aklinker1 ,

Thank you so much for taking the time to help me with this issue. I really appreciate it!

Here’s a detailed explanation of the problem and the approach I’ve taken so far:

When the "Vocabify" button on content is clicked for the first time, we send a message ({ action: 'sendToAi', payload }) in background.ts (see background.ts#L128C36-L128C67) to trigger the side panel to open and attempt to call the sendToAi handler in the side panel component (see NewRecord.tsx#L37). However, the issue arises because the message listener is not yet prepared before the panel opens, and the React app has not been fully initialized. This results in the following error:

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

In simpler terms, the first call to { action: 'sendToAi', payload } does not receive a response because the listener is not ready. —just as you analyzed and hypothesized."

To address this, I’ve implemented a workaround:

1. I cache the "selected content" in storage (see background.ts#L127).
2. After the side panel React app is mounted (and the listener is prepared), I check if there is any cached "selected content" in storage NewRecord.tsx#L94-L99.
3. If cached content exists, I manually call the handler.

While this solution resolves the issue of the first-time selected content not triggering the sendToAi message listener, it’s admittedly a last resort, and I’m aware it’s not the best practice. If you have any suggestions or practical advice on how to improve this, I’d be extremely grateful!

Current Status:
This approach works in the development environment, and the error no longer occurs. However, after building the application, it doesn’t work at all. I’m still trying to figure out why this happens and would appreciate any insights you might have.

I’ve been trying to solve this issue for quite some time now and even experimented with AI models like Causor and Windsurf, but unfortunately, none of them provided a solution. At this point, I’m truly at a loss and would greatly appreciate more eyes on this problem to help me resolve it.

In fact, I’ve been actively searching for plugins with similar interaction logic as a reference, but so far, I haven’t been able to find a suitable case. Any guidance or suggestions from you or the community would be invaluable.

Thank you again for your help! .

Best regards,
Joi :)

[aklinker1]

Instead of using storage, you could send a "sidepanel initialized" message to the background, and have the background wait until it receives that message before sending any other messages to the side panel.

Or, what I prefer to do, have the sidepanel request the data from the background instead of having the background "push" the data to it. Then the background doesn't need to wait for the popup to finish loading, it just responds with the data when requested. I find that following this sort of standard frontend/backend practice simplifies things a lot in extensions. It's not foolproof, and there are at times better, more optimized alternatives, but they're much harder and much more complex to implement.

But yeah, once again, very weird that your original solution worked in development. I can't think of anything that WXT is doing that would cause this behavior to happen.

You may also want to consider using a messaging library instead of rolling your own solution.

[joisun]

Thanks for the insightful suggestions! You're right, having the sidepanel request the data from the background (a "pull" rather than "push" approach) is a much cleaner and more robust solution.I'll refactor to use this approach.

I also appreciate the suggestion about a messaging library. I'll explore that option for future projects to avoid reinventing the wheel.

And the problem may should not related to WXT, so I'll mark this as the answer.