我第一次探索Google Chrome扩展程序。当您单击扩展图标时，我想创建在页面顶部显示为工具栏的内容，就像StumbleUpon工具栏一样。
我看不出怎么做。这些示例主要显示popup.html，而不是固定的工具栏。
答案 0 :(得分：44)
虽然此答案显示了在Chrome中创建工具栏的两种方法，但我强烈建议您使用page action或browser action徽章。这些不占用工具栏的空间，也可用于在点击时显示面板，甚至可以get temporary host permissions与页面进行交互。
对于那些不需要工具栏但只需要侧边栏的人，有一个活跃的proposal for a chrome.sidebar API。这只是一个提案，无论是否以及何时实施都尚未确定。
chrome.infobars API 本部分used to显示了使用chrome.infobars API的演示。此API从未进入稳定通道，will be removed;不要使用它。
使用内容脚本创建工具栏非常棘手。您必须在页面中插入代码，甚至修改文档的结构，这可能会破坏互联网上的某些页面。
要使用内容脚本创建工具栏，必须执行以下步骤：
<iframe> - 稍后解释）。第1步很简单，请参阅我之前的示例或阅读content scripts的文档。
要最小化样式冲突，并阻止页面使用工具栏，请插入iframe。与以前的方法不同，您不能直接访问扩展API（因为嵌入的页面既不是内容脚本，也不是扩展程序中运行的页面）。
插入工具栏：
add-toolbar.js（内容脚本）var height = '40px';
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.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"部分。这个文件将在工具栏的位置使用，随意做任何非邪恶的事情。请记住，它就像一个普通的网页，它实际上无法访问任何Chrome API。
到目前为止，您只在页面中添加了一个框架。有一个问题：页面上的内容部分隐藏。那不是很好。有几种方法可以解决这个问题，我选择使用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>标记之外的根元素，所以该元素不会受到影响。
不幸的是，Chrome将嵌入式html页面视为非特权扩展页面。您只能使用某些扩展API（类似于内容脚本）。
另一种选择是从服务器加载页面，然后在该特定页面上执行内容脚本。设置Cache manifest以确保如果用户不在网络上，您的工具栏仍然可用。
答案 1 :(得分：3)
Chrome API没有任何工具栏小部件可以帮助您。您需要在页面上手动创建和定位工具栏div。您可以使用content scripts来执行此操作，这允许您将javascript和css注入页面。
答案 2 :(得分：0)
这为您提供了适用于各种浏览器的绊倒式浏览器扩展程序，但如果您愿意，可以将下载限制为仅限Chrome。
<强>安装程序
常规安装页面（提供可执行文件，如果您在Windows上可以签名以简化安装过程）：
http://crossrider.com/apps/35180/install_page
具体安装：
Crossrider也可以轻松发布到Chrome商店，并提供了一种在Windows上为可执行文件下载扩展名的简便方法。
<强>信息
以下是API的文档，对于跨浏览器解决方案而言非常广泛：
在下面的代码中，我没有把html＆amp; css因为答案的字符数有限制。但是，如果看起来不错，你可以打开它（crx是拉链，只是将扩展名重命名为.zip）来获取内部的css和html，或者我们可以找到一种方法让我发送给你。请注意，我正在将HTML和CSS注入页面。
我通常编写css和html，然后缩小（http://cssminifier.com/和http://www.willpeavy.com/minifier/），然后我采用缩小的输出，我使用像http://www.htmlescape.net/stringescape_tool.html这样的字符串转义工具来逃避它因此，它可以被放入扩展代码中，因为您希望它尽可能快，因为它是一个扩展，当然不是一个网页。
所以，如果这看起来不错，请访问crossrider.com，设置一个帐户（它是100％免费的），并将这些文件粘贴到适当的位置，并放入您需要的缩小/转义HTML和CSS，替换下面的extension.js中的cssstr和htmlstr中的内容。
<强>代码
extension.js：
appAPI.ready(function($) {
// Place your code here (you can also define new functions above this scope)
// The $ object is the extension's jQuery object
// Adds a listener that handle incoming messages
var lid = appAPI.message.addListener(function(msg) {
switch(msg.action) {
case 'SHOWEXAMPLEBAR':
$('#examplebar-toolbar').show();
break;
case 'HIDEEXAMPLEBAR':
$('#examplebar-toolbar').hide();
break;
default:
break;
}
});
// Add toolbar (not included here due to size - be sure it is escaped)
var cssstr = '/* The CSS of your toolbar */';
// Add toolbar HTML (not included here due to size - be sure it is escaped)
var htmlstr = '\x3C!-- the html of your toolbar --\x3E';
$('\x3Cstyle\x3E'+cssstr+'\x3C/style\x3E' + htmlstr).prependTo('body');
$('#examplebar-close').click(function() {
//Tell the background to change its buttonstate:
$('#examplebar-toolbar').hide();
appAPI.message.toBackground({action: "HIDEEXAMPLEBAR"});
});
});
background.js：
// Note: the $ variable that represents the jQuery object is not available
// in the background scope
appAPI.ready(function() {
// Global variable to hold the toggle state of the button
var buttonState = true;
// Sets the initial browser icon
appAPI.browserAction.setResourceIcon('button.png');
// Sets the tooltip for the button
appAPI.browserAction.setTitle('Bar');
// Sets the text and background color for the button
if (appAPI.browser.name !== 'safari') {
appAPI.browserAction.setBadgeText('bar');
appAPI.browserAction.setBadgeBackgroundColor([255,0,0,50]);
}else{
// Safari only supports numeric characters
// and has a fixed background color
appAPI.browserAction.setBadgeText('1234');
}
// Sets the initial onClick event handler for the button
appAPI.browserAction.onClick(function(){
if (buttonState) {
//Hide the toolbar by notifying the extension code:
appAPI.message.toAllTabs({action: "HIDEEXAMPLEBAR"});
if (appAPI.browser.name !== 'safari') {
// Sets the text and background color for the button
// using the optional background parameter
appAPI.browserAction.setBadgeText('helo', [0,0,255,255]);
// Sets the icon to use for the button.
appAPI.browserAction.setResourceIcon('button.png');
} else {
// Safari only supports numeric characters,
// has a fixed background color,
// and can only use the extension's icon
appAPI.browserAction.setBadgeText('4321');
}
} else {
appAPI.message.toAllTabs({action: "SHOWEXAMPLEBAR"});
// Remove the badge from the button
appAPI.browserAction.removeBadge();
if (appAPI.browser.name !== 'safari'){
// Reset the icon for the image
appAPI.browserAction.setResourceIcon('button.png');
}
}
// Toggle the state
buttonState = !buttonState;
});
// Adds a listener that handle incoming messages
var lid = appAPI.message.addListener(function(msg) {
switch (msg.action) {
case 'HIDEEXAMPLEBAR':
buttonState = !buttonState;
break;
default:
break;
}
});
});
备注
另请注意，jQuery在扩展范围内自动可用，因此您可以免费获得该API以及API。而且，如果您想要注入iframe，请务必不要忘记在设置中启用iframe。
对于社区支持网站：https://getsatisfaction.com/crossrider
他们非常敏感，可以在遇到麻烦时帮助你。