如何使静态HTML作为Chrome扩展？ [英] How to make a static HTML as a chrome extension?

问题描述

我希望将Chrome扩展程序基本上构成为一直保留在用户窗口顶部的HTML栏（在激活它之后）。酒吧的位置将是喜欢的东西：

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

解决方案

我认为content_scripts是去这里的路。所以你实际上修改了页面的DOM来显示你的内容。你可以看看其他类似的扩展。

例如： StyleBot 。以下是他们如何将代码注入页面 ：

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

I want to make a Chrome extension basically constituted as a HTML bar staying at the top of the user window all the time (after he activates it). The bar position would be something "like" it:

My question is: how can I achieve this behavior? I thinked about adding it as "browser action"at the manifest, but it does not fits since it disappears when loses focus. I also tried to add it as a content script, "embracing" my HTML with simple JS command document.write(HTML line), but I can see no bar at all when I try it. How should I proceed?

解决方案

I think content_scripts is the way to go here. So you actually modify DOM of the page to display your content. You can look in other similar extensions.

For example: StyleBot. Here is how they inject code to the page:

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

And here is code of 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'
});

这篇关于如何使静态HTML作为Chrome扩展？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！