我是第一次探索 Google Chrome 扩展。当您单击扩展程序图标时，我想创建在页面顶部显示为工具栏的东西，就像 StumbleUpon 工具栏一样。
我看不出该怎么做。这些示例主要显示了一个 popup.html，而不是一个固定的工具栏。
请您参考如下方法:
尽管此答案显示了在 Chrome 中创建工具栏的两种方法，但我强烈建议使用 page action或 browser action徽章。它们不像工具栏那样占用空间，也可以用来在点击时显示面板，甚至是get temporary host permissions与页面交互。chrome.infobars API
本栏目used to使用 chrome.infobars 进行演示API。这个API从来没有上过稳定 channel ，will be removed ;不要使用它。chrome.sidebar API
2015 年有一个关于侧边栏 API 的提案，作为 chrome.infobars 的替代方案。 (如上所述)。但这个想法在 2016 年被否决，以优先考虑“Chrome 的简单核心值(value)”(source)。
似乎没有办法在Chrome中制作“高级”工具栏而不将其放置在文档窗口中。
内容脚本
使用内容脚本创建工具栏很棘手。您必须在页面中插入代码，甚至修改文档的结构，这可能会破坏 Internet 上的某些页面。
要使用内容脚本创建工具栏，必须执行以下步骤:
<iframe> - 稍后解释)。 第 1 步很简单，请参阅我之前的示例或阅读 content scripts 的文档.
第 2 步:插入工具栏
要最大限度地减少样式冲突并防止页面使用您的工具栏，请插入 iframe。与前一种方法不同，您不能直接访问扩展 API(因为嵌入页面既不是内容脚本，也不是在扩展进程中运行的页面)。
插入工具栏:
add-toolbar.js (内容脚本)
var height = '40px';
var iframe = document.createElement('iframe');
iframe.src = chrome.runtime.getURL('toolbar.html');
iframe.style.height = height;
iframe.style.width = '100%';
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.zIndex = '938089'; // Some high value
// Etc. Add your own styles if you want to
document.documentElement.appendChild(iframe);
toolbar.html 的文件并将其添加到
"web_accessible_resources" list 文件的部分。该文件将在工具栏的位置使用，请随意使用它做任何非邪恶的事情。请记住，它就像一个普通的网页，实际上它无法访问任何 Chrome API。
第 3 步:转移内容
到目前为止，您只向页面添加了一个框架。存在一个问题:页面上的内容被部分隐藏。那不是很好。有几种方法可以解决这个问题，我选择使用 CSS transforms , 因为它比较好用，而且大部分页面不会在 body 元素上使用这个属性。
// continuing add-toolbar.js
var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';
translateY导致正文向下移动，包括带有
position:fixed 的子元素.因为我们已经将 iframe 附加到根元素，在
<body> 之外。标签，元素不受影响。
我想在工具栏中使用扩展 API!
不幸的是，Chrome 将嵌入的 html 页面视为非特权扩展页面。您只能使用某些扩展 API(类似于内容脚本)。
另一种选择是从您的服务器加载页面，然后在该特定页面上执行内容脚本。设置 Cache manifest确保您的工具栏在用户不在网络上时仍然可用。
