javascript - 开发工具 chrome 扩展和网站之间的两种方式通信

Question

我正在尝试通过在 JavaScript 中创建的基于 Scheme 的解释器为 LIPS 编写开发工具扩展。我想使用函数lips.exec 并从开发工具页面调用该函数并取回结果。

到目前为止，我有这个，我有消息脚本（这是基于我来自闪亮 R 框架的另一个项目）：

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;
})();

当我从开发工具调用它时，消息被发送到内容脚本，但我无法访问嘴唇全局对象。我正在阅读文档，我读到的是我需要使用发布消息来连接页面。所以我注入了messages.js并重用了我的exec函数，但这不起作用我有错误：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);
        });
      }
});

我正在查看这个 git repo https://github.com/thingsinjars/devtools-extension/和 Vue.js devtools 但无法弄清楚如何访问全局对象执行函数并将结果返回给 devtools 扩展。

还有另一个相关问题，我可以从开发工具扩展中调用网页控制的 console.log 吗？

标签： javascriptgoogle-chrome-extensiongoogle-chrome-devtools