{"id":526,"date":"2023-05-06T11:04:18","date_gmt":"2023-05-06T10:04:18","guid":{"rendered":"https:\/\/www.stefanvd.net\/blog\/?p=526"},"modified":"2024-04-28T13:58:53","modified_gmt":"2024-04-28T12:58:53","slug":"how-to-create-a-sidebar-chrome-extension-mv3","status":"publish","type":"post","link":"https:\/\/www.stefanvd.net\/blog\/2023\/05\/06\/how-to-create-a-sidebar-chrome-extension-mv3\/","title":{"rendered":"How to Create Your First New Sidebar Chrome Extension MV3 for Beginner"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><p>Table of Contents<\/p><nav><ul><li><a href=\"#introduction\">Introduction<\/a><ul><li><a href=\"#installing-the-necessary-tools\">Installing the Necessary Tools<\/a><ul><li><a href=\"#what-is-google-chrome-canary\">What is Google Chrome Canary?<\/a><\/li><li><a href=\"#what-is-visual-studio-code\">What is Visual Studio Code?<\/a><\/li><\/ul><\/li><li><a href=\"#api-name-crisis\">API Name crisis<\/a><ul><li><a href=\"#opera\">Opera<\/a><\/li><li><a href=\"#naver-whale\">Naver whale<\/a><\/li><li><a href=\"#firefox\">Firefox<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#create-the-first-chrome-extension\">Create the first Chrome extension<\/a><ul><li><a href=\"#step-1-manifest-changes\">Step 1 &#8211; Manifest Changes<\/a><ul><li><a href=\"#definitions\">Definitions:<\/a><\/li><li><a href=\"#how-to-open-the-side-panel-on-the-button-click-in-your-toolbar\">How to open the side panel on the button click in your toolbar<\/a><\/li><\/ul><\/li><li><a href=\"#step-2-html-code\">Step 2 &#8211; HTML code<\/a><\/li><li><a href=\"#step-3-loading-debugging\">Step 3 &#8211; Loading &amp; Debugging<\/a><ul><li><a href=\"#loading\">Loading<\/a><\/li><li><a href=\"#debugging\">Debugging<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#overview-open-source-sample-code\">Overview Open-Source sample code<\/a><\/li><li><a href=\"#addition-resource\">Addition resource<\/a><\/li><li><a href=\"#final-remarks\">Final remarks<\/a><\/li><li><a href=\"#faq-about-manifest-v-3\">FAQ about Manifest V3<\/a><ul><li><a href=\"#faq-question-1682708571513\">Can I use the side panel code in the Manifest V2 version?<\/a><\/li><li><a href=\"#faq-question-1682708597853\">Can I change the side panel to the left side in Chrome?<\/a><\/li><li><a href=\"#faq-question-1682708589111\">Will this work in the Microsoft Edge web browser?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Today is the day you can create a sidebar Chrome extension using Chrome Canary 114.0.5735.0 or higher. Since that Chrome web browser version, it will &#8220;<em>Enable extension side panel for stable<\/em>&#8221; according to <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=1378048\" target=\"_blank\" rel=\"noreferrer noopener\">the Chromium public bug report 1378048<\/a>. So that means that starting from 25 April 2023 you can create a sidebar Chrome extension. Thereby the first official Note Sidebar Chrome extension is now publicly available online and can be downloaded from the Chrome Web Store.<\/p>\n\n\n\n<p>In this article, I will explain the differences between other web browsers as well as how you can <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/note-sidebar\/emiochiflnnegkecnjndifbobmbepdne\" target=\"_blank\" rel=\"noreferrer noopener\">create your first Note Sidebar Chrome extension<\/a>. That provides you with the necessary information for beginner developers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"introduction\">Introduction<\/h2>\n\n\n\n<p>Before we begin, let us first define what is a sidebar Chrome extension. A sidebar Chrome extension is a small page that appears on the side of the browser window, providing users with quick access to specific functions and information. Sidebar Chrome extensions are a popular way for developers to add functionality to their web browsers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"598\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidebar-chrome-extension-manifest-v3-1024x598.png\" alt=\"Right Sidebar Chrome extension Manifest V3\" class=\"wp-image-1028\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidebar-chrome-extension-manifest-v3-1024x598.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidebar-chrome-extension-manifest-v3-300x175.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidebar-chrome-extension-manifest-v3-768x449.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidebar-chrome-extension-manifest-v3-1536x897.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidebar-chrome-extension-manifest-v3-2048x1196.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Right Sidebar Chrome extension Manifest V3<\/figcaption><\/figure>\n\n\n\n<p>Note: If you are using the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/note-sidebar\/emiochiflnnegkecnjndifbobmbepdne\" target=\"_blank\" rel=\"noreferrer noopener\">Note Sidebar Chrome extension<\/a>, you may encounter an issue where the panel does not open when you click on the icon. This may happen with the published Chrome extension and not in the unpacked developer mode version, especially if you are using a Canary web browser version. To access the note sidebar, click on the Chrome sidebar icon and select &#8220;Note Sidebar&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"956\" height=\"632\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/05\/chrome-sidebar-icon-open-page.png\" alt=\"Note Sidebar from the Chrome side panel menu item\" class=\"wp-image-1072\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/05\/chrome-sidebar-icon-open-page.png 956w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/05\/chrome-sidebar-icon-open-page-300x198.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/05\/chrome-sidebar-icon-open-page-768x508.png 768w\" sizes=\"(max-width: 956px) 100vw, 956px\" \/><figcaption class=\"wp-element-caption\">Note Sidebar from the Chrome side panel menu item<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"installing-the-necessary-tools\">Installing the Necessary Tools<\/h3>\n\n\n\n<p>To develop a sidebar Chrome extension, you will need the following tools:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Google Chrome Browser (Canary 114.0.5735.0 or higher)<\/li>\n\n\n\n<li>Visual Studio Code<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-google-chrome-canary\">What is Google Chrome Canary?<\/h4>\n\n\n\n<p>Google Chrome Canary is a version of the Google Chrome web browser that is used for testing and development purposes. It is the most cutting-edge version of the Chrome browser, where new features and updates are introduced and tested before they are added to the stable version of Google Chrome. Chrome Canary is released daily and is more prone to bugs and instability than the stable version, but it offers developers the ability to test their websites or extensions with the latest features and technologies. It is recommended for advanced users, developers, and testers who want to stay ahead of the curve and test the newest Chrome features before they become available to the general public.<\/p>\n\n\n\n<p>You can <a href=\"https:\/\/www.google.com\/chrome\/canary\/\" target=\"_blank\" rel=\"noreferrer noopener\">download Google Chrome Canary<\/a> from the Google website, and you can keep both the stable and test web browsers. They have their own profiles, so they will not conflict.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-is-visual-studio-code\">What is Visual Studio Code?<\/h4>\n\n\n\n<p>Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft that can be used on Windows, Linux, and macOS operating systems. It provides developers with a highly customizable, lightweight, and efficient platform for writing, testing, and debugging code in a variety of programming languages, including JavaScript, Python, Java, C++, and many others.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"api-name-crisis\">API Name crisis<\/h3>\n\n\n\n<p>Alignment with other web browser vendors was an issue, particularly with regards to API naming. The Google team referred to the sidebar API feature as &#8220;side_panel&#8221; in Chrome extensions, rather than &#8220;sidebar_action&#8221;. To these two statements.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>That it disambiguates an API from other similar APIs in different browsers. The method signatures and capabilities of these are noticeably distinct from one another.<\/li>\n\n\n\n<li>The terminology used is already used in Chromium for a UI surface<\/li>\n<\/ul>\n\n\n\n<p>Here is a list of names used by various web browsers for this feature:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Web browser<\/td><td>Manifest<\/td><td>Permission needed<\/td><\/tr><tr><td>Google Chrome<\/td><td>&#8220;side_panel&#8221;<\/td><td>&#8220;sidePanel&#8221;<\/td><\/tr><tr><td>Opera<\/td><td>&#8220;sidebar_action&#8221;<\/td><td>&#8211;<\/td><\/tr><tr><td>Naver Whale<\/td><td>&#8220;sidebar_action&#8221;<\/td><td>&#8211;<\/td><\/tr><tr><td>Firefox<\/td><td>&#8220;sidebar_action&#8221;<\/td><td>&#8211;<\/td><\/tr><tr><td>Microsoft Edge<\/td><td>&#8211;<\/td><td>&#8211;<\/td><\/tr><tr><td>Safari<\/td><td>&#8211;<\/td><td>&#8211;<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Overview of all the sidebar web browser APIs<\/figcaption><\/figure>\n\n\n\n<p>Some web browsers require permission while others do not, which causes a misalignment. Therefore, I encourage all web browsers to use the same API, and I have also created an issue on the W3 page as a member of the <a href=\"https:\/\/github.com\/w3c\/webextensions\" target=\"_blank\" rel=\"noreferrer noopener\">W3 extension community<\/a>. You can see the <a href=\"https:\/\/github.com\/w3c\/webextensions\/issues\/387\" target=\"_blank\" rel=\"noreferrer noopener\">report W3 extension issue 387 on this page<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"opera\">Opera<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\"sidebar_action\": {\n    \"default_icon\": {\n      \"16\": \"images\/icon16.png\",\n      \"32\": \"images\/icon32.png\"\n    },\n    \"default_title\": \"__MSG_name__\",\n    \"default_panel\": \"panel.html\"\n  },\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"naver-whale\">Naver whale<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\"sidebar_action\": {\n    \"default_icon\": {\n      \"16\": \"images\/icon16.png\",\n      \"32\": \"images\/icon32.png\"\n    },\n    \"default_title\": \"__MSG_name__\",\n    \"default_panel\": \"panel.html\",\n    \"open_at_install\":true\n  },<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"firefox\">Firefox<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code> \"sidebar_action\": {\n    \"default_icon\": {\n      \"16\": \"images\/icon16.png\",\n      \"32\": \"images\/icon32.png\"\n    },\n    \"default_title\": \"__MSG_name__\",\n    \"default_panel\": \"panel.html\",\n    \"open_at_install\":true\n  },<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-the-first-chrome-extension\">Create the first Chrome extension<\/h2>\n\n\n\n<p>Let us know how to create our very first side panel Chrome extension, which can be explained in three steps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-manifest-changes\">Step 1 &#8211; Manifest Changes<\/h3>\n\n\n\n<p>Creating this Chrome extension is the same way as when you create your first Chrome extension with a button, just with a different key name than the <a href=\"https:\/\/developer.chrome.com\/docs\/extensions\/reference\/action\/#injecting-a-content-script-on-click\" target=\"_blank\" rel=\"noreferrer noopener\">&#8220;action&#8221; button<\/a>. Here the &#8220;action&#8221; key will be used to show the tooltip name and the &#8220;side_panel&#8221; for the panel path.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"action\": {\n    \"default_title\": \"Click to open panel\"\n},\nside_panel\": {\n    \"default_path\": \"panel.html\"\n},<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"definitions\">Definitions:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>default_icon: The default is the icon that will show up in the toolbar (only for Firefox, Opera, and Naver Whale)<\/li>\n\n\n\n<li>default_title: The tooltip title that shows up when you move your cursor on top of the extension icon  <\/li>\n\n\n\n<li>default_path: The path to open that page in the side panel of your Chrome web browser<\/li>\n<\/ul>\n\n\n\n<p>And at last, on the <em>manifest.json<\/em> file in the permission section add &#8220;sidePanel&#8221;. That is needed to allow to show this side panel content on the right side of your web browser.<\/p>\n\n\n\n<p>Here is the complete code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"manifest_version\": 3,\n  \"name\": \"__MSG_name__\",\n  \"description\": \"__MSG_description__\",\n  \"version\": \"1.0\",\n  \"background\": {\n    \"service_worker\": \"scripts\/background.js\"\n  },\n  \"icons\": {\n    \"16\": \"images\/icon16.png\",\n    \"24\": \"images\/icon24.png\",\n    \"32\": \"images\/icon32.png\",\n    \"48\": \"images\/icon48.png\",\n    \"96\": \"images\/icon96.png\",\n    \"128\": \"images\/icon128.png\"\n  },\n  \"default_locale\": \"en\",\n  \"action\": {\n    \"default_title\": \"Click to open my note\"\n  },\n  \"side_panel\": {\n    \"default_path\": \"panel.html\"\n  },\n  \"options_ui\": {\n    \"page\": \"options.html\",\n    \"open_in_tab\": true\n  },\n  \"offline_enabled\": true,\n  \"permissions\": &#91;\"contextMenus\", \"storage\", \"sidePanel\"]\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"how-to-open-the-side-panel-on-the-button-click-in-your-toolbar\">How to open the side panel on the button click in your toolbar<\/h4>\n\n\n\n<p>By default, the Chrome extension will not open the side panel when you click on the extension icon in your Chrome toolbar. However, there are two ways to enable this option. That is through the <em>manifest.json<\/em> file and programmatically in the JavaScript background service workers.<\/p>\n\n\n\n<p>Here is how to set it in the <em>manifest.json<\/em> code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  \"side_panel\": {\n    \"default_path\": \"panel.html\",\n    \"openPanelOnActionClick\": true\n  },<\/code><\/pre>\n\n\n\n<p>Programmatically in your JavaScript background service workers, you set it to this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true});<\/code><\/pre>\n\n\n\n<p>The <code>true<\/code> means it opens the side panel in your Chrome web browser, and with <code>false<\/code> it opens the right-click menu for that Chrome extension. That shows the menu items: <em>Options<\/em>, <em>Remove from Chrome<\/em>, <em>Unpin<\/em>,  <em>Manage Extension<\/em>, <em>View web permissions<\/em>, and <em>Inspect Pop-up<\/em>.<\/p>\n\n\n\n<p>Note: This function was tested on April 28th, 2023, and may be subject to change and may not work in the next version.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-html-code\">Step 2 &#8211; HTML code<\/h3>\n\n\n\n<p>Now you can easily create the content in your side panel, just like creating a web page. Create a new file &#8220;panel.html&#8221; in the root of your Chrome extension.<\/p>\n\n\n\n<p>For example, the editable text is:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n&lt;p&gt;&lt;label for=\"stefanvdtext\"&gt;My notes&lt;\/label&gt;&lt;\/p&gt;\n&lt;textarea id=\"stefanvdtext\" name=\"stefanvdtext\" rows=\"4\" cols=\"50\"&gt;At www.stefanvd.net I learn my first Side Panel Chrome extension.&lt;\/textarea&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>You can customize it further with even a custom dark theme. That with support of responsive size and dark mode style.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"598\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/dark-mode-sidebar-chrome-extension-1024x598.png\" alt=\"Dark Mode sidebar Chrome extension\" class=\"wp-image-1027\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/dark-mode-sidebar-chrome-extension-1024x598.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/dark-mode-sidebar-chrome-extension-300x175.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/dark-mode-sidebar-chrome-extension-768x449.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/dark-mode-sidebar-chrome-extension-1536x897.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/dark-mode-sidebar-chrome-extension-2048x1196.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Dark Mode sidebar Chrome extension<\/figcaption><\/figure>\n\n\n\n<p>Also, if you place a hyperlink in your side panel HTML page. Then make sure you add the <strong>target=&#8221;_blank&#8221;<\/strong>. Because the link will not open in the side panel, and with the target attribute it will open the link in the new tab.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.stefanvd.net\/project\/browser-extension\/\" target=\"_blank\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-loading-debugging\">Step 3 &#8211; Loading &amp; Debugging<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"loading\">Loading<\/h4>\n\n\n\n<p>That is it. Now you are ready to test it. These are the steps to test it in your Chrome Canary web browser:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open <strong>chrome:\/\/extensions<\/strong> page<\/li>\n\n\n\n<li>Enable the <strong>developer mode<\/strong> to a blue switch<\/li>\n\n\n\n<li>Next, click on the button &#8220;Load unpacked&#8221; to load your new Chrome extension<\/li>\n<\/ol>\n\n\n\n<p>Do not forget to test the size of the panel, on the border between the web content and the side panel you can increase\/decrease this panel.<\/p>\n\n\n\n<p>Currently, you see the side panel only on the right side. However, you can feedback Google Chrome team using the feedback form:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on the 3 dots icon in your Google Chrome web browser<\/li>\n\n\n\n<li>And select the menu item &#8220;<strong>Help<\/strong>&#8220;<\/li>\n\n\n\n<li>In this sub-menu click on &#8220;<strong>Report an Issue&#8230;<\/strong>&#8220;<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"debugging\">Debugging<\/h4>\n\n\n\n<p>If you want to debug this panel, it is very easy. Right-click on that page, and select the menu item &#8220;<strong>Inspect<\/strong>&#8220;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidepanel-chrome-extension-debug-inspector-1024x596.png\" alt=\"Chrome Inspector window open for debugging the side panel\" class=\"wp-image-1036\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidepanel-chrome-extension-debug-inspector-1024x596.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidepanel-chrome-extension-debug-inspector-300x175.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidepanel-chrome-extension-debug-inspector-768x447.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidepanel-chrome-extension-debug-inspector-1536x894.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2023\/04\/sidepanel-chrome-extension-debug-inspector-2048x1192.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Chrome Inspector window open for debugging the side panel<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"overview-open-source-sample-code\">Overview Open-Source sample code<\/h2>\n\n\n\n<p>An overview of all my Note Sidebar browser extensions for Google Chrome, Firefox, Opera, and Naver Whale can be found here on GitHub:<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/stefanvd\/Browser-Extensions\/tree\/master\/Note-Sidebar\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/stefanvd\/Browser-Extensions\/tree\/master\/Note-Sidebar<\/a><\/p>\n\n\n\n<p>And the new Chrome extension has been added to GitHub, which is the first sidebar Chrome extension to offer a way to organize your notes and stay productive while browsing the web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"addition-resource\">Addition resource <\/h2>\n\n\n\n<p>For more information about the sidebar Chrome Extension Manifest V3 APIs and to keep creating a unique user experience, check out these resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/groups.google.com\/a\/chromium.org\/g\/chromium-extensions?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\">Chromium Extension group<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dev.opera.com\/extensions\/sidebar-action-api\/\" target=\"_blank\" rel=\"noreferrer noopener\">Opera sidebar action API<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.whale.naver.com\/api\/extensions\/sidebarAction\/#show\" target=\"_blank\" rel=\"noreferrer noopener\">Naver Whale sidebar action API<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Add-ons\/WebExtensions\/API\/sidebarAction\" target=\"_blank\" rel=\"noreferrer noopener\">Firefox sidebar action API<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/extensions\/reference\/sidePanel\/\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome Side Panel API<\/a> Google Chrome published on 5 May 2023 silent his documentation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-remarks\">Final remarks<\/h2>\n\n\n\n<p>Creating a sidebar Chrome extension MV3 may seem daunting at first, but with my step-by-step guide, you can easily create your own sidebar Chrome extension. Remember to take your time, test your code, and enjoy the process.<\/p>\n\n\n\n<p>I hope you found this article helpful in creating your very first sidebar Chrome extension and understanding the differences between web browsers like Opera and Firefox. Please note that the current sidebar API is not universal for developers, and I believe it is essential to share this news with the browser extension community. If you would like to support my work in the web community, please consider making <a href=\"https:\/\/www.stefanvd.net\/donate\/\" target=\"_blank\" rel=\"noreferrer noopener\">a small donation<\/a>.<\/p>\n\n\n\n<p><em>Content Disclaimer: This is individual research on how you create your first sidebar Chrome Extension, that I want to share with the browser extension community. I am not paid by Google, and I am not a Google employer.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq-about-manifest-v-3\">FAQ about Manifest V3<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1682708571513\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I use the side panel code in the Manifest V2 version?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No. The &#8220;sidePanel&#8221; requires Manifest version of at least 3. This is the minimum Manifest version to use on this side panel in the Google Chrome web browser.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1682708597853\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Can I change the side panel to the left side in Chrome?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No. Currently, you can only get a right-side panel of your Chrome web browser.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1682708589111\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Will this work in the Microsoft Edge web browser?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No. However, Microsoft Edge is using the Chromium web browser and will receive in the near future this new Manifest V3 feature. As in Chrome version 114 and higher you can get this side panel.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Today is the day you can create a sidebar Chrome extension using Chrome Canary 114.0.5735.0 or higher. Since that Chrome web browser version, it will &#8220;Enable extension side panel for stable&#8221; according to the Chromium public bug report 1378048. So that means that starting from 25 April 2023 you can create a sidebar Chrome extension. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1050,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[],"class_list":["post-526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-browser","category-programming"],"_links":{"self":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/comments?post=526"}],"version-history":[{"count":68,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/526\/revisions"}],"predecessor-version":[{"id":1651,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/526\/revisions\/1651"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media\/1050"}],"wp:attachment":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media?parent=526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/categories?post=526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/tags?post=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}