如何使用 html 内容构建 300px 侧边栏并在 chrome 扩展中注入当前页面

Question

我希望我的 Chrome 扩展能够在激活时在任何页面的右侧注入 300 像素的侧边栏和数据。我正在寻找构建边栏及其 HTML 内容的最佳方式。我可以使用 contentscript.js 文件对当前页面做一些小改动，但我不知道如何构建整个 HTML 内容并将其显示为侧边栏。

我在内容脚本文件中使用以下代码构建了边栏：

sidebar = $("<div id='sidebar'></div>");

sidebar.css({
    'position': 'fixed',
    'right': '0px',
    'top': '0px',
    'z-index': 9999,
    'width': '290px',
    'height': '100%',
    'background-color': 'blue'  // Confirm it shows up
});

$('body').append(sidebar);

现在我的问题是如何为侧边栏构建 HTML 内容？

Answer 1

您可以注入一个 Javascript 代码来创建一个条形图示例，这个开发者 "Proper Menubar" 创建了这个。单击 enable/disable Google 网站顶部的菜单栏。 https://chrome.google.com/webstore/detail/proper-menubar/egclcjdpndeoioimlbbbmdhcaopnedkp

如何使用 html 内容构建 300px 侧边栏并在 chrome 扩展中注入当前页面

how to built 300px sidebar with html content and inject into current page in chrome extension

google-chrome-extension