Rob*_*bin 24 google-chrome toolbar google-chrome-extension
我是第一次探索Google Chrome扩展程序.当您单击扩展图标时,我想创建在页面顶部显示为工具栏的内容,就像StumbleUpon工具栏一样.
我看不出怎么做.示例主要显示popup.html,而不是固定工具栏.
Rob*_*b W 45
虽然此答案显示了在Chrome中创建工具栏的两种方法,但我强烈建议您使用页面操作或浏览器操作徽章.这些不占用工具栏的空间,也可用于在单击时显示面板,甚至可以获得与页面交互的临时主机权限.
对于那些不需要工具栏但只需要侧边栏的人,有一个关于chrome.sidebarAPI的活跃提议.这只是一个提案,无论是否以及什么时候实施都尚未确定.
chrome.infobarsAPI本节用于显示使用chrome.infobarsAPI 的演示.此API从未进入稳定通道,将被删除 ; 不要使用它.
使用内容脚本创建工具栏非常棘手.您必须在页面中插入代码,甚至修改文档的结构,这可能会破坏Internet上的某些页面.
要使用内容脚本创建工具栏,必须执行以下步骤:
<iframe>- 稍后解释).第1步很简单,请参阅我之前的示例或阅读内容脚本的文档.
要最小化样式冲突,并阻止页面使用工具栏,请插入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转换,因为它相对容易使用,并且大多数页面都不在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(类似于内容脚本).
另一种选择是从服务器加载页面,然后在该特定页面上执行内容脚本.设置缓存清单以确保如果用户不在网络上,您的工具栏仍然可用.
| 归档时间： |
|
| 查看次数： |
42083 次 |
| 最近记录： |