Get a head start with sidebar extension development for Opera. Turn any webapp into a sidebar extension for Opera in minutes with this easy to configure template.
opr.sidebarAction is a new extension to the Chromium extension application programming interfaces (API). Its available in Opera developer preview and will become available in Opera beta and stable in the coming months.
A sidebar extension is an extension that adds a new button to the sidebar (a new toolbar to the left in the browser.) Sidebar extensions opens a panel between them and the main web view. Allowing users to keep helpful extensions open alongside what they are doing on the web. Unlike chrome.browserAction popouts, the panel remains open when the user moves focus away from it.
If you are anything like me you’re thinking “Yey! A panel extension! My responsive web app would fit as snugly in a panel as it already does on mobile!” —and you’d be right about that. To get you going quickly with your new-found extension ambitions, you can use the Opera sidebar extension boilerplate.
The boilerplate is a complete sidebar extension. You only need to edit one file plus some icon resource files to have a completely functional sidebar extension from an existing webapp. The same performance concerns for mobile websites apply to panel extensions. Don’t make your users wait, and cache as much as possible.
- Download the boilerplate
- Customize the extension’s name, description, and your webapp or website’s URL in
_locales/en/messages.js - Customize all the
icons/*.png(square icons sized to match their filenames) - Drag
manifest.jsoninto the Extension Manager in Opera to test install - Zip it all up and upload to
addons.opera.comfor users to download and enjoy
You can make your extension available in multiple languages by copying the _locales/en/. The URL can be localized, or it can be omitted from translations to fallback to the English variant.
Keep in mind that this only offers you a single iframe to work with. Some web services send a restrictive HTTP X-Frame-Options header and prevent you from loading them in an iframe. A custom solution will be required if you’ve such security needs for your webapp and extension.