如何使用 crossrider 在浏览器工具栏下方创建菜单栏

Question

我正在使用“CROSSRIDER”创建浏览器扩展，现在我想在工具栏和我们的网站页面之间创建一个菜单栏，如下图所示

在上图中，您可以观察到菜单栏包含“祝贺浏览器应用程序已成功安装”文本。 下面，您还可以看到另外两张图片，展示了在单个网站添加菜单栏之前和之后的情况。（我从另一个网站获取这些示例图片只是为了解释）

图片--> 1（添加菜单栏前）

图片--> 2(添加菜单栏后)

在上图中，您可以观察到菜单栏（黄色）。现在我想创建一个这样的菜单栏。如何使用 CROSSRIDER 实现这个场景。

Answer 1

您可以使用Extension Page Scope 中的常规 JS DOM 或 jQuery 代码来实现此目的。 因此，为了让您开始，您可以在 extension.js 文件中使用如下内容：

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

[披露：我是 Crossrider 的员工]