Opera sidepanel example extension

Boilerplate for the new Opera sidebar extensions

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 APIs. Its available in Opera developer 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 snuggly in a panel as it already does on mobile!” —and you’d be right about that. To get you going quickly with your newfound 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.

  1. Download the boilerplate
  2. Customize the extension’s name, description, and your webapp or website’s URL in _locales/en/messages.js
  3. Customize all the icons/*.png (square icons sized to match their filenames)
  4. Drag manifest.json into the Extension Manager in Opera to test install
  5. Zip it all up and upload to addons.opera.com for 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 have such security needs for your webapp and extension.

I’ve made an extension for TollSjekk.no if you’re interesting in an example made using this boilerplate.

Leave a Reply

Your email address will not be published. Be courteous and on-topic. Comments are moderated prior to publication.