0

I'm using crossrider to make a cross-browser extension for my website.

Here's my Page Code (extension.js) :

appAPI.ready(function($) {


 //alert("Hello World");
 appAPI.resources.createImage(
    '<a href="test.html"><img src="http://localhost/images/fleche.png" width="128" height="128" /></a>'
 ).prependTo('body');

});

The snippet is only working with website using the http protocol. When it comes to https, the javascript code doesn't run.

Thank you for your help.

wolfk
  • 15
  • 1
  • 4

1 Answers1

1

The appAPI.resources.createImage method is designed for creating a jQuery image object using a file from the resources folder as the src. As the note in the docs say:

You must prefix the src attribute with resource-image://

If you want to simply inject an image into a page, use standard jQuery. e.g.:

$('<a href="test.html"><img src="http://localhost/images/fleche.png" width="128" height="128" /></a>')
  .prependTo('body');

[Disclosure: I am a Crossrider employee]

Shlomo
  • 3,763
  • 11
  • 16
  • The code is working and I know that I can store pictures in the app and use it with the api. The code is working on regular http website such as stackoverflow but not working on https websites such as google or facebook. – wolfk Dec 31 '14 at 18:52
  • As mentioned, the API method is designed for working with extension resources. It may unintentionally work with an HTTP address, but it's no better than the jQuery I presented. Used in this way, it has that same limitation you experienced, i.e. [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) and mixed content issues. Either (a) do not specify the protocol in your URL (i.e. start with **//**) and make sure the resource can be served over HTTPS as well, or (b) use the API method correctly by placing the resource in the extension's resources folder. – Shlomo Jan 01 '15 at 07:30