Install Notion.so as an App on Chromium-Based Browsers

Cover image

Recently, I've been using an innovative tool for keeping me focused on my daily tasks and priorities (along with a lot of browser add-ons for writing).

Notion.so is a web-based note-taking application with powerful project planning and wiki features.

Notion’s genius is how it allows you to create databases of pages with unique properties on those pages that can be used to filter and group your work. This lets you evolve your workflow on the fly and develop a workspace best suited for your needs. (All without any programming!)

I am thrilled about this tool because I can’t compare the influence it has in my life with any other program. I’ve enjoyed the browser experience — but like many web apps — there is good reason to use Notion as a stand-alone application. For me, I like that native versions are an isolated window that helps eliminate distractions.

The notion has desktop versions, which I’ve had excellent experiences using to keep me focused.

There’s one drawback though: I can’t use my browser extensions!

Web Apps — Desktop vs Browser

Many users like to use native desktop versions of web apps because it creates an isolated container. This gives you a single window where you and your computer can focus on the process at hand. (Instead of getting drawn into temptations in the browser.)

But I also like using an array of browser based extensions (grammar checkers, dictionaries, and screen readers) to help me write. When I run native apps, I lose access to things I use often rely on in my writing process

At first, I thought: “that’s okay — I can just switch back to the browser when I need to use those tools”. Although, I quickly realized that those scenarios lead me back to browser sprawl that causes me to get distracted.

Since there is no way to use these extensions in a native desktop app, I was initially disappointed that there was no way for me to deal with these limitations. Until I remembered about browser apps.

Install a website as an App

In my work as a technical writer, one of the ways I’ve been able to deal with distractions is by isolating my work. Using tricks like going full-screen mode or using virtual desktops are all great ways to help keep focused.

For example, when I was working at Microsoft, we were using Azure Dev Ops for task assignments. But since this was a web-based app that only works in a browser, my experiences quickly turned into tab-clutter.

As my work process evolved, I learned to take advantage of Chrome’s ability to create a shortcut to a website as an app to help me stay focused on tasks at hand. I started using this to help contain and isolate my activities without getting lost in the browser. Eventually, I started using this approach with other web-based tools, like Outlook and Evernote. Because to my delight, I was still able to use built-in browser extensions that I need to do my job.

I love that this gives me with a distraction-free sandbox while giving me access to my extensions. So, I started using this feature at home with Notion

Save Notion as a Web App on Chrome (and Microsoft Edge)

  1. Open any Chromium based browser (like latest Chrome or Chromium Edge).
  2. Go to the Notion page that you would like to load as default.
  3. With the web page open, select the browser’s Settings button > Apps > Install.
  4. Type a full name for the notion page and select Install.

https://cdn-images-1.medium.com/max/800/1*CKys3b_LPHO5ybQW5tmXLg.png

Installing this site as an app installs the current page as an app

The tab you were on will open in a separate window without additional navigation tools. 🤓

Tip: You can also pin the App to your Taskbar or create a desktop shortcut. Unfortunately, Firefox doesn’t support installing web pages as a web app out of the box, but it looks like you can enable it by enabling the Site Specific Browser (SSB) config.

https://cdn-images-1.medium.com/max/800/1*gl9ySALc88t-H7h4uJTTMw.png

The Notion.so icon is replaced by whatever icon you have set in your page (I used a Seattle friendly icon to describe an average day)

Advantages of using web apps over native apps

This set up is great for a number of reasons.

  • The web page is now installed like any other native app — with a shortcut on your desktop that can be pinned to your taskbar or start menu.

https://cdn-images-1.medium.com/max/800/1*DHaRp4iUVPzBU8SdX3eh6g.png

  • There are no additional menus, tabs, or UI clutter to distract you.

https://cdn-images-1.medium.com/max/800/1*8gX1dRi-YfPwsL-XRkAI4g.png

  • Best of all — your browser extensions are all there!

https://cdn-images-1.medium.com/max/800/1*VNLzrvI-qKE-yoiA2kH60w.png