Firefox extension, identification of context

Question

I've built an AddIn, a chess game visualiser, which worked many years on desktop browsers Firefox, Chrome, Opera, Safari and IE. The AddIn runs when invoked from context menu and parses the selected text from the current page. The selected text is expected to be Chess Notation Format, which can be FEN or PGN.
It is the second time when the addin becomes incompatible with Firefox when FF version changes, and I have to do architectural changes. The new firefox architecture is meant to be compatible with Chrome, but it is only partially compatible, so I can't fully reuse the code from chrome. I also used info from Communicate data from popup to content script injected by popup with executeScript() and Communicate data from popup to content script injected by popup with executeScript()

Here are my questions:

See the code of background.js, browser.runtime.sendMessage is invoked before the invocation browser.runtime.onMessage.addListener from pop.js. I don't understand how to send the message from background.js after the window opened by browser.windows.create is fully created, all scripts ended execution and document fully loaded. Also I can't do it on invocation of document.addEventListener('DOMContentLoaded', when I call browser.runtime.onMessage.addListener it generates the error Error: sendRemoveListener on closed conduit b212f9bfb4f0394efe56168a583c91346caf2d00@temporary-addon.412316861125 and probably is not executed at all. Maybe there are special events I can handle, I don't see much documentation on that. In Chrome the approach mostly similar, but it works pretty well.
I still can catch the message sent from background.js in some unusable scenario: if I opened two windows, yet good for debugging purposes. The problem is that inside the handler from pop.js the document.innerHTML is undefined no matter that I am trying to do. I can't handle the content of the window from extension api handlers. I think the document is fully loaded because it is handled by the first of the two opened windows.

Note, I can send the selection text to newly opened popup via invocation URL parameter. It works, but I think it is a workaround. I use it on Opera and Safari, it also works on Firefox, but I am thinking getting rid of this where it is possible.

There is the scenario, simplified:
background.js:

{//Firefox create context menus
   var id      = chrome.contextMenus.create({"title": "Chess game", "contexts":["selection", "page"]});
   var childId = chrome.contextMenus.create
                    ({
                       "title": "Play Small","contexts":["selection", "page"],
                       "parentId": id,
                       "onclick": (info, tab) => { playBoard   (info, tab, "mini18"); }
                    });
}


function onCreated(windowInfo, request)
{
   browser.windows.get(windowInfo.id).then
   (
      (wnd) => { browser.runtime.sendMessage(request); }
   );
}

function playBoard (info, tab, imagePath)
{
   let creating = browser.windows.create({ type:"detached_panel", url:"pop.html", width:250, height:100 });
   creating.then
   (
      (inf) =>
      {onCreated
         (
            inf,
            {
               chessObject:
               {
                  gametype : "PGN_OR_FEN_board",
                  content : selection,
                  imgPath : info.selectionText
               }
            }
         )
      }
   );
}

pop.js:

browser.runtime.onMessage.addListener
(
   (request) =>
   {
      console.log("popup chrome listen to game: " + request.chessObject.content);
      console.log("popup chrome listen to game: document inner html: " + document.innerHTML);
   }
);

pop.html:

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title>hello world</title>
   <script language="javascript" src="pop.js"></script>
</head>
<body>
   hello popup
</body>
</html>

manifest.json:

{
  "manifest_version": 2,
  "name": "Roatta Waaayyyy!!!",
  "version": "1.0.0.4",

  "description": "Chess AddIn for Firefox",

  "icons": { "32": "icons/roatta_32_32.jpg" },
  "permissions": [ "contextMenus" ],
  "background": { "scripts": ["background.js"] }
}

For reference here is the full source code on GIT, the one I try to implement now is Firefox65 which is meant to replace the previous Firefox. The basic version is the one for Chrome, initially it was the one for Firefox.

The simplest solution is probably to reverse the direction of communication and just use sendMessage in pop.js to get the data from the background script. — wOxxOm, Aug 07 '21 at 19:09
See also [Pass data or modify extension html in a new tab/window](https://stackoverflow.com/a/54715122) — wOxxOm, Aug 07 '21 at 19:16
@wOxxOm the reverse pattern worked pretty well, posted as answer. Thanks — armagedescu, Aug 07 '21 at 20:59

score 0 · Answer 1 · answered Aug 07 '21 at 20:56

As suggested by @wOxxOm I applied the inverse message pattern, and it works.
Now the background.js register a listener and waits to be called, then it removes the listener:

{//Firefox
   console.log("Creating context menus");
   var id      = chrome.contextMenus.create({"title": "Chess game", "contexts":["selection", "page"]});
   var childId = chrome.contextMenus.create
                    ({
                       "title": "Play Small","contexts":["selection", "page"],
                       "parentId": id,
                       "onclick": (info, tab) => { playBoard   (info, tab, "mini18"); }
                    });
}

function playBoard (info, tab, imagePath)
{
   var createData =
   {
      type  : "detached_panel",
      url   : "pop.html",
      width : 250,
      height: 100

   };

   let requestData =
      {
         chessObject:
         {
            gametype : "PGN_OR_FEN_board",
            content  :  info.selectionText,
            imgPath  : imagePath
         }
      };
   try
   {
      console.log ("Play Board: " + imagePath);
      console.log ("Selection: " + info.selectionText);

      let creating = browser.windows.create(createData);
      
      function onGameDataExchange(request)
      {
          browser.runtime.onMessage.removeListener(onGameDataExchange);
          return Promise.resolve(requestData);
      }

      browser.runtime.onMessage.addListener (onGameDataExchange);

      console.log ("opened pop.html");

   }
   catch (err)
   {
      console.log ("Error: main background playBoard() " + err);
   }
}

The pop.js is the one requesting the message:

document.addEventListener('DOMContentLoaded',
   function (event)
   {
      browser.runtime.sendMessage (  { chessObject: { gametype : "PGN_OR_FEN_board" } }  )
                .then
                (
                   (request) =>
                   {
                       console.log("on DOMContentLoaded message: " + request.chessObject.gametype);
                       console.log("on DOMContentLoaded message: " + request.chessObject.content);
                       console.log("on DOMContentLoaded message: " + request.chessObject.imgPath);
                   }
                );
      console.log("Popup DOMContentLoaded send message end");

   }
);

Firefox extension, identification of context

1 Answers1

Linked