Menu
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.
316
Click on the wrench icon located on the far right side of the Google Toolbar. The Toolbar Options window will display. Click on the tab labeled "Custom Buttons." The Custom Buttons tab contains a list of different websites you can add to the toolbar, then access by clicking on that particular button.
Turn on the Menu bar or Bookmarks toolbar , click More Tools… and choose Customize Toolbar…. Customize Toolbar…. Click the Toolbars dropdown menu at the bottom of the screen and choose the toolbars you want to display. Note: The Bookmarks Toolbar can be set to Always Show, Never Show, or Only Show on New Tab.
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.
chrome.infobars APIThis 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.
chrome.sidebar APIThere was a proposal in 2015 for a sidebar API, as an alternative to the chrome.infobars (described above). But this idea was rejected in 2016 in order to prioritize "Chrome’s core value of simplicity" (source).
It seems that there is no way to make an "advanced" tool bar in Chrome without placing it in the document window.
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:
<iframe> - explained later).Step 1 is easy, see my previous example or read the documentation of content scripts.
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.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); 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.
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.
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.
77
Chrome API doesn't have any toolbar widget to assist you. You would need to manually create and position a toolbar div on a page. You can do this by utilizing content scripts, which allow you to inject javascript and css to pages.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
