2014-01-31 61 views
1

行,所以我有了這個插件在那裏我試圖從文件加載位圖:/// URI和它畫到畫布上。如何在Firefox addon sdk模塊中加載圖像?

所有這一切都很好,直到我需要使用getImageData從畫布上獲取數據,然後我遇到了安全異常。我去了Moz聊,並被告知,因爲我從頁面改裝的HTML文件加載圖像,這是一個跨域策略問題,不允許。

他們說,解決方案是轉到主模塊並在那裏加載圖像,將其複製到畫布上,然後使用getImageData將數據序列化並將其發送回HTML文檔。 一個問題:Jetpack的不知道什麼是「形象」,是因爲它不具有HTML DOM,因此操作起來要呈現或多或少是不可能的。

爲什麼這是擺在首位跨域策略問題?除此之外,如何在不訪問DOM的情況下加載圖像?

回答

0

main.js模塊和內容腳本,你可以閱讀之間的溝通更簡單,最好的例子就是Add-on SDK docs:找交往對象的內容腳本標題下的部分。

基本上,這是主要的模塊如何通知內容的腳本(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,窗口小部件,標籤,面板等)的工作,因爲這是瞭解插件如何SDK工作mosst重要的概念。

最後,關於內容的腳本跨域問題,您可以閱讀更多here

+0

是啊,這看起來很不錯......因爲我把它給Mozilla開發者的注意,他們恢復了缺失的例子......與他們協商後,他們透露加載圖像玷污是加載它的唯一途徑作爲模塊側的二進制文件;把它變成一個數據URI;並將URI傳遞給將其傳遞給頁面腳本的內容腳本。可怕的,可怕的設置。最複雜的文件加載方案_ever_。 –

+0

...並且,請允許我繼續前進並向下投票,而不回答問題。沒關係......沒有代表......你很安全。 –

相關問題