Microsoft Edge is constantly driven by the power of innovation, which opens amazing opportunities. Today, we are thrilled to announce that extension developers can build extensions for the Sidebar in Microsoft Edge, and bring users an enhanced side by side browsing experience that empowers them to achieve more.

Let’s dive into the details!Screen capture showing a "Hello world" sample sidebar extension running alongside a browser tab in Microsoft Edge.

Supercharge your users’ productivity

We invite developers to harness the potential of Sidebar extensions and deliver improved experiences to their users. Read on to evaluate how your extensions can benefit from this new feature.

We understand that every user has unique requirements, which is why we have developed three additional functionalities to provide a tailored experience:

  1. Default sidebar on every site: Set a default sidebar to display consistent content or extensions across all opened tabs. Default values persist across sessions, ensuring a seamless experience. Find the sample code available here.
  2. Sidebar enablement on specific sites: Make your extension to open in the sidebar on a specific site using sidepanel.setOptions(). Customize the experience for your users based on their preferred websites.
  3. Switching to a different sidebar: Welcome your users with a dedicated sidebar using runtime.onInstalled(). Seamlessly transition to the main side panel when they navigate to a different tab. It’s all about providing a personalized touch.

Enabling your extension as a sidebar extension

Enabling your extension for the Sidebar is easy. Add the “sidePanel” permission in your manifest file and set the “default_path” to “sidepanel.html” using the provided code snippet below:

{ 
  ... 
  "side_panel": { 
    "default_path": "sidepanel.html" 
  }, 
  "permissions": [ 
    "sidePanel" 
  ] 
  ... 
}

Note that your sidebar page offers the same level of flexibility as other extension pages. You can load scripts, call APIs from your sidebar page and unleash the full potential of your creativity.

Furthermore, users will continue to find and install your extension through Microsoft Edge Addons.

Learn more and get started

We have written comprehensive Sidebar API documentation and a collection of sample extensions is available on the Chrome repository to help get started. Explore the possibilities and discover how your extension can make use of them.

With Sidebar extensions, Microsoft Edge is upgrading the way your users interact with extensions, boosting their productivity, and offering a tailored browsing experience.

Developer ptions for sidebar experiences

The sidebar in Microsoft Edge is a great canvas for you to provide a productive experience for your users, and sidebar extensions provide a great way to bring the power of browser extensions alongside browsing.

In addition to sidebar extensions, sidebar apps allow you to adapt your existing progressive web app (PWA) to securely run alongside other browser tabs for a side-by-side co-browsing experience, which is a great choice for web developers who want to offer companion experiences including social, messaging, or media apps that don’t require advanced extensions capabilities.

We plan to help users discover and install sidebar apps as they browse the web, providing great discoverability for your app with just a simple change to your web application manifest file. This is a great option if you want to reuse your existing web app for the sidebar in Microsoft Edge and make full use of the web capabilities that are available to PWAs.

If your experience relies on extensions APIs, such as reading or modifying the current page, then building a sidebar extension will provide these capabilities.

Feedback and Discussion

As we continue making improvements to these sidebar extensibility models, we welcome your feedback: You can join us on our Edge Extensions GitHub forum to share your thoughts and connect with fellow developers, or give feedback on sidebar apps and PWA capabilities on the Microsoft Edge Explainers repository.

Source: Windows Blog