<commit_before>---
layout: default-withsidebar
title: opr.sidebarAction
author: shwetankdixit
copyright: opera-ccby
---

		<div id="gc-container">
			<main id="gc-pagecontent" role="main">
				<article>
					<div itemprop="articleBody" class="api">
						<h2>Contents</h2>
						<table class="intro" id="intro">
							<tbody>
								<tr>
									<td class="title">Description:</td>
									<td> Add actions in the browser sidebar. In addition to its <a href="#icon">icon</a>, a sidebar action can also have a <a href="#tooltip">tooltip</a>, a <a href="#badge">badge</a>, and a <a href="#panel">panel</a>.
										<br> </td>
								</tr>
								<tr>
									<td class="title">Availability:</td>
									<td> For Opera 29 and onwards
										<br> </td>
								</tr>
								<tr>
									<td class="title">Manifest:</td>
									<td>
										<span class="code"> "sidebar_action": {...} </span>
										<br> </td>
								</tr>
							</tbody>
						</table>
						<section>
							<h2 id="ui">Terminology</h2>
							<p>There are some additional elements in the browser that we need to understand in the context of sidebar extensions. These are the <i>sidebar</i>, which consists of a <i>buttons list</i> on the left hand side (which contains the icons for sidebar extensions). Clicking on each icon will open up its corresponding <i>panel</i> on the right hand side of the sidebar.</p>
							<img src="static/images/sidebar-illustration.png" width="650">

							<h2 id="manifest">Manifest</h2>
							<p>These would be the changes in the manifest:</p>

							<pre data-filename="manifest.json">{
"name": "My extension",
...
<b>"sidebar_action": {
	"default_icon": "images/default_icon.png",           <em>// required</em>
	"default_title" : "My extension title" <em>// optional; shown in tooltip</em>
	"default_panel": "panel.html"        <em>// required</em>
	},</b>
...
} </pre>

							<h3 id="icon">Icon</h3>
							<p>
								You can set the icon in two ways: using a static image or using the HTML5 canvas element. Using static images is easier for simple applications, but you can create more dynamic UIs — such as smooth animation — using the canvas element. Static images can be in any format Blink can display, including BMP, GIF, ICO, JPEG, or PNG. For unpacked extensions, images must be in the PNG format.
							</p>

							<p>
								To set the icon, use the <b>default_icon</b> field of <b>sidebar_action</b> in the manifest, or call the <a href="#method-setIcon">sidebarAction.setIcon</a> method (especially, if you want to switch it and set alternative icon instead).
							</p>

							<h3 id="tooltip">Tooltip</h3>
							<p>
			 To set the tooltip, use the <b>default_title</b> field of <b>sidebar_action</b> in the <a href="#manifest">manifest</a>, or call the <a href="#method-setTitle">sidebarAction.setTitle</a> method. You can specify locale-specific strings for the <b>default_title</b> field; see <a href="tut_internationalization.html">Internationalization</a> for details.
			</p>

							<h3 id="badge">Badge (not supported yet)</h3>
							<p>sidebar actions can optionally display a
								<em>badge</em> — a bit of text that is layered over the icon. Badges make it easy to update the sidebar action to display a small amount of information about the state of the extension.</p>
							<p>Because the badge has limited space, it should have 4 characters or less. </p>
							<p> Set the text and color of the badge using <a href="#method-setBadgeText">sidebarAction.setBadgeText</a> and <a href="#method-setBadgeBackgroundColor">sidebarAction.setBadgeBackgroundColor</a>,
								respectively. </p>
							<h3 id="panel">Panel</h3>
							<p>If a sidebar action has a panel, it will appear when the user clicks the icon. The panel can contain any HTML content that you like, and it's automatically sized to fit the available width and height. </p>
							<p> To add a panel to your sidebar action, create an HTML file with the panel's contents. Specify the HTML file in the <b>default_panel</b> field of <b>sidebar_action</b> in the <a href="#manifest">manifest</a>, or call the <a href="#method-setPanel">sidebarAction.setPanel</a> method.</p>
						</section>
						<section id="toc"><commit_msg>Added additional wording for clarity<commit_after>---
layout: default-withsidebar
title: opr.sidebarAction
author: shwetankdixit
copyright: opera-ccby
---

		<div id="gc-container">
			<main id="gc-pagecontent" role="main">
				<article>
					<div itemprop="articleBody" class="api">
						<h2>Contents</h2>
						<table class="intro" id="intro">
							<tbody>
								<tr>
									<td class="title">Description:</td>
									<td> Add actions in the browser sidebar. In addition to its <a href="#icon">icon</a>, a sidebar action can also have a <a href="#tooltip">tooltip</a>, a <a href="#badge">badge</a>, and a <a href="#panel">panel</a>.
										<br> </td>
								</tr>
								<tr>
									<td class="title">Availability:</td>
									<td> For Opera 29 and onwards
										<br> </td>
								</tr>
								<tr>
									<td class="title">Manifest:</td>
									<td>
										<span class="code"> "sidebar_action": {...} </span>
										<br> </td>
								</tr>
							</tbody>
						</table>
						<section>
							<h2 id="ui">Terminology</h2>
							<p>There are some additional elements in the browser that we need to understand in the context of sidebar extensions. These are the <i>sidebar</i>, which consists of a <i>buttons list</i> on the left hand side (which contains the icons for sidebar extensions). Clicking on each icon will open up its corresponding <i>panel</i> on the right hand side of the sidebar.</p>
							<img src="static/images/sidebar-illustration.png" width="650">

							<h2 id="manifest">Manifest</h2>
							<p>These would be the changes in the manifest:</p>

							<pre data-filename="manifest.json">{
"name": "My extension",
...
<b>"sidebar_action": {
	"default_icon": "images/default_icon.png",           <em>// required</em>
	"default_title" : "My extension title" <em>// optional; shown in tooltip</em>
	"default_panel": "panel.html"        <em>// required</em>
	},</b>
...
} </pre>

							<h3 id="icon">Icon</h3>
							<p>
								You can set the icon in two ways: using a static image or using the HTML5 canvas element. Using static images is easier for simple applications, but you can create more dynamic UIs — such as smooth animation — using the canvas element. Static images can be in any format Blink can display, including BMP, GIF, ICO, JPEG, or PNG. For unpacked extensions, images must be in the PNG format.
							</p>

							<p>
								To set the icon, use the <b>default_icon</b> field of <b>sidebar_action</b> in the manifest, or call the <a href="#method-setIcon">sidebarAction.setIcon</a> method (especially, if you want to switch it and set alternative icon instead).
							</p>

							<h3 id="tooltip">Tooltip</h3>
							<p>
			 To set the tooltip, use the <b>default_title</b> field of <b>sidebar_action</b> in the <a href="#manifest">manifest</a>, or call the <a href="#method-setTitle">sidebarAction.setTitle</a> method. You can specify locale-specific strings for the <b>default_title</b> field; see <a href="tut_internationalization.html">Internationalization</a> for details.
			</p>

							<h3 id="badge">Badge (not supported yet)</h3>
							<p>sidebar actions can optionally display a
								<em>badge</em> — a bit of text that is layered over the icon. Badges make it easy to update the sidebar action to display a small amount of information about the state of the extension.</p>
							<p>Because the badge has limited space, it should have 4 characters or less. </p>
							<p> Set the text and color of the badge using <a href="#method-setBadgeText">sidebarAction.setBadgeText</a> and <a href="#method-setBadgeBackgroundColor">sidebarAction.setBadgeBackgroundColor</a>,
								respectively. </p>
							<h3 id="panel">Panel</h3>
							<p>If a sidebar action has a panel, it will appear when the user clicks the icon. The panel can contain any HTML content that you like, and it's automatically sized to fit the available width and height. It is recommended that developers make their panel pages fluid and responsive in order to look good in various widths.</p>
							<p> To add a panel to your sidebar action, create an HTML file with the panel's contents. Specify the HTML file in the <b>default_panel</b> field of <b>sidebar_action</b> in the <a href="#manifest">manifest</a>, or call the <a href="#method-setPanel">sidebarAction.setPanel</a> method.</p>
						</section>
						<section id="toc">
{'fraction_non_alphanumeric': 0.13113807047949164, 'fraction_numerical': 0.004852686308492201, 'mean_word_length': 3.1595386833253243, 'pattern_counts': {'":': 10, '<': 253, '<?xml version=': 0, '>': 253, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2926490', 'n_tokens_mistral': 3283, 'n_tokens_neox': 2539, 'n_words': 990}