如何使用 postMessage API 发送 javascript 对象答案

【问题标题】：how to send javascript object with postMessage API如何使用 postMessage API 发送 javascript 对象
【发布时间】：2020-01-02 06:50:26
【问题描述】：

我知道 node.js 有加密模块（使用 openssl）来执行 enc/decrypt(aes,ecc...) 工作。但不知道如何在浏览器中进行操作。

所以我们使用elliptic 包，并将其打包在 bundle.js 中，它在 web 中运行良好。

我们想让它成为一个 chrome 插件。但我不知道 chrome 插件如何为用户网页提供调用功能。

我在 content_script 中使用 postMessage 向用户网页发送消息，但只能发送 json 数据，如果我使用 javascript 对象（我用许多 enc 函数打包的 bundle.js 对象）发送它。它会抱怨'无法克隆'错误。

【问题讨论】：

我知道window.crypto API，但我认为这是部分支持，我们需要更多的功能，如Ecc，SM（中国国家密码标准）。我们不希望它像web static资源，所以我们可以在没有用户许可的情况下更改它的版本（这就是我们想要将它作为插件的原因）
要向页面上下文公开函数，唯一的方法是创建一个 DOM 脚本元素：more info。

标签： javascript encryption google-chrome-extension postmessage

【解决方案1】：

更好的方法是将加密函数保留在 background.js 中，并通过消息将您想要处理的数据传递到后台，并将结果发送回页面。

例如，如果您想加密选定的文本，请在您的内容脚本中：

const encryptText = function (text) {
  return new Promise(function (resolve,reject) {
    chrome.extension.sendMessage({
      method : 'cryptoFunc',
      data : text,
    });
    let tempListener = function (response,sender) {
      if (response.method === 'cryptoFunc_response') {
        resolve(response.data);
        chrome.extension.onMessage.removeListener(tempListener);
      }
    };
    chrome.extension.onMessage.addListener(tempListener);
  });
};
let selectedText = window.getSelection().toString();
encryptText(selectedText).then(function (encrpted) {
  console.log(encrypted);
});

在您的后台脚本中：

chrome.extension.onMessage.addListener(function (request,sender) {
  if (request.method === 'cryptoFunc') {
    let result = cryptoFunc(request.data);
    chrome.tabs.sendMessage(sender.tab.id, {
      method : 'cryptoFunc_response',
      data : result,
    });
  }
});

【讨论】：