0

I'm writing an extension to demonstrate the use of messages. Here's the idea.

There is an HTML page with a mytext text field and a popup page that also contains a mytext field.

Both text fields are always synchronized in content.

Direct messages between the popup page and the content page do not work. Therefore, all communication takes place through an intermediary - the background page.

Messages are passed between the popup page and the background page via port.postMessage. The background page and content page communicate via chrome.runtime.sendMessage and chrome.tabs.sendMessage.

background.js

let popup_port;

debugger;

chrome.extension.onConnect.addListener(function (port)
 {
  popup_port = port;
  
  popup_port.onMessage.addListener(function (msg)
   {
    chrome.tabs.query(
     {
      currentWindow: true,
      active: true
     },
     function (tabs)
      {
       // This is where the error occurs.
       chrome.tabs.sendMessage(tabs [0].id, msg);
      });
    return true;
   });
 });

chrome.runtime.onMessage.addListener(function (msg)
 {
  popup_port.postMessage(msg);
 });

content.js

debugger;

chrome.runtime.onMessage.addListener(function (msg)
 {
  if (msg.query)
   chrome.runtime.sendMessage(mytext.value);
  else
   mytext.value = msg.input;
 });

popup.js

let port = chrome.extension.connect({name: '...'});

debugger;

port.postMessage({query: true});

port.onMessage.addListener(function (textMsg)
 {
  mytext.value = textMsg;
 });

function postMyMessage ()
 {
  port.postMessage({input: mytext.value});
 }

mytext.oninput = postMyMessage;

When I open a popup window, everything works correctly - the text from the main page also appears in the field of the popup page.

But when I enter text into the field from the popup page, an error occurs in the background page:

TypeError: Cannot read property 'id' of undefined

When I tested my code while writing this post, it (suddenly!!!) worked correctly - when I enter text in the popup, it appears in the main page as well. What was it !?

JonMv
  • 21
  • 3
  • It's a bug in Chrome, see the workaround inside: https://crbug.com/1005701. Also you don't need the background script for this type of messaging, the popup can send messages to the content script directly, I guess it didn't work in your case because you reloaded the extension but didn't reload the tabs, see [Chrome extension content script re-injection after upgrade or install](https://stackoverflow.com/q/10994324). – wOxxOm Nov 05 '22 at 09:47

1 Answers1

0

You say that it is possible to directly establish a connection between the popup page and the content page. How to do it right?

I placed this in the popup.js file:

let port = chrome.extension.connect({name: 'abc'});

debugger;

port.postMessage('hello');

while in content.js:

chrome.extension.onConnect.addListener(function (port)
 {
  port.onMessage.addListener(function (msg)
   {
    alert(msg);
   });
 });

As a result an error occurs:

Could not establish connection. Receiving end does not exist.

What is the correct way to organize two-way communication between popup.js and other parts of the extension (content.js)?

JonMv
  • 21
  • 3
  • Use chrome.tabs.connect with a tab id. – wOxxOm Nov 05 '22 at 14:59
  • This is my answer to another question, but it may be of some help to you. [This is a sample of communication between popup and tab.](https://stackoverflow.com/questions/74330556/chrome-extension-how-to-interact-between-the-main-extension-popup-default-pop/74332678#74332678) – Norio Yamamoto Nov 06 '22 at 02:23