Send message from popup to cs and back

I have something like: content.ts

chrome.runtime.onMessage.addListener((_, __, sendResponse) => {
  sendResponse(...)
});

chrome.runtime.onMessage.addListener((_, __, sendResponse) => {
  sendResponse(...)
});

popup.svelte

<script lang="ts">
  chrome.tabs.query({ active: true, currentWindow: true }, ({ tabs: { 0: { id } } }) => {
    chrome.tabs.sendMessage(id, value => {
      // ...
    });
  });
</script>

<script lang="ts">
  chrome.tabs.query({ active: true, currentWindow: true }, ({ tabs: { 0: { id } } }) => {
    chrome.tabs.sendMessage(id, value => {
      // ...
    });
  });
</script>

but I keep getting on the popup

Unchecked runtime.lastError: The message port closed before a response was received.

Unchecked runtime.lastError: The message port closed before a response was received.

9 Replies

Avi•2y ago

The annoying part is that the content script does get the message It's only the sendResponse part that's causing the issue

lab•2y ago

that happens bc your handler is not returning true

Avi•2y ago

chrome.runtime.onMessage.addListener((_, __, sendResponse) => {
  sendResponse(...)
  return true;
});

chrome.runtime.onMessage.addListener((_, __, sendResponse) => {
  sendResponse(...)
  return true;
});

didn't solve it

lab•2y ago

add async to it too just see if that does anytng lol

Avi•2y ago

I'm already using async 🙃

function addChannelReportListener(): void {
  chrome.runtime.onMessage.addListener(async (message, _, sendResponse) => {
    if (message.type === "get-channel-id") {
      const { channelId } = await getVideoAndChannel();
      sendResponse(channelId);
    }
    return true;
  });
}

function addChannelReportListener(): void {
  chrome.runtime.onMessage.addListener(async (message, _, sendResponse) => {
    if (message.type === "get-channel-id") {
      const { channelId } = await getVideoAndChannel();
      sendResponse(channelId);
    }
    return true;
  });
}

lab•2y ago

do this: basically you must return true without making it stuck at getVideoAndChannel

Avi•2y ago

You know what

lab•2y ago

async function do(){}

chrome.runtime.onMessage.addListener( (message, _, sendResponse) => {
do(message, sendResponse)
    return true;
  });

async function do(){}

chrome.runtime.onMessage.addListener( (message, _, sendResponse) => {
do(message, sendResponse)
    return true;
  });

Avi•2y ago

I did something different, though added a race condition Basically, the content.ts calls scripts from functions.ts anyway, and I store in functions.ts global variables, one of which is channelId So I can just return it as it updates automatically Even

export function addChannelReportListener(): void {
  chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
    if (message.type === "get-channel-id") {
      sendResponse("test");
    }
    return true;
  });
}

export function addChannelReportListener(): void {
  chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
    if (message.type === "get-channel-id") {
      sendResponse("test");
    }
    return true;
  });
}

doesn't work @louis Any idea what to do? I believe I solved the issue by manually reloading

Gaming

Programming

Send message from popup to cs and back