Dictionary side panel example doesn't work with Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

[AlexMikhalev]

Dictionary side panel example doesn't work with Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

[patrickkettner]

Hi chuck You wouldn’t open the side panel with the extension action button. You open the side panel by clicking on the side panel button that’s built into Chrome. https://support.google.com/chrome/answer/13156494?hl=en#zippy=%2Cuse-side-panel

…

On Thu, Nov 16, 2023 at 6:16 AM Chuck Strusz ***@***.***> wrote: I am having this same issue, but I'll note that the instructions in the README, as written, *do not work*. To wit, Step 3 is "Open the side panel UI" - but you *can't* open the side panel UI, because the extension button is disabled (greyed out). I have tried this in a normal and an incognito window with the same results. [image: extension] <https://user-images.githubusercontent.com/22245534/283445282-b9cbced5-f2a2-44c5-8e52-b42c868b9ea6.png> — Reply to this email directly, view it on GitHub <#1020 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADRUBXLYFNY4AXZDVTCMXLYEX7ZXAVCNFSM6AAAAAA6KD3XIKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJUGMZDSNZUGM> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.*** com>

[AlexMikhalev]

@ChuckStrusz I was hoping Google Chrome's team would take ownership to ensure examples are working. As it stands now the example isn't going to work (by design):
service worker (background.js) in my case shall have:

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
    const { id, url } = tab;
    const { menuItemId } = info
    var query = info.selectionText;
    switch (menuItemId) {
      case "define-word":
        await chrome.sidePanel.open({ tabId: id });
        await chrome.sidePanel.setOptions({
            tabId: id,
            path: 'sidepanel.html',
            enabled: true
        });
        await chrome.scripting.executeScript(
            {
                target: { tabId: id, allFrames: true },
                files: ['clientside_concept.js']
            }
        )
    }
});

than clientside_concepts.js:

// // content script
console.log("Running clientside_concepts.js");
(async () => {
    let selection = document.getSelection().toString();
    console.log("Selection", selection);
    const response = await chrome.runtime.sendMessage({ type: 'concept', data:selection });
    console.log("Response from background ", response);
    console.log('concept complete')
}
)();

than again in background js I have a part:

        } else if (message.type === "concept") {
            let data = message.data;
            console.log("Concept", data);


            senderResponse({ data: data });
            return true;

        }

than in sidepanel.js

chrome.runtime.onMessage.addListener(async ({ type, data }) => {
  console.log('Message received', type, data);
  if (type === 'concept') {
    // Hide instructions.
    document.body.querySelector('#select-a-word').style.display = 'none';

    // Show word and definition.
    document.body.querySelector('#definition-word').innerText = data;
    run('@cf/meta/m2m100-1.2b', {
      text: data,
      source_lang: "english", // defaults to english
      target_lang: "spanish"
      }).then((response) => {
          console.log(JSON.stringify(response));
          if (!response.success) {
              console.log("Error", response);
          }else{
              console.log("Response", response);
              // let translated_text=response.result.translated_text
              document.body.querySelector('#definition-text').innerText = response.result.translated_text;
          }
      });

    
    // document.body.querySelector('#definition-text').innerText =
    //   words[data.toLowerCase()];
  }
});

my extension runs cloudflare AI worker to translate English into Spanish. Service worker will not be able to communicate directly with sidepanel.js without clientside message.
@patrickkettner please read https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.sidepanel-dictionary

[AmySteam]

Hey @AlexMikhalev, thanks for flagging this. 😃

Out of curiosity, did you select the word "extensions", then right-click and choose the context menu Define?

This sample has a long list of steps, it can be easily missed 😟

[AlexMikhalev]

Yes. The point of a bug report is that we need working examples of how to pass data - even the string into the side panel with any reliability that our users will have it working in their environment. The case of nothing selected shall be handled too.

[AlexMikhalev]

The fix is to inject client-side script with chrome.runtime.sendMessage

[ChuckStrusz]

The fix is to inject client-side script with chrome.runtime.sendMessage

As someone who is floundering with the absolute paucity of good (ie, functioning) examples of V3 extensions, I'm hoping you can offer a bit more detail on this fix for this broken sample (I have the same issues) - is there any chance you could post the full updated source for the file in question, or indicate which file you mean by "client-side script" since I think there are two - both service-worker.js and sidepanel.js are "client-side", right?

[ChuckStrusz]

I am having this same issue, but I'll note that the instructions in the README, as written, do not work. To wit, Step 3 is "Open the side panel UI" - but you can't open the side panel UI, because the extension button is disabled (greyed out). I have tried this in a normal and an incognito window with the same results.

[ChuckStrusz]

Hi chuck You wouldn’t open the side panel with the extension action button. You open the side panel by clicking on the side panel button that’s built into Chrome. https://support.google.com/chrome/answer/13156494?hl=en#zippy=%2Cuse-side-panel

Oh my gosh! Thanks so much. I use the side panel so infrequently that I often forget it's there.