我正在学习可转移对象:http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast

它们看起来非常棒，我想在我的扩展中使用它们来加速从 iframe 内部到 iframe 外部的数据传递。

我已经让这个示例代码正常工作，但它使用了 Web Worker:

var s = document.createElement("script");
s.type = "text/js-worker";
s.innerHTML = 'console.log("i ran!");';
document.body.appendChild(s);

var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) {
    return oScript.textContent;
}), { type: "text/javascript" });

var worker = new Worker(window.URL.createObjectURL(blob));

var arrayBuffer = new ArrayBuffer(1);

worker.onmessage = function (oEvent) {
    console.log("Called back by the worker!\n");
};

console.log("worker:", worker);
worker.postMessage(arrayBuffer, [arrayBuffer]);

if (arrayBuffer.byteLength) {
    console.error("nope");
} else {
    console.log("it worked");
}

有没有人有任何关于支持的信息，或者支持的时间表/使用端口的 crbug:

var port = chrome.runtime.connect({
    name: 'youTubeIFrameConnectRequest'
});

//port.postMessage -- transferrable object.

我没有看到对它的任何支持或任何支持它的东西，但这看起来真的很奇怪!

最佳答案

通过 extension message passing APIs 的消息始终是 JSON 序列化的。这种格式不仅用于在后台页面和内容脚本之间传递消息，还用于native applications。 .因此，我猜测消息传递 API 不太可能支持更多项目。

结构化克隆算法(比 JSON 序列化更强大，但不如可转移数据)的请求已在 2012 年提出(Chromium issue 112163)。这个问题仍然悬而未决；有人建议使用 SharedWorker作为“蹦床”。

SharedWorker受同源策略影响，调用者需要同源。为此，您可以将页面添加到 web_accessible_resources , 并将此页面嵌入框架中。

在这个答案的最后，我附上了蹦床的简单实现。使用这些文件创建扩展。然后，打开一个选项卡。此选项卡将包含嵌入式框架，演示将向共享工作人员发送一条消息。这条消息会被输送到后台页面，就view the console of the background page查看这些消息。
demo极小，需要自己实现端口管理(销毁)。
该演示不使用可传输消息传递(尚未)，因为它是允许多个端口的通用实现。如果您确保最多同时存在两个端口，那么您可以更改代码以使用可转让(可转让仅在有一个接收和一个发送者时才有意义，因为对象的所有权也被转移)。

特例:相同进程

如果您的所有代码都在同一个进程中运行，那么您可以使用更简单的方法，无需 SharedWorker。

同源策略禁止直接访问框架和扩展，因此您将使用 parent.postMessage过这座桥。然后，在页面的onmessage事件中，可以使用chrome.extension.getViews直接引用您的扩展页面之一(例如弹出页面、选项页面等)的 window 对象。
从其他页面，chrome.extension.getBackgroundPage()给出对背景页面的 window 对象的引用(对于 event page ，使用 chrome.runtime.getBackroundPage(callback) )。

如果您想连接两个框架，请使用 Channel 消息传递 API(请参阅 whatwg specification 和 Opera's dev article)。使用这种方法，您将在帧之间建立直接连接，即使它们位于不同的来源!

例子:蹦床

worker.js

var ports = [];
onconnect = function(event) {
    var port = event.ports[0];
    ports.push(port);
    port.start();
    port.onmessage = function(event) {
        for (var i = 0; i < ports.length; ++i) {
            if (ports[i] != port) {
                ports[i].postMessage(event.data);
            }
        }
    };
};

蹦床.js

var worker = new SharedWorker(chrome.runtime.getURL('worker.js'));
worker.port.start();
// Demo: Print the message to the console, and remember the last result
worker.port.onmessage = function(event) {
    console.log('Received message', event.data);
    window.lastMessage = event.data;
};
// Demo: send a message
worker.port.postMessage('Hello');

trampoline.html

<script src="trampoline.js"></script>

contentscript.js

var f = document.createElement('iframe');
f.src = chrome.runtime.getURL('trampoline.html');
f.hidden = true;
(document.body || document.documentElement).appendChild(f);

list .json

注意:我将 trampoline.js 作为后台脚本以节省此答案中的空间。从 Web worker 的 Angular 来看，谁发起消息并不重要，所以我重新使用了发送和接收消息的代码(毕竟这是一个简单的演示!)。

{
    "name": "Trampoline demo",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["trampoline.js"],
        "persistent": true
    },  
    "content_scripts": [{
        "js": ["contentscript.js"],
        "matches": ["<all_urls>"]
    }],
    "web_accessible_resources": [
        "trampoline.html"
    ]   
}

关于javascript - chrome.runtime 是否支持发布带有可传输对象的消息？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21086918/