How to Crete a Menu-bar below the Browser Toolbar Using crosrider

Question

I am creating a browser extension using "CROSSRIDER", Now I want to create a menubar inbetween toolbar and our website page, as shown in fig below

In the above image you can oberserver that the menubar contains "Congradulations browser app is successfully installed" text. Below, You can also see two more images that show's before and after adding a Menu bar to the single website.(I took these sample images from another website just for explanation)

Image--> 1(Before adding Menu bar)

Image--> 2(After adding menu bar)

In the above fig you can observer the menubar(which was in yellow color). Now I want to create a menu bar like that.How can I achieve this scenario using CROSSRIDER.

Answer 1

You can achieve this using regular JS DOM or jQuery code from within the Extension Page Scope. So, to get you started, in the extension.js file you could use something like:

appAPI.ready(function($) {
  $('<div id="my-toolbar"></div>').
    css({
      "background-color":"wheat",
      height:"50px",
      left:0,
      position:"fixed",
      top:0,
      width:"100%"})
    .appendTo('body');
});

[Disclosure: I am a Crossrider employee]