Building a Chrome extension using Vue.js

I have been using Vue.js for awhile now, and when I started working on the Coins extension I wanted to be able to quickly prototype and find a build process that makes it really easy for development and deployment. It was fun creating the Coins extension using the power of Vue.js and I wanted to share what worked for me.

Here's the template I created to get started: vue-chrome-template


This template includes a webpack config that will build to local and production. In this case, production means that it will be ready for the Chrome web store. Vue.js extensions are easy if you have the build process figured out (see webpack.config.js in template). 

There's a manifest.json file that you'll want to edit to set up your extensions details for Chrome. Currently, it contains only a few required fields.

Getting started

Follow these steps to get your local development environment up and running:

  • Download or fork the template
  • Run npm install
  • Once npm installs everything properly, run npm run dev
  • If you'd like to test the extension, run npm run build, this will build into a folder called extension/. Load this folder in Chrome's extensions page.
  • (Optional) Use nvm to manage your node version

Tips for development

When working on your Chrome extension, I suggest using the pre-configured npm run dev command and just testing it inside a regular tab. You can access it at http://localhost:8081 and it'll refresh as you make changes too. 

When doing local development, you'll want to make sure to put everything inside the src directory in which the existing Vue app lives.

Use a fixed width in the app when doing local development, I usually put a 1px border around my app so it's easier to tell what the size will be. 

Make sure to set your app's details properly in manifest.json and you'll notice the template is set up for a browser action (Chrome dev docs).

Building for Production

When you're ready to deploy your app to the Chrome web store, you'll want to run npm run build and then zip up the extension/ directory (Chrome requires that all extensions are uploaded as a .zip). Whenever you're ready to upload, Chrome will require that the extension have a different version than what's been uploaded before

Please leave feedback and questions as comments below. This is one of my posts that's a tutorial and I would love to get constructive feedback. 

Starting work on a custom theme

I really like the way Medium posts look. I think the Medium team has done a great job spending time on making sure a post looks its best no matter what the content it contains.

When I was setting up this blog, I looked around for any theme that was just barebones, the current theme I'm using is called Integer by ThemePatio. It was one of the few that I found that doesn't only look Perfect™ when looking at the preview. Most themes will look very good when you're looking at a preview of them and they're not designed for regular blogging, they're designed for cookie-cutter blog posts. I think this is unfair to the people looking at the themes since it means people will be oversold on a theme and when they install it, it'll look like it's missing something.

I am starting to work on a custom theme that I'm going to be making available. It's called Free Press, you can see it on github here: usmanity/free-press. 🗞

The goal is to keep the theme very minimal, maybe take a few design hints from Medium but overall stay the course of simplicity. 

My goal for Yelp in 2018

In the past, I’ve never written about Yelp, restaurants, and even food on my blog. But some time in 2017, I had this thought that I should write reviews for places I’ve visited.

But last year, I hardly wrote any reviews. This year, I have been on a slow but consistent flow to write reviews on Yelp.

My goal is 127 reviews by the end of the year. Why 127? I started the year with 27 reviews, I think setting a goal of 100 reviews this year should be achievable.

As of this writing, I’m at 42 reviews.

There are some basic stats given to Yelp users on their reviews and photos, views in the last 90 days. You can see this by going to your profile on Yelp. Once a month, Yelp sends an email with the last month’s stats. I’m sitting at around 10k views of my reviews in the last 90 days and about 15k views of my photos. These are pretty good compared to anywhere else I post anything.

I will be cross-posting some reviews but I will try to keep most of the reviews on Yelp.

Introducing Treefingers

When I was writing the code for the laravel version of my blog, I had created a repo, usmanity/treefingers, and I used it to keep track of my changes. 

I was really excited when I had started working on it so I decided to create a brand for it but it never was public and so now I'm going to make that brand part of this blog.

Treefingers comes from a song by Radiohead. You can hear it here: Treefingers by Radiohead (Spotify) .

I wanted to base the brand off something related to trees and fingers, there's no real meaning for the word and the song so I'm interpreting it myself.

From the sun to the trees

Before I came up with the final design, I went through a couple of iterations. My initial representation for my blog was going to be the sol character in Unicode: ☉ 

And based off this concept I created the following:

Some were more for the mix of colors and some just because they represented the unicode character in a bit more detail. Then I wanted to keep going and trying to experiment and below are some concepts that now look ridiculous but I was just playing around at this point:

These represented something but not what my blog was, I think "simple solar"  would be a great one for a blog about space or something. The "unicode characters only" version looks weird now but at the time I thought it looked like a spaceship.

Below are some more but after these come the final ones.

After trying all these, I decided to step away from my computer and I wanted to rethink about what the name "Treefingers" meant and how I can properly represent it.

Without being too assuming, unaware, or insensitive, I did some research on a character that I had seen before, it's a CJK character for half a tree trunk in CJK languages (Chinese, Japanese, and Korean). It looks like this: . As far as I can tell, this character doesn't directly translate to anything except.


So below are the final ones that I had to pick from:

As you'll notice, it's the ⺦character on it's side, this is to make sure I'm not directly using the character and modifying it enough to be its own thing.

From here on, you'll see this as the branding for this blog.

Hello from Treefingers

Today, I'm moving away from my personal blog that was built by me using Laravel. I'm using WordPress going forward, there are a couple of reasons for this but before I get to those, I'd like to do a review of how I got here.

Before this

It's been more than 10 years now since I set up my first blog. When I was high school, I wanted to just find a place to vent or write about anything going on at school, it was more like a personal journal that nobody read. When I turned 18 and started paying for stuff, I bought and started pointing things to it. Since I was rarely writing and I had a crappy homepage, I just decided to point my blog directly to This changed when I realized I wanted to write more and my blog posts weren't going to be the most relevant thing for someone if they're looking for my homepage.

First, I tried blogger, then I moved to tumblr. On tumblr, I went through a lot of internal debate about what sort of blog posts I should be posting. I still think tumblr is a middle ground between twitter and a full blog. It made sense when twitter was limited to 140 characters and mobile apps weren't that great. But I realized that tumblr is a great place if you like reblogging and sharing interesting things but not if you just want a personal blog that's filled of random information. Then I moved to Posterous, mainly because it was new, cool, and super simple. This didn't last long. I abandoned Posterous as it was also a great platform where I couldn't write much on. For all these, I was to blame.

By 2014, I had been doing this so much that I was basically addicted to switching my blogging platform every 6-12 months. In 2014, Ghost came out and they announced they were going to be on DigitalOcean, and because of this, I decided it was time I moved to my own blog so I would have control over it. This was fun, you can see an archived version of this blog here: Wayback Machine. Ghost had promised a lot of features by v1 didn't deliver all those but still, I wrote pretty actively on this one. I posted some photos, I tried to write some things going on but mostly just intermittent updates about me.

Personal blog built by me

In 2017, I was learning more about PHP and I had been looking to practice Laravel so I decided, why not build my own blog using Laravel so I can learn + add whatever features I wanted. The initial setup and work to get the blog off the ground took me a weekend to write (Laravel helped a lot). This was probably the first time I was really interested in my blogging since I had started.

I was writing more often. I wanted to add pagination, it took me about 2 hours from when I decided I wanted to add that to getting it on the live blog.

But building your own blog means you're going to have to start testing everything by hand (if you don't have tests written) and then you'll be responsible for updates, bug fixes, security patches, and anything else that comes up. This led me to a big problem, I still haven't figured out a good deployment flow. This meant that I had a tough time updating the blog whenever I made code changes to the blog code. As this problem loomed over my head, I got less and less motivated to write.

My favorite post I wrote on the laravel blog was about my late cat Bilo, I'm going to be republishing that after this post to make sure it's always available to read. It took a lot of courage for me to write that post. 

So, why WordPress now?

Hopefully, the review gives you a good idea of different issues I've had with many blogging platforms (including my own). And now, I want to explain why I chose WordPress. Throughout the whole 10 years that I had some version of a blog, I resisted using WordPress. It always sounded too much for my purposes. I had been believing that and I was didn't want to be convinced that it could fit my needs. And because I never installed it and tried it, I didn't want to think I was wrong.

In January, I made a post on Medium and it was way more popular than anything I had posted on my own blog but it was an informational post. My blog is about thoughts, opinions, short snippets, quotes, songs, photos, and anything else I want to post. In the last few years, my social profiles have taken up a sort of specific categorization that's cultural and limiting. For instance, Medium is probably the best platform for sharing knowledge, company updates, or posting opinions. But, it's not the best to post a short update (think a twitter), it's not the best for posting one photo of an event (like Instagram), and it's definitely not the best to have discussions on (like Reddit, or personal discussions like Facebook). But it is a great platform for posting general information that can become part of a large set of information. I rarely see people post on Medium about things going on in their lives.

I want to use my blog as a platform for writing about anything and I hope if you're following my posts, you don't mind the occasional photo with no caption or a snippet instead of a well-organized and articulated post.