我正在編寫我的第一個Chrome擴展。我正在嘗試使用jQuery和jQuery Image Desaturate plugin在http://www.flickr.com的頁面上淡化圖像。SECURITY_ERR:DOM在Chrome擴展中使用getImageData的例外18
我加載我的腳本(和jQuery和插件)編程在我background.html:
// On browser action click, we load jQuery and the desaturate plugin, then
// call our own flickrnoir.js to desaturate the photo.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
chrome.tabs.executeScript(null, {file: "jQuery.desaturate.js" }, function() {
chrome.tabs.executeScript(null, { file: "flickrnoir.js" });
})
});
});
我在我的manifest.json
指定的Flickr頁面權限:
"permissions": [
"tabs", "http://www.flickr.com/", "http://*.static.flickr.com/"
]
這似乎工作正常,我可以,例如,將所有div的背景上的Flickr照片頁面添加到flickrnoir.js
,然後打開Flickr頁面並單擊我的分機按鈕:
$("div").css("background-color", "#ff0000");
...所以,我成功地加載了jQuery,它可以成功訪問和更改http://*.flickr.com/*
頁面的DOM元素。
但是,當我嘗試使用去飽和插件去飽和圖像(或所有圖像,實際上)時,我遇到安全性錯誤。我的代碼:
$("img").desaturate();
...在jQuery.desaturate插件的代碼最終結束了運行這行:
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
在這一點上,Chrome瀏覽器會引發安全異常:
Uncaught Error: SECURITY_ERR: DOM Exception 18
......這讓我停下腳步。
編輯:好的,所以我猜這是因爲頁面在www.flickr.com
,而我複製到畫布的圖像是在farm6.static.flickr.com
?這是否違反了跨域策略?
我真的不熟悉Chrome擴展安全模型,或者canvas
的跨域限制,或者兩者如何交互,所以我可以使用任何幫助可以讓我理解這一點,但當然,我的根本問題是 - 我如何通過這個安全例外,並讓我的代碼工作?
太棒了,只是我需要的信息。我的擴展現在正在工作並令照片愉快地變得飽滿。 (我得到獨角獸!) – 2011-04-01 22:12:31