How to access images from an add-on

How are you exactly accessing the images on webpages?

Previously, add-on scripts used to have system principle, now, in WebExtensions, they have content principle of that webpage they’re running in with some exceptions: they have different fetch and XMLHTTPRequest injected which have no CORS restrictions.

That’s the same issue [1] I’ve stumbled upon with my add-on. I need to access document.styleSheets[…] and my workaround is: remove affected stylesheets, fetch() their code, inject into the page as inline stylesheet, fix all relative links inside. You probably can make something like this: fetch() image data, construct a data: url from it’s data and do whatever you want with them. Obviously, that’s not the prettiest way but that’s all you can do now.
In the bug I’ve created [2] firefox developers decided not to extend WebExtensions content script principle to WebExtensions CORS policy. Instead, they’re going to “digg a holes” for each such usecase as already done for fetch() and XMLHTTPRequest. So, you should create a bug for your case.

  1. WebExtensions porting: access to cross-origin document.styleSheets[...].cssRules
  2. https://bugzilla.mozilla.org/show_bug.cgi?id=1393022
  3. https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Script_security