Error: Could not establish connection. Receiving end does not exist. after redirect?

[Wizzel1]

So I am trying to automate input to a page. After submitting this input, I am getting redirected a bunch of times but I get to the original page eventually.

My goal is to start this process from the UI like so:

1) MyUi.svelte

async function startUploader() {
  await browser.runtime.sendMessage({ command: 'start' });
}

2) background.ts
in the background, I want to set some state and call the content-script like so:

  let automationRunning = false;

  browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
    if (message.command === 'start') {
      automationRunning = true;
      //(this was recommended by chatgpt, I don't quite understand the difference between sendResponse() and return)
      sendResponse({ status: 'autoRunAmazonUploader set to true' });

      // Get the active tab
      const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
      if (tab?.id) {
        // Send a message to the content script to start the async operation
        console.log('sending message to tab', tab.id);
        browser.tabs.sendMessage(tab.id, { greeting: 'hello' });
      }
    }
    
     // Return true to indicate you will send a response asynchronously  (this was recommended by chatgpt, I don't quite understand the difference between sendResponse() and return)
    return true;
  });

3) content-script.ts
this works perfectly fine the first time

export default defineContentScript({
  async main(ctx) {
  
    browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
        await myAutomationCodeThatResultsInARedirect();
    });
    
  },
});

4) background.ts
detect navigation changes in background.ts with the webNavigation api and send a new message if I get redirected to the correct url:

  browser.webNavigation.onHistoryStateUpdated.addListener(async (details) => {
     if(!automationRunning) return ;
     const response = await browser.tabs.sendMessage(details.tabId, { greeting: 'hello' });
  });

for some reason the 4th step throws an error Error: Could not establish connection. Receiving end does not exist and I don't understand why. Did the content script get removed? I checked the tabIds and they were the same so I have no idea why the receiving end would no longer exist :(

[aklinker1]

I don't know if it's the main cause, but one problem is in your use of sendResponse.

To respond to a message asynchronously, you should either:

• Return true synchronously and call sendResponse at some point in the future
• OR return a promise of the response.

You cannot do both. These three snippets behave the same:

1. Synchronously return true and use sendResponse

   // background.ts
   browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
     doSomething().then(() => sendResponse(123));
     return true;
   });

2. Don't use an async function, but return a promise

   // background.ts
   browser.runtime.onMessage.addListener((message, sender, _) => {
     return doSomething().then(() => 123);
   });

3. Use async/await and just return the response

   // background.ts
   browser.runtime.onMessage.addListener(async (message, sender, _) => {
     await doSomething();
     return 123;
   });

I always use the third option. IMO, it's the simplest and easiest to read.

Now let's look at yours:

browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.command === 'start') {
    sendResponse({ ... });
  }
    
  return true;
});

You're using an async function, so it's returning a promise already. Then you're calling sendResponse, as it weren't an async function. And finally, since it's already an async function, there's no need to return true to indicate an async response.

[aklinker1]

That will return 123 for all messages, not just the start message. If you add any other message listeners to the background, they'll basically be ignored.

That's why I made it a sync function, and only returned a promise inside the start block.

[aklinker1]

Perhaps you should use a messaging library instead of using the API directly. There's a couple of libraries I like listed here:

https://wxt.dev/guide/extension-apis.html#messaging

But any messaging library will work with WXT.

[Wizzel1]

@aklinker1 thanks for the suggestion! I decided to go with @webext-core/messaging and it already is a much better developer experience with the typed messages.

However the error still occurs when sending a message by reacting to onHistoryStateUpdated . Probably because my listener code is still wrong:

  browser.webNavigation.onHistoryStateUpdated.addListener(async (details) => {
    if (!automationRunning) return;
    
    //check if details.url matches the target site
    //....
    
    console.log(details.tabId);
    await sendMessage('runUpload', 'hello world', details.tabId);
    return;
  });

Its weird, it is almost like content-script does not get attached again after the redirect. I can't even target it manually. It only works if I completely reload the page with F5

[aklinker1]

Yeah, can't help with that without more details. What kind of navigation occurs? A full page load or is it a SPA?

If it's a full page load, make sure the tab has finished loading and the content script is running again before sending a message. If you send it too soon, your content script might not have started and you'll get the "Could not establish connection. Receiving end does not exist" error because your content script hasn't setup the listener yet, hence the "Receiving end" *listener "does not exist". Debug this by logging the MS since epoch when you send the message in the background and after you've setup the onMessage listener in the content script. Compare them and make sure you're adding an onMessage listener before the message is sent.

If it's a SPA, the content script stays alive on navigation, so your setup should be working fine. I would probably need to run the code to debug it.

[Wizzel1]

@aklinker1 no worries. I opted to update the relevant tab with browser.tabs.update(tabId, { url: targetUrl }) and everything works as expected now. Thanks for your detailed explanations, it was very helpful to get this solved!