如何将Blob从Chrome扩展程序传递到Chrome应用

一点背景

我已经在Chrome扩展程序上工作了几天，该扩展程序一天多次拍摄给定网页的屏幕截图。我以此为指导，事情按预期进行。

不过，有一个小的需求扩展无法满足。用户必须有权访问保存图像（屏幕快照）的文件夹，但Chrome扩展程序无权访问文件系统。另一方面，Chrome Apps可以。因此，环顾四周后，我得出结论，我必须同时创建Chrome扩展程序和Chrome应用程序。这个想法是，扩展程序将创建屏幕快照的blob，然后将该blob发送到应用程序，然后将其作为图像保存到用户指定的位置。而这正是我正在做的事情–我正在扩展端创建一个屏幕截图，然后将其发送到应用程序，在该应用程序中，用户被要求选择保存图像的位置。

问题

直到节省部分，一切都按预期进行。在扩展上创建Blob，将其发送到应用程序，由应用程序接收，要求用户将文件保存在哪里，并保存图像...。生成的图像不可用。当我尝试打开它时，出现一条消息“无法确定类型”。以下是我使用的代码：

1. 首先在扩展端，创建一个blob并将其发送过来，如下所示：

    chrome.runtime.sendMessage(
       APP_ID, /* I got this from the app */
       {myMessage: blob}, /* Blob created previously; it's correct */
       function(response) {
         appendLog("response: "+JSON.stringify(response));
       }
    );
   

2. 然后，在APP端，我收到了Blob，并尝试像这样保存它：

   // listen for external messages
   chrome.runtime.onMessageExternal.addListener(
     function(request, sender, sendResponse) {
       if (sender.id in blacklistedIds) {
         sendResponse({"result":"sorry, could not process your message"});
         return;  // don't allow this extension access
       } else if (request.incomingBlob) {
         appendLog("from "+sender.id+": " + request.incomingBlob);
   
         // attempt to save blob to choosen location
         if (_folderEntry == null) {
            // get a directory to save in if not yet chosen
            openDirectory();
         }
         saveBlobToFile(request.incomingBlob, "screenshot.png");
   
         /*
         // inspect object to try to see what's wrong
         var keys = Object.keys(request.incomingBlob);
         var keyString = "";
         for (var key in keys) {
            keyString += " " + key;
         }
         appendLog("Blob object keys:" + keyString);
         */
   
         sendResponse({"result":"Ok, got your message"});
       } else {
         sendResponse({"result":"Ops, I don't understand this message"});
       }
     }
   );
   

   这是执行实际保存的APP上的功能：

   function saveBlobToFile(blob, fileName) {
     appendLog('entering saveBlobToFile function...');
     chrome.fileSystem.getWritableEntry(_folderEntry, function(entry) {         
       entry.getFile(fileName, {create: true}, function(entry) {         
         entry.createWriter(function(writer) {
           //writer.onwrite = function() {
           //   writer.onwrite = null;
           //   writer.truncate(writer.position);
           //};
           appendLog('calling writer.write...');
           writer.write(blob);                       
           // Also tried writer.write(new Blob([blob], {type: 'image/png'}));
         });
       });
     });
   }
   

没有错误。没有打ic。该代码有效，但是图像无用。我到底在想什么？我要去哪里错了？是我们只能在扩展程序/应用程序之间传递字符串吗？Blob在途中是否已损坏？我的应用程序是在扩展程序上创建的，因此无法访问它吗？任何人都可以阐明一下吗？

更新（9/23/14）对不起，我很晚才进行更新，但是我被分配到了一个不同的项目，直到两天前我才回到这个状态。

因此，在环顾四周之后，我决定接受@Danniel Herr的建议，该建议建议使用SharedWorker和嵌入在应用程序框架中的页面。这个想法是，扩展程序将把blob提供给SharedWorker，后者将blob转发到扩展程序中嵌入应用程序框架中的页面。该页面然后使用parent.postMessage（...）将Blob转发到应用程序。这有点麻烦，但这似乎是我唯一的选择。

让我发布一些代码，使它更有意义：

扩大：

var worker = new SharedWorker(chrome.runtime.getURL('shared-worker.js'));
worker.port.start();
worker.postMessage('hello from extension'); // Can send blob here too
worker.port.addEventListener("message", function(event) {
   $('h1Title').innerHTML = event.data;
});

proxy.js

var worker = new SharedWorker(chrome.runtime.getURL('shared-worker.js'));
worker.port.start();

worker.port.addEventListener("message",
   function(event) {      
      parent.postMessage(event.data, 'chrome-extension://[extension id]');
   }
);

proxy.html

<script src='proxy.js'></script>

shared-worker.js

var ports = [];
var count = 0;
onconnect = function(event) {
    count++;
    var port = event.ports[0];
    ports.push(port);
    port.start(); 

    /* 
    On both the extension and the app, I get count = 1 and ports.length = 1
    I'm running them side by side. This is so maddening!!!
    What am I missing?
    */
    var msg = 'Hi, you are connection #' + count + ". ";
    msg += " There are " + ports.length + " ports open so far."
    port.postMessage(msg);

    port.addEventListener("message",       
      function(event) {
        for (var i = 0; i < ports.length; ++i) {
            //if (ports[i] != port) {
                ports[i].postMessage(event.data);
            //}
        }
    });
};

在应用程式上

context.addEventListener("message", 
    function(event) {
        appendLog("message from proxy: " + event.data);
    } 
);

这就是执行流程...在扩展上，我创建了一个共享工作器并向其发送消息。共享工作者应该能够接收Blob，但是出于测试目的，我只发送一个简单的字符串。

接下来，共享工作者将收到消息并将其转发给已连接的每个人。此时，应用程序框架内的proxy.html / js确实已连接，并且应该接收共享工作程序转发的任何内容。

接下来，proxy.js [应该]从共享工作程序接收消息，并使用parent.postMessage（...）将其发送到应用程序。该应用程序正在通过window.addEventListener（“ message”，...）进行监听。

要测试此流程，我首先打开应用程序，然后单击扩展按钮。我在该应用上未收到任何消息。我也没有错误。

该扩展程序可以与共享工作程序来回通信。该应用程序可以很好地与共享工作者进行通信。但是，我从扩展名->代理-> app发送的消息未到达该应用程序。我想念什么？

对那些长期任职的家伙们感到抱歉，但是我希望有人能给我一些启发，因为这使我发疯。

谢谢