1

I'm trying to pass a message from background script to the content script. My background script will make an ajax call with the user selected text and I want to replace the selected text with the ajax response. I have two problem to solve. The first problem is that I'm unable to pass a message from background script to the content script with this code: background.js

const doTranslation = (info, tab) => {
  console.log(info, tab);
  axios({
    method: 'POST',
    url: 'https://libretranslate.com/translate',
    data: {
      q: info.selectionText,
      source: 'es',
      target: 'en'
    }
  }).then( (res) => {
    console.log(res.data.translatedText);
    browser.tabs.query({active: true, currentWindow: true}, (tabs) => {
      browser.tabs.sendMessage(tabs[0].id, {translation: res.data.translatedText});
    });
  });
}

The only console log I saw is the Hello from the content-script but not the ajax response. The second problem is about text replacing. How I can replace the selected text with the response?At the moment I have this code in content script

console.log('Hello from the content-script');

browser.runtime.onMessage.addListener( (message) => {
    console.log(message);
});

UPDATE

I've found the problem, I wasn't declaring the tabs permission to the manifest file and this caused the first issue about message passing from background to the content script. Now I'm trying to replace the text selection using the content script, any suggestion about?

browser.runtime.onMessage.addListener( (message) => {
    console.log(message);
    const selectedText = window.getSelection();
    console.log(selectedText);
    //replacing here
    selectedText.replace(message);
});
newbiedev
  • 2,607
  • 3
  • 17
  • 65
  • 1) Open devtools for your background script on chrome://extensions page and if your extension is ManifestV3 you'll see an error because axios doesn't work in service worker. Use the standard `fetch` instead. 2) Use `tab` parameter to get `tab.id` instead of browser.tabs.query. 3) Use devtools debugger fully: set breakpoints in the code and see what happens when it runs. – wOxxOm May 08 '21 at 17:28
  • @wOxxOm I'm using manifest v2 so I have no problem with axios. For the `tab.id` I've already tried but it will give me this error `"Could not establish connection. Receiving end does not exist."` that will not happen if I use `tabs.query` – newbiedev May 08 '21 at 17:32
  • The problem of query() is that the user may have switched the tab during the network request so it's an incorrect approach. The fact that `tab.id` doesn't work means the content script wasn't running which can happen if you reloaded the extension but didn't reload the tab(s). To solve that you can either a) switch to browser.tabs.executeScript instead of declaring content scripts or b) [reinject when needed](https://stackoverflow.com/questions/10994324/chrome-extension-content-script-re-injection-after-upgrade-or-install). – wOxxOm May 08 '21 at 17:46
  • @wOxxOm I've solved the messaging problem, I need now to find a way to do the text replacing with the received message – newbiedev May 08 '21 at 17:49
  • `tabs` permission isn't related to this problem. Apparently all you needed is to reload the extension. If you remove `tabs` permission and reload it again, messaging will keep working as it should. Anyway, now that this question is fixed, replacing text is another problem for a new question. I suppose there should be many existing answers that show how to do it as it's a popular thing. – wOxxOm May 08 '21 at 17:56
  • I have removed the extension and reinstalled it before adding the permission and it not solved the issue. I've solved only after the permission was added, without it the `browser.tabs.sendMessage` will not work. Probably new chrome version needing it – newbiedev May 08 '21 at 17:58
  • 1
    Messaging works in new Chrome without `tabs` permission just like it worked for all these years. It must be either a very rare bug in Chrome (it'd be helpful if you can report it on https://crbug.com) or something else in your extension that needs this permission and breaks without it. – wOxxOm May 08 '21 at 18:22

0 Answers0