Question

我正试图通过JavaScript中基于Scheme的解释器为LIPS编写Dev Tools扩展。我想使用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;
})();

当我从开发工具中调用它时，消息被发送到内容脚本，但是我无法访问Lips全局对象。我正在阅读文档，已经阅读的内容是我需要使用帖子消息才能与页面建立联系。因此，我注入了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吗？

开发工具Chrome扩展程序和网站之间的双向通信

0 个答案: