如何将静态 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'
});