如何在Firefox addon SDK模块中加载图像

Question

好的，所以我已经尝试了从 file：//// uri加载位图并将其绘制到帆布中。

一切都很好，直到我需要使用 getimagedata 将数据从画布上获取，然后我遇到了安全例外。我去Moz聊天，并告诉我，因为我正在从页面修改的HTML文件中加载图像，所以这是一个跨域策略问题，不允许。

他们说，

解决方案是转到主模块并加载图像，将其复制到画布上，然后用 getemimagedata 序列化数据，然后将其发送回HTML DOC。一个问题：JetPack不知道"图像"是什么，因为它没有HTML DOM，因此该操作似乎或多或少是不可能的。

为什么这首先是跨域政策问题？除此之外，如何在不访问DOM的情况下加载图像？

Answer 1

main.js模块和您可以阅读的内容脚本之间的通信的更简单，最佳示例是附加的SDK文档：查找标题下的部分内容脚本。

基本上，这是主模块告诉内容脚本（您的情况下的PageMod）的方式：

worker.port.emit("getElements", tag);

这就是它听到内容脚本告诉他的内容的方式：

worker.port.on("gotElement", function(elementContent) {
  console.log(elementContent);
});

在另一边，内容脚本会以这种方式聆听主模块所说的内容：

self.port.on("getElements", ...

最后，此示例丢失的情况是内容脚本如何发出事件以将某些内容告诉主要模块：

self.port.emit("myCustomEvent", var1=someValue, var2=otherValue, ...)

但这就是主意。我还建议您仔细研究有关内容脚本（PageMods，widgets，Tabs，面板等）如何工作的更一般性解释，因为这是MOSST重要的概念，可以理解SDK ADDON的工作方式。

最后，关于内容脚本上的跨域问题，您可以在此处阅读更多。