DEV Community

Cover image for Building a programmable sidebar together
orliesaurus
orliesaurus

Posted on

Building a programmable sidebar together

Not gonna lie, I spend so MUCH of my free time trying to make my Chrome browsing experience better.

Throughout the years I've installed so many extensions for Twitter, Reddit, Google Docs, Twitch...
I also have:

  • An extension for adding Dark mode to any page
  • Grammarly so I make less typos
  • Screenshot editors to take quick shots, edit them and upload them
  • An extension for making my life on YouTube better

...and a couple more 😅

I always want to make those websites work better for me, not the other way around!

Although Chrome has an amazing collection of browser extensions, sometimes I come up with an idea and I want to execute on it: the process of making a chrome extension is NOT very user friendly.

What is a Chrome Extension

A Chrome extension is essentially just a web page that is hosted within Chrome and can access some additional APIs. This page is made up of HTML, CSS and JavaScript and allows you to add some functionality to Chrome through some of the exposed JavaScript APIs.

However not everything is shiny: you will hit some roadblocks if you're trying to do things that Chrome doesn't want you to do :(.

Why make a Chrome Extension

Extensions can help you customize how a certain website or platform work in your browser: most extensions aim at increasing your productivity.

The way I see it personally is that if you have to build a chrome extensions you're solving a specific pain point.

There are all sorts of flavors in fact there are more than 20+ categories of extensions in the Chrome Web Store.
I absolutely love this concept: extensions for learning, increase productivity, personalize your browsing experience, enhance web platforms etc. In fact most likely, depending on what you're trying to achieve, there might be an extension for that!

What to do when you don't find an extension

Although there are a lot of chrome extensions available to download - they amount to a mere 170,617 items in Chrome Web Store [1]. Comparatively, the iOS App Store has 1.73 MM apps hosted on their platform [2].

However, on the Chrome Store, out of those 170k - only - 124k (72%) are Chrome extensions, the rest are Chrome themes or applications (deprecated).

There are many other extension who were never published or might be hosted on Github/personal websites or enterprise but since we can't quantify these, we won't focus on them.

Finally, if you can't find the perfect Chrome extension to do something for you, you're going to have to build it from scratch. As I mentioned this process isn't developer friendly - yet - unfortunately!

Luckily there's a solution, using PixieBrix you can build Chrome extensions without having to deal with all the annoyances

  • But what are these annoyances of this building journey?
  • Why is it so hard to build a Chrome extensions?
  • Shouldn't anyone just be able to build extensions?

Glad you've asked...

Problem #1: dealing with manifest.json

Every Chrome extension has a manifest.json - and figuring out how to set your own manifest up is actually really complicated.
The manifest tells the Chrome Web Store information about the extension, its name, version, required permissions and much more.

Unfortunately, setting this up is not user-friendly and takes a lot of research unless you're doing something super basic: the documentation is all over the place and examples around the web often out of date.

Problem #2: trusting someone else's code

Executing arbitrary code on your machine is also a huge red flag, especially when the code is compiled/minified and the extension is not open-source.
There have been multiple scandals on the Chrome Web Store in the past, but keep in mind that most app stores are susceptible to this behavior.
Either willingly or unwillingly some developers end up giving up control of popular extensions. Then the new "owners" decide to do naughty things with the extension's code.
That's why so many extensions got pulled from the Chrome Web Store over the years.
The one that affected me the most was when they pulled the "Great Suspender" from the store - as some users realized that it was being nefarious - the whole story is a nightmare [3].

Problem #3: writing code

It is not a surprise in 2022 but not everyone knows how to write code in JavaScript/CSS/HTML - therefore there's a huge barrier of entry to allow users to be able to customize their browsing experience.

Solution

What if there was a way to write your own extension without having to do the heavy lifting?

The solution is you can do it with PixieBrix!
In fact there's an event that has been organized to welcome new developers into the amazing world of Chrome extensions.

This summer is all about Sidebar extensions, one of the most effective and beautiful way to create useful Chrome Extensions in my opinion.

Here I created an Airtable learning sidebar: with this sidebar I can quickly surface important information and articles that will allow me to become a superuser when it comes to Airtable!

SidebarSummer

What a sidebar truly unlocks is your inner creativity and engineering, to give you the tools to craft something that is both beautiful and useful!

😎 Take a look at these amazing Chrome Extensions sidebars that some of PixieBrix community has built here

To learn more how you can participate and win find out information on the website available here

[1] https://chrome-stats.com/
[2] https://42matters.com/ios-apple-app-store-statistics-and-trends
[3] https://www.zdnet.com/article/google-kills-the-great-suspender-heres-what-you-should-do-next/

Top comments (0)