如何在Google Chrome中制作工具栏？ [英] How to make a toolbar in Google Chrome?

问题描述

我正在第一次探索Google Chrome扩展程序。我想在单击扩展图标时在页面顶部创建显示为工具栏的内容，与StumbleUpon工具栏非常相似。

我无法看到去做这个。这个例子主要显示了一个popup.html，而不是一个固定的工具栏。

解决方案

虽然这个答案显示了两种方式要在Chrome中创建工具栏，我强烈建议使用页面操作或浏览器操作徽章。这些工具栏不占用太多空间，并且还可用于在点击时显示面板，甚至可以获得临时主机权限 a>与页面进行交互。

对于那些并不需要工具栏，但是有侧边栏的用户，有一个活动的针对 chrome.sidebar API的建议。这只是一个建议，不论是何时实施都还没有成熟。

chrome.infobars API

本节用于显示使用示例 chrome.infobars API。此API从未进入稳定频道，将被删除;不要使用它。

内容脚本

使用内容脚本创建工具栏非常棘手。您必须在页面中插入代码，甚至修改文档的结构，这可能会打破互联网上的某些页面。

要使用内容脚本创建工具栏，必须采取以下步骤：

1. 在运行接下来的两个步骤的页面上执行内容脚本。


2. 插入工具栏（< iframe> - 稍后解释）。
   
3. 移动页面内容。 / li>
   

第1步很简单，请参阅前面的示例或阅读内容脚本。

步骤2：插入工具栏

尽量减少样式冲突，并防止页面使用工具栏，插入iframe。与以前的方法不同，您不能直接访问扩展API（因为嵌入式页面既不是内容脚本，也不是扩展程序的进程中运行的页面）。

插入工具栏：
$ b

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'; //一些高价值的
//等等如果你想要
document.documentElement.appendChild（iframe）;


现在创建一个名为 toolbar.html 并将其添加到您的 web_accessible_resources 部分清单文件。这个文件将在工具栏的位置使用，随时做任何非邪恶的事情。请记住，它像一个普通的网页，它实际上无法访问任何Chrome API。

第3步：移动内容

到目前为止，您只向页面添加了一个框架。有一个问题：页面上的内容部分隐藏。这不是很好。有几种方法可以解决这个问题，我选择使用 CSS转换，因为它相对比较易于使用，并且大多数网页不会在body元素上使用此属性。 $ b

  / /继续add-toolbar.js 
 var bodyStyle = document.body.style; 
 var cssTransform ='transform'in bodyStyle？ '变换'：'webkitTransform'; 
 bodyStyle [cssTransform] ='translateY（'+ height +'）'; 
  

translateY 会导致主体向下移动，包括那些位置：fixed 的子元素。由于我们已将iframe附加到< body> 标记之外的根元素，因此元素不受影响。

我想在工具栏中使用扩展API！

不幸的是，Chrome会将嵌入式html页面视为非特权扩展页面。您只能使用一些扩展API（类似于内容脚本）。

另一个选项是从您的服务器加载一个页面，然后针对该特定项目执行一个内容脚本页。设置一个缓存清单，以确保您的工具栏仍然可用，如果用户不是' t在网络上。

I'm exploring Google Chrome extensions for the first time. I would like to create what appears as a toolbar along the top of the page when you click the extension icon, much like the StumbleUpon toolbar.

I can't see how to do this. The examples mainly show a popup.html, and not a fixed toolbar.

解决方案

Although this answer shows two ways to create a toolbar in Chrome, I strongly recommend using page action or browser action badges. These do not take as much space as toolbars, and can also be used to show a panel on click, and even get temporary host permissions to interact with the page.

And for those who do not really need a toolbar, but a sidebar, there is an active proposal for a chrome.sidebar API. This is just a proposal, whether and when it will be implemented is not set in stone yet.

The chrome.infobars API

This section used to show a demo using the chrome.infobars API. This API has never been to the stable channel, and will be removed; do not use it.

Content scripts

Creation of toolbars using content scripts is tricky. You have to insert code in the page, and even modify the structure of the document, which could break some pages on the internet.

To create a toolbar using content scripts, the following steps have to be taken:

1. Execute a content script on the page which runs the next two steps.
2. Insert the toolbar (<iframe> - explained later).
3. Shift the content of the page.

Step 1 is easy, see my previous example or read the documentation of content scripts.

Step 2: Insert the toolbar

To minimize styling conflicts, and to prevent the page from using your toolbar, insert an iframe. Unlike the previous method, you do not directly have access to the extension API (because the embedded page is neither a content script, nor a page running in the extension's process).

Inserting the toolbar:

add-toolbar.js (content script)

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);

Now create a file called toolbar.html and add it to the "web_accessible_resources" section of your manifest file. This file is going to used at the spot of the toolbar, feel free to do anything non-evil with it. Just keep in mind that it acts like a normal web page, it literally does not have access to any of the Chrome APIs.

Step 3: Shifting the content

So far, you've only added a frame to the page. There's one problem: The content on the page is partially hidden. That is not very nice. There are several ways to fix this, I choose to use CSS transforms, because it's relatively easy to use, and most pages don't use this property on the body element.

// continuing add-toolbar.js
var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';

translateY causes the body to shift down, including those child elements with position:fixed. Because we've appended the iframe to the root element, outside the <body> tag, the element is not affected.

I want to use extension APIs in the toolbar!

Unfortunately, Chrome treats the embedded html page as a non-privileged extension page. You can only use some of the extension APIs (similar to content scripts).

Another option is to load a page from your server, then execute a content script on that specific page. Set up a Cache manifest to ensure that your toolbar is still available if the user isn't on a network.

这篇关于如何在Google Chrome中制作工具栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！