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);
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;
}
});
});
4条答案
按热度按时间gj3fmq9x1#
虽然这个答案显示了在Chrome中创建工具栏的两种方法，但我强烈建议使用page action或browser action徽章。它们不像工具栏那样占用太多空间，也可以用来在点击时显示面板，甚至可以用get temporary host permissions来与页面交互。
chrome.infobarsAPI本节used to展示了一个使用
chrome.infobarsAPI的演示。本API从未去过稳定通道，will be removed;不要使用它。chrome.sidebarAPI2015年有一个关于侧边栏API的提议，作为
chrome.infobars的替代方案（如上所述）。但这个想法在2016年被拒绝，以优先考虑“Chrome的简单核心价值”（source）。似乎没有办法在Chrome中制作一个“高级”工具栏，而不把它放在文档窗口中。
内容脚本
使用内容脚本创建工具栏是很棘手的。您必须在页面中插入代码，甚至修改文档的结构，这可能会破坏Internet上的某些页面。
要使用内容脚本创建工具栏，必须执行以下步骤：
1.在页面上执行内容脚本，它将运行接下来的两个步骤。
1.插入工具栏（
<iframe>-稍后解释）。1.移动页面内容。
第1步很简单，请参阅我前面的示例或阅读content scripts的文档。
第二步：插入工具栏
若要最大限度地减少样式冲突，并防止页面使用您的工具栏，请插入一个iframe。与前面的方法不同，您不能直接访问扩展API（因为嵌入的页面既不是内容脚本，也不是扩展进程中运行的页面）。
插入工具栏：
add-toolbar.js（内容脚本）现在创建一个名为
toolbar.html的文件，并将其添加到清单文件的"web_accessible_resources"部分。这个文件将在工具栏的位置使用，请随意使用它做任何非邪恶的事情。请记住，它的行为就像一个普通的网页，它实际上没有访问任何Chrome API。第三步：移动内容
到目前为止，您只向页面添加了一个框架。有一个问题：页面上的内容部分隐藏。这可不太好有几种方法可以解决这个问题，我选择使用CSS transforms，因为它相对容易使用，而且大多数页面都不会在body元素上使用此属性。
translateY导致主体下移，包括那些带有position:fixed的子元素。因为我们已经将iframe附加到了根元素的<body>标记之外，所以该元素不受影响。我想使用工具栏的扩展接口！
不幸的是，Chrome将嵌入的html页面视为非特权扩展页面。您只能使用某些扩展API（类似于内容脚本）。
另一种选择是从服务器加载页面，然后在该特定页面上执行内容脚本。设置一个Cache manifest，以确保在用户不在网络上时工具栏仍然可用。
uyhoqukh2#
Chrome API没有任何工具栏小部件来帮助您。您需要手动创建工具栏div并将其放置在页面上。你可以通过使用content scripts来做到这一点，它允许你将javascript和css注入页面。
lymnna713#
这给了你一个偶然发现的浏览器扩展，可以在各种浏览器上使用，当然如果你愿意，你也可以将下载限制在chrome上。
安装人员
常规安装页（如果您使用的是Windows，则提供可签名的可执行文件，以简化安装过程）：
http://crossrider.com/apps/35180/install_page
具体安装：
Crossrider也使得发布到chrome商店变得很容易，并且提供了一种简单的方法来为windows上的可执行文件下载签署你的扩展。
信息
以下是API的文档，对于跨浏览器解决方案来说，它相当广泛：
http://docs.crossrider.com/
在下面的代码中，我没有使用html和css，因为答案的字符数是有限制的。但是，如果看起来不错，你可以打开它（crx是zip，只是重命名扩展名为.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:
background.js:
备注
还要注意的是，jQuery在扩展范围内是自动可用的，所以你可以免费获得它和API。而且，如果你想注入一个iframe，一定不要忘记在设置中启用iframe。
对于社区支持站点：https://getsatisfaction.com/crossrider
他们是非常敏感的，可以帮助你，当你遇到麻烦。
e7arh2l64#
iframe可以被限制，但被允许发送消息。因此，有一种方法可以将扩展API与iframe结合使用。第一步向后端发送消息（Manifest V3中的Service Worker）。然后将消息发送回所有选项卡（如果没有侦听器等，请使用try catch）。这也会将消息发送到add-Toolbar.js和您的iframe。（所以我在消息中有一个resipiend id）在add-Toolbar.js中处理消息并在那里进行API调用。由于add-Toolbar.js在正常范围内，因此这是允许的。如果你想在iframe中处理一个响应，只需通过后端将其发送回iframe。