Writing a Google Chrome extension

Have you ever found a tool that was 99% there? It was just missing that one killer feature?

That happened to me, with the lovely tool WorkFlowy. I found it helped me organize my JavaScript thoughts, but there was no code support! Not a deal breaker, but code formatting is nice. I’m used to tools like Hackpad where you can mix code with prose. I found a tool that should have fixed that. WorkFlowy for Coders. It looked like a winner, and it’s open source. So far, so good.

But it sucks. There is just no other way to put it. You can’t edit the text in certain views. It breaks functionality. It only renders Markdown in certain views. There are lots of reports of it not working on recent versions of Chrome … not a surprise considering the extension hasn’t been updated in 3 years, and bundles a lot of old libraries.

So I thought, what if I wrote something simple, pure JavaScript, that would just render code? I didn’t need full Markdown support, WorkFlowy already has bold and italic.

Here it is, just a few kilobytes of pure JavaScript.

Before:

After:

I also was fortunate enough to get an awesome graphic designer to put together some beautiful artwork for it:

The only file necessary for a Chrome extension, is a short file named manifest.json:

The only thing that isn’t obvious here is the manifest_version, more on that here. Long story short, put a 2 there.

The only other ‘barrier’ for becoming a web store developer is a one-time $5.00 USD fee. You can easily push new versions using Chrome’s Dev Editor. I pushed all my work to GitHub and then cloned the repo with the Dev Editor. The entire process was nearly friction-less. I’m already bouncing around ideas for other Chrome extensions, and maybe porting the WorkFlowy Code Formatter to Firefox. Firefox is going to make porting Chrome extensions easier, more on that here.

Let me know if there are any sites you would like to extend the functionality of in the comments, perhaps we will work on an extension together.