> ## Content Index
> Fetch the complete content index at: https://www.ctrl.blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# Boilerplate for the new Opera sidebar extensions
- URL: https://www.ctrl.blog/entry/opera-sidebar-extensions/
- Published: 2015-03-05T22:41:00.000Z
- Updated: 2026-08-23T22:15:08.000Z
- Description: Learn how to quickly make an Opera sidebar extension using this simple demo extension that showcases how it’s done.
- Author: Daniel Aleksandersen
- Tags: Browser 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](https://dev.opera.com/extensions/sidebar-action-api/?ref=ctrl.blog) 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](https://dev.opera.com/extensions/browser-actions/?ref=ctrl.blog), 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](https://github.com/da2x/opera-extension-sidebar-boilerplate?ref=ctrl.blog).

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](https://github.com/da2x/opera-extension-sidebar-boilerplate?ref=ctrl.blog)
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](https://addons.opera.com/developer/?ref=ctrl.blog) 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’ve such security needs for your webapp and extension.

#### Sources

- [RFC 7034: HTTP Header Field X-Frame-Options](https://www.rfc-editor.org/rfc/rfc7034.html?ref=ctrl.blog), 2013-10, Internet Engineering Task Force
- [Opera Sidebar Action API](https://dev.opera.com/extensions/sidebar-action-api/?ref=ctrl.blog), Dev.Opera, Opera Software