如何在我的网站中使用 Chrome 扩展功能 (NaCl)？答案

【问题标题】：How to use Chrome Extension functions (NaCl) in my website?如何在我的网站中使用 Chrome 扩展功能 (NaCl)？
【发布时间】：2014-02-07 11:41:59
【问题描述】：

我有一个网站和一个 Google Chrome 扩展程序。该扩展使用 NaCl API (JavaScript) 从用户计算机写入/读取文件 (C++)。

我的问题是：我可以在我的网站（例如 iFrame）中加载我的扩展程序并保留其功能吗？

我尝试这样做，但它只加载扩展“视觉”部分。写/读 (NaCl) 功能不起作用。

一个更好地解释我想做的例子：

实际上是这样工作的：

我想这样做：

或者这是另一种方式，但我认为这是不可能的，是吗？

有可能吗？我该怎么做？

编辑

代码如下：

在 manifest.json 我把这个：

"externally_connectable": {
    "matches": ["http://www.example.com/index.html"]
},

"web_accessible_resources": [
    "/*"
],
"content_scripts" : [
    {
        "matches" : ["http://www.example.com/index.html"],
        "js": ["index.js"]
    }
],

我网站的 iframe：

<iframe src="chrome-extension://myextensionid/index.html"></iframe>

在我的扩展 index.js 文件中，只有两个按钮。它们的函数 (JavaScript) 与 .cc 文件（通过 NaCl）通信，以在计算机上的文件中保存或加载字符串。

正如我所说，该扩展程序运行良好，但是当我尝试通过 iframe 将其加载到我的网站时，它只加载 html（视觉）。只要 JS 使用 NaCl 调用 C++ 函数，JavaScript 就不会加载，因此 C++ 也不会加载。

有什么办法吗？

【问题讨论】：

图形可能对其他人有帮助，但我无法解析它。您为什么不发布代码示例，以便其他人可以重现您看到的问题？
@sowbug - 我更新了我的问题。
你试过在 content_scripts 中添加 "all_frames": true 吗？
@JoãoAugusto - 是的，我做到了。显然，它什么也没改变。
也许问题出在“匹配”上，显然您只允许内容脚本在“mysite.com/index.html”中运行

标签： javascript c++ google-chrome google-chrome-extension google-nativeclient

【解决方案1】：

<embed name="nacl_module" id="nacl_module" width="100%" height="100%" path src="//storage.googleapis.com/gonacl/demos/publish/236779/voronoi/voronoi.nmf" type="application/x-pnacl">

而上面的标签就在这个iframe中：

<iframe frameborder="0" width="100%" height="100%" src="/static/voronoi/index.html">

这是来自https://gonativeclient.appspot.com/demo/voronoi

https://gonativeclient.appspot.com/static/voronoi/example.js 还包含如何完成的脚本。

我已经进行了 10 分钟的搜索才能找到它。只是要知道 NaCl 不适用于其他浏览器。

如果您想要适用于所有浏览器的纯 javascript。在下面使用这个 sn-p。它会创建一个链接，当您单击它时，它会下载一个包含text 数据的文本文件。添加一个 `.innerHTML' 属性，例如“保存”，然后您可以单击它。 HTML5 对长属性没有限制。

var file = document.createElement('a');
file.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
file.setAttribute('download', filename);

您可以从多行文本框中设置text 变量，并使用更新其值的键事件。文件名也是如此，例如“保存的草稿.txt”。除了文本/纯文本之外，您也可以尝试其他类型的数据。要检查其他类型，请搜索标头在其数据字段中可以采用的内容。

对于文件加载，您可以查看此http://www.html5rocks.com/en/tutorials/file/dndfiles/

【讨论】：