Two way communication between dev tools chrome extension and website

Question

I'm trying to write Dev Tools extension for LIPS by Scheme based interpreter created in JavaScript. I want to use function lips.exec and call that function from dev tools page and get the result back.

So far I have this, I have messaging script (that was based on my other project from shiny R framework):

var exec = (function() {

  var handlers = [];
  var port = chrome.extension.connect({
    name: "kiss-connection"
  });
  port.onMessage.addListener(function(data) {
    handlers.forEach(function(handler) {
        handler(data);
      });
  });
  var index = 0;
  function exec(code) {
    if (!code.trim()) {
      return Promise.resolve();
    }
    return new Promise(function(resolve, reject) {
      var id = index++;
      
      handlers.push(function handler(data) {
        if (data.id === id) {
          if (data.error) {
            reject(data.error);
          } else {
            resolve(data.result);
          }
        }
        handlers = handlers.filter(function(f) {
          return f !== handler;
        });
      });
      const tabId = chrome.devtools.inspectedWindow.tabId;
      var message = {action: 'lips', tabId, code};
      console.log(message);
      port.postMessage(message);
    });
  }
  return exec;
})();

when I call it from dev tools the message get sent to content script, but I'm not able to access lips global object. I was reading the docs and what I've read is that I need to use post message to connect with page. So I've injected messages.js and reused my exec function but this don't work I've got error: Could not establish connection. Receiving end does not exist.

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action === 'lips') {
        exec(request.code).then(function(
            console.log({request, result});
            sendResponse(result);
        });
      }
});

I was looking at this git repo https://github.com/thingsinjars/devtools-extension/ and Vue.js devtools but was not able to figure out how to access global object execute a function and get the result back to devtools extension.

And another related question can I call web page controled console.log from dev tools extension?

In a content script you'd need to access the [page context](/a/9517879). Instead of content scripts try using chrome.devtools.inspectedWindow.eval. — wOxxOm, Jun 25 '20 at 18:29
@wOxxOm is there a way to communicate between content script and page using messages? I don't like using JavaScript eval to call a function, also I will not be able to get the value back (it's a promise). — jcubic, Jun 25 '20 at 18:50
1) Use CustomEvent, [example](https://stackoverflow.com/a/19312198). 2) This is an extension API with an unfortunate name not a JS eval. — wOxxOm, Jun 26 '20 at 02:49
@wOxxOm so document is available on both pages content script and website? Do you know how to actually do that, that will work? Maybe you should create an answer with proper code, that call function and return value back. The documentation is not very helpful. — jcubic, Jun 26 '20 at 07:22

Two way communication between dev tools chrome extension and website

0 Answers0