Javascript 如何将静态HTML作为chrome扩展？

我想做一个Chrome扩展，它基本上是一个HTML条，在用户激活它之后，一直保持在用户窗口的顶部。酒吧的位置应该是这样的：

---

我的问题是：我如何实现这种行为？我曾考虑在清单中将其添加为浏览器操作，但它不适合，因为它在失去焦点时会消失。我还尝试将其添加为内容脚本，使用简单的JS命令document.writeHTML行包含HTML，但在尝试时，我看不到任何条。我应该如何继续？

我认为内容脚本是解决这个问题的方法。所以您实际上修改了页面的DOM以显示您的内容。您可以查看其他类似的扩展

例如：。以下是他们的做法：

这是代码

---

谢谢，但你能解释一下它怎么适合我的情况吗？我不能对我创建的元素使用appendTo…为什么不能使用appendTo？好的，现在我看到我可以用JQuery创建元素了。但是，不管怎样，它几乎是有效的，但它并不是出现在每个网站上，事实上，它只是在谷歌工作。。。

"content_scripts": [{
...
  "matches": ["<all_urls>"],
  ...
  "js": [
    ...
    "shared/modalbox/modalbox.js",

this.box = $('<div>', {
    id: 'stylebot-modal'
}).append(html);

if (this.options.parent) {
    this.box.appendTo(this.options.parent);
}
else {
    this.box.appendTo(document.body);
}

this.box.css({
    height: this.options.height + '!important',
    width: this.options.width + ' !important',
    top: this.options.top + ' !important',
    left: this.options.left + ' !important'
});