Cross origin issues when calling `toPixels` in chrome extension.

"DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The image element contains cross-origin data, and may not be loaded.". GroupsTensorFlow.jsDiscussionConversationsAboutCrossoriginissueswhencalling`toPixels`inchromeextension.862viewsSkiptofirstunreadmessageDanOvedunread,Jun5,2018,10:27:55AM6/5/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetoTensorFlow.jsDiscussionIwanttobuildachromeextensionthatcanfeedanyimagefromawebpagethroughatfjsnetwork. Theextensionwouldsearchthepageforanyimageelementthenallowtheimagestobereadforinference.Asthefirstpartofthisstep,inacontentscriptinthechromeextension,Ineedtoconverttheimagetopixelswithtf.fromPixels(image). Occasionally,theimagecomesfromacross-originurl.Whencalling tf.fromPixels(image)fromwithinthecontentscript,anerroroccurs:"DOMException:Failedtoexecute'texImage2D'on'WebGL2RenderingContext':Theimageelementcontainscross-origindata,andmaynotbeloaded."Hasanyoneevergottenaroundthis? Arethereanyexampleswherecross-imageoriginsimagereadingworksinachromeextension?FYImymanifest.jsonlookslike:{ "manifest_version":2, "name":"tfjsextension", "description":"ChromeExtension,TypeScript,VisualStudioCode", "version":"1.0", "content_scripts":[   {     "matches":[""],     "js":["js/content_script.js"]   } ] "permissions":[  "activeTab" ]}NikhilThoratunread,Jun5,2018,10:35:48AM6/5/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetoove...@gmail.com,TensorFlow.jsDiscussionHiDan,CORScanbetricky,checkoutthispostonCORSwithimagereadsinWebGL: https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.htmlTLDR:youneedtomakesuretherightHTTPheadersareset(Access-Control-Allow-Origin)/possiblysetthe"crossOrigin"attributeonthetag. -- YoureceivedthismessagebecauseyouaresubscribedtotheGoogleGroups"TensorFlow.jsDiscussion"group. Tounsubscribefromthisgroupandstopreceivingemailsfromit,[email protected]. Visitthisgroupathttps://groups.google.com/a/tensorflow.org/group/tfjs/. Toviewthisdiscussiononthewebvisithttps://groups.google.com/a/tensorflow.org/d/msgid/tfjs/5d2f613e-2de3-4b81-8bfd-e95805997c62%40tensorflow.org. DanOvedunread,Jun5,2018,10:37:54AM6/5/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetoTensorFlow.jsDiscussion,[email protected]. Thiswouldbeforathirdpartysite,ofwhichtheserverthathoststheimageisnotaccessible,soguessthatwouldn'tbepossible.  LaurentDenoueunread,Jun5,2018,9:53:38PM6/5/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetoDanOved,TensorFlow.jsDiscussioncan'tyoudownloadtheimagesyourselffromtheextension,thenprocessthem? Tounsubscribefromthisgroupandstopreceivingemailsfromit,[email protected]. Visitthisgroupathttps://groups.google.com/a/tensorflow.org/group/tfjs/. Toviewthisdiscussiononthewebvisithttps://groups.google.com/a/tensorflow.org/d/msgid/tfjs/0e57ec35-6daf-48ef-88f0-c1e64ef8042d%40tensorflow.org. NikhilThoratunread,Jun5,2018,10:08:50PM6/5/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetolde...@gmail.com,[email protected],TensorFlow.jsDiscussionYeah,ifyoucanhostityourselfbydownloadingandreuploadingyoushouldbeabletoreadthepixels. Toviewthisdiscussiononthewebvisithttps://groups.google.com/a/tensorflow.org/d/msgid/tfjs/0e57ec35-6daf-48ef-88f0-c1e64ef8042d%40tensorflow.org. -- YoureceivedthismessagebecauseyouaresubscribedtotheGoogleGroups"TensorFlow.jsDiscussion"group. Tounsubscribefromthisgroupandstopreceivingemailsfromit,[email protected]. Visitthisgroupathttps://groups.google.com/a/tensorflow.org/group/tfjs/. Toviewthisdiscussiononthewebvisithttps://groups.google.com/a/tensorflow.org/d/msgid/tfjs/CAK7XdaXZbvQFe%2B9bLLbU6G3qumXgqcx-ch1VvHUhnTmWezniBw%40mail.gmail.com. LaurentDenoueunread,Jun5,2018,10:29:12PM6/5/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetoNikhilThorat,DanOved,TensorFlow.jsDiscussionCan'twejust:-downloadtheimageusingtheextension-drawittoacanvas-passthecanvastotf.fromPixels Tounsubscribefromthisgroupandstopreceivingemailsfromit,[email protected]. Visitthisgroupathttps://groups.google.com/a/tensorflow.org/group/tfjs/. Toviewthisdiscussiononthewebvisithttps://groups.google.com/a/tensorflow.org/d/msgid/tfjs/0e57ec35-6daf-48ef-88f0-c1e64ef8042d%40tensorflow.org. -- YoureceivedthismessagebecauseyouaresubscribedtotheGoogleGroups"TensorFlow.jsDiscussion"group. Tounsubscribefromthisgroupandstopreceivingemailsfromit,[email protected].DanOvedunread,Jun5,2018,10:42:41PM6/5/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetoTensorFlow.jsDiscussion,[email protected],[email protected]'vetriedsomethingthatcreatesanotherimageelementand"downloads"itbysettingthesrc:functionreloadImage(image:HTMLImageElement){ constcopiedImage=newImage(); returnnewPromise((resolve,reject)=>{  copiedImage.onload=()=>{   resolve(copiedImage);  }  copiedImage.crossOrigin='anonymous';  copiedImage.src=image.src; })}asyncfunctiontoTensor(element:HTMLImageElement){ constimage=awaitreloadImage(element); consttensor=tf.fromPixels(image); returntensor;}andgetthesameerror.ThenItriedalsorenderingtocanvasandgettingtheimagedata:functionloadImageData(image:HTMLImageElement){ constcanvas=document.createElement('canvas'); constcontext=canvas.getContext('2d'); canvas.width=image.width; canvas.height=image.height; context.drawImage(image,0,0); returncontext.getImageData(0,0,image.width,image.height);}asyncfunctiontoTensor(element:HTMLImageElement){ constimageData=awaitloadImageData(element); consttensor=tf.fromPixels(element); returntensor;}AndIgetanerror:DOMException:Failedtoexecute'getImageData'on'CanvasRenderingContext2D':Thecanvashasbeentaintedbycross-origindata. Toviewthisdiscussiononthewebvisithttps://groups.google.com/a/tensorflow.org/d/msgid/tfjs/0e57ec35-6daf-48ef-88f0-c1e64ef8042d%40tensorflow.org. -- YoureceivedthismessagebecauseyouaresubscribedtotheGoogleGroups"TensorFlow.jsDiscussion"group. Tounsubscribefromthisgroupandstopreceivingemailsfromit,[email protected]. Visitthisgroupathttps://groups.google.com/a/tensorflow.org/group/tfjs/. Toviewthisdiscussiononthewebvisithttps://groups.google.com/a/tensorflow.org/d/msgid/tfjs/CAK7XdaXZbvQFe%2B9bLLbU6G3qumXgqcx-ch1VvHUhnTmWezniBw%40mail.gmail.com. LaurentDenoueunread,Jun5,2018,10:45:38PM6/5/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetoDanOved,TensorFlow.jsDiscussion,NikhilThoratyes,itmakessensethatsettingthesameURLtoanewIMG(evenifpaintingaftertoaCANVAS)fails.Ithinkyouneedtoreallydownloadtheimagetodiskfromtheextension,thenloaditbackintoanewimage.Laurent Tounsubscribefromthisgroupandstopreceivingemailsfromit,[email protected]. Visitthisgroupathttps://groups.google.com/a/tensorflow.org/group/tfjs/. Toviewthisdiscussiononthewebvisithttps://groups.google.com/a/tensorflow.org/d/msgid/tfjs/449c8989-4a7c-41d3-abdd-af78e1b5da49%40tensorflow.org. DanOvedunread,Jun5,2018,10:46:52PM6/5/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetoTensorFlow.jsDiscussionFortherecord,I'mtryingtorunthisextensionwhilebrowsingwikiart.orgtoruntfjsmodelsonwikiartimages.https://www.wikiart.org/Theimagesonthatsidehaveheaders Access-Control-Allow-Origin:*soIbelieveit'ssomethingtodowiththechromeextensionconfig.https://uploads5.wikiart.org/temp/5884b62e-11a4-40e0-bbaa-b02a6ea9d6a7.jpg!PinterestLarge.jpghttps://uploads1.wikiart.org/images/conrad-marca-relli(1).jpg!PinterestLarge.jpghttps://uploads6.wikiart.org/images/jes-s-rafael-soto.jpg!PinterestLarge.jpgDanOvedunread,Jun5,2018,11:39:10PM6/5/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetoTensorFlow.jsDiscussionOkIgotitworkingbyfollowingthisstackoverflowanswer:https://stackoverflow.com/questions/5511378/security-err-dom-exception-18-on-using-getimagedata-in-a-chrome-extensionWhengrantingcross-originpermissionsviathe"permissions"inthemanifest.json,thisisgrantedtothebackgroundscript. SoIhavethecontentscriptsendamessagewiththeurltothebackgroundscript,anditdoestheprocessing,sendingaresponseback. Thisworks:Inthecontentscript:  chrome.runtime.sendMessage({url:element.src},function(response){   console.log(response.result);  });Inbackgroundpagescript:asyncfunctionloadImage(url:string):Promise{ constimage=newImage(); returnnewPromise((resolve:(HTMLImageElement)=>void,reject)=>{  image.onload=()=>{resolve(image)}  image.src=url; });}asyncfunctiontoTensor(url:string){ constimage=awaitloadImage(url); consttensor=tf.fromPixels(image); returntensor;}chrome.runtime.onMessage.addListener((request,sender,sendResponse)=>{ if(request.url){  constimageTensor=toTensor(request.url);  sendResponse({result:'loaded'}); }});LaurentDenoueunread,Jun6,2018,12:54:41AM6/6/18ReplytoauthorSignintoreplytoauthorForwardSignintoforwardDeleteYoudonothavepermissiontodeletemessagesinthisgroupLinkReportmessageasabuseSignintoreportmessageasabuseShoworiginalmessageEitheremailaddressesareanonymousforthisgrouporyouneedtheviewmemberemailaddressespermissiontoviewtheoriginalmessagetoDanOved,TensorFlow.jsDiscussion👍 -- YoureceivedthismessagebecauseyouaresubscribedtotheGoogleGroups"TensorFlow.jsDiscussion"group. Tounsubscribefromthisgroupandstopreceivingemailsfromit,[email protected]. Visitthisgroupathttps://groups.google.com/a/tensorflow.org/group/tfjs/. Toviewthisdiscussiononthewebvisithttps://groups.google.com/a/tensorflow.org/d/msgid/tfjs/f98aec53-35c7-4e30-85d9-0ece887af7da%40tensorflow.org. ReplyallReplytoauthorForward0newmessages