Javascript 在chrome扩展和应用程序中实现跨扩展消息传递

我正试图做交叉扩展之间的消息传递铬扩展和铬应用程序根据。但我不知道如何正确地做。我使用后台js来接收和发送消息。但不知道它是否起作用。实际上，我想从chrome扩展名保存文件，因为它无法完成，我认为这可以工作。因此，任何想法、建议或例子都是非常受欢迎的

---

我已经经历了许多选择，如中所示。然后其中一个答案指向这个例子。我发现这很好用。我希望我可以使用这个机制使用Chrome应用程序的文件系统API保存文件。

Chrome消息传递API只能传输JSON可序列化的值。如果文件很小，那么您可以使用扩展名读取文件内容，然后通过外部消息通道将消息发送到Chrome应用程序

当文件较大时，使用分块读取文件，然后按照与小文件相同的方法读取

分机：

var app_id = '.... ID of app (32 lowercase a-p characters) ....';
var file = ...; // File or Blob object, e.g. from an <input type=file>

var fr = new FileReader();
fr.onload = function() {
    var message = {
        blob: fr.result,
        filename: file.name,
        filetype: file.type
    };
    chrome.runtime.sendMessage(app_id, message, function(result) {
        if (chrome.runtime.lastError) {
            // Handle error, e.g. app not installed
            console.warn('Error: ' + chrome.runtime.lastError.message);
        } else {
            // Handle success
            console.log('Reply from app: ', result);
        }
    });
};
fr.onerror = function() { /* handle error */ };
// file or sliced file.
fr.readAsText(file);

---

编辑：虽然下面使用的方法在理论上听起来不错，但实际上它不起作用，因为为应用程序/扩展创建了一个单独的SharedWorker流程

如果要发送大文件（例如

文件

s），则可以实现以下功能：

扩展名：创建

proxy.html

（内容=

）。（请随意选择任何其他名称）

扩展名：放入

proxy.html

应用程序：绑定一个

窗口.onmessage

事件侦听器。此事件侦听器将从下一步要加载的帧接收消息

App:Load

chrome扩展名：//[EXTENSIONID]/proxy.html

在应用程序的框架中。此扩展ID可以硬编码（请参阅），也可以通过外部扩展消息传递API进行交换（请确保验证源代码-硬编码ID是最佳方式）

扩展名：加载

proxy.html

时，请检查

location.ancestorOrigins[0]=“chrome扩展名：//[APPID]”

，以避免安全漏洞。如果此条件失败，则终止所有步骤

扩展名：当您想将

文件

或

Blob

传递给应用程序时，请使用

parent.postMessage（Blob，'chrome Extension://[APPID]”）

App：当它从扩展框架接收到blob时，将其保存到通过API获得的文件系统中

要解决的最后一个任务是从扩展名获取一个文件到嵌入到应用程序中的扩展名框架（

proxy.html

）。这可以通过

SharedWorker

完成，请参见示例（您可以跳过创建新框架的部分，因为扩展框架已在前面的一个步骤中创建）。

---

请注意，目前（Chrome 35），.

感谢您提供了大量信息，但我对第4步和第5步有点困惑。我是否必须在应用程序中包含proxy.html？如果是，我可以在扩展中使用它的内容吗？我想通过单击按钮或任何其他方式从扩展名保存文件。那么我可以使用代理html来构建扩展的ui吗？@RuwankaMadhushan

proxy.html

仅用于将非JSON可序列化对象（例如

文件

）从扩展发送到应用程序

proxy.html

是扩展的一部分，并嵌入到应用程序的框架中。在扩展名的UI中选择文件后，

文件

对象将传递给

共享工作者

，后者将对象传递给

代理.html

，后者将对象传递给应用程序。这相当复杂，但它可以工作。从应用程序向扩展程序发送文件的方式与此类似。由于我是扩展程序开发新手，我遇到了如何将

proxy.html

嵌入到应用程序中的嵌入标记中的问题，或者是否有其他方法？既然扩展无法选择文件，那么在扩展UI中选择文件是什么意思？我想从web页面收集一些信息并将其保存为xml，我还想读取该xml并在扩展UI中显示其内容。我可以用你的方法吗？@RuwankaMadhushan现在你提到你想保存一个（XML）字符串，我强烈建议你只使用外部消息传递作为字符串发送消息，正如我在回答顶部提到的那样。实际上，我不知道xml字符串的大小如何，这就是为什么我对你的方法感兴趣，尽管它很复杂。所以，你能不能再多解释一点我感到困惑的地方。

chrome.runtime.onMessageExternal.addListener(
  function(message, sender, sendResponse) {
    // TODO: Validate that sender.id is allowed to invoke the app!

    // Do something, e.g. convert back to Blob and do whatever you want.
    var blob = new Blob([message.blob], {type: message.filetype});

    console.log('TODO: Do something with ' + message.filename + ':', blob);

    // Do something, e.g. reply to message
    sendResponse('Processed file');
    // if you want to send a reply asynchronously, uncomment the next line.
    // return true;
});