如何将静态HTML制作为Chrome扩展程序？

Question

我想将Chrome扩展程序基本上构成为一直停留在用户窗口顶部的HTML栏（在他激活之后）。酒吧的位置会“喜欢”它：

我的问题是：我怎样才能实现这种行为？我认为在清单中将其添加为“浏览器操作”，但它不适合，因为它在失去焦点时会消失。我还尝试将其添加为content script，使用简单的JS命令document.write(HTML line)“拥抱”我的HTML，但是当我尝试它时，我根本看不到任何条形码。我该怎么办？

Answer 1

我认为content_scripts是这里的方式。因此，您实际上修改了页面的DOM以显示您的内容。您可以查看其他类似的扩展程序。

例如：StyleBot。以下是他们inject code to the page：

的方式

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

以下是actual modal box的代码。

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'
});