Lessons From Building 2 Chrome Plugins

A.K.A 4 tips & 6 helpful tricks for beginners

Intro:

Recently one of my plugins received some popularity, mainly because it got posted on Product Hunt (you can check it out here) so I decided to share some tips and tricks that I found while making this plugin, and the one before. The plugin was actually made, because of an article, here on Medium — How I stay up-to-date as a Developer.

A bit more intro:

Chrome plugins are a great way to impact a lot of people (Chrome’s market share is way above 50% on every web usage statistic that I have found). If there is one I’ve missed — add a comment or a note. Chrome is a lot more stable and its API react in the same ways on Windows and Linux, compared to Android running on different devices.

Regarding Development

Chrome plugins scripts run on several occasions:

• Background — background scripts run constantly. Setting persistent to false will create event page instead.
• On browser action — when the user clicks on the extension icon in the chrome omnibar
• As a content script — content scripts are scripts from the plugin, injected in the currently opened web page, which allows them to use the resources of the web page to some extent.

The easiest way to make all of them communicate is by passing messages between them. Either by chrome.runtime.sendMessage(...) or chrome.tabs.sendMessage(...)

Tip #1

Content scripts can be registered in the manifest file, which means that chrome will inject them for the matching websites on his ownYou can however insert them programatically as well.Both are OK, but keep in mind, that registering the content scripts, only in the manifest, will inject them after a page loads and will not affect pages that are already opened by your user, when they install your plugin.So either sticking to programatic injection or a combination of both is better in my opinion.

Pure programatic injection can be done from any chrome.tabs listener, using chrome.tabs.executeScript( null, {file: 'example.js});

I, personally, describe my content scripts in the manifest, so Chrome can generally inject them, and just check if the script is actually there by sending a message to it and checking the response. If the response isn’t what I am expecting, I inject it forcefully.

Tip #2

Chrome extensions can override certain default chrome urls (new tab for example). This is defined in the plugin manifest and thus, can not be changed later (from a settings menu for example).However, you can add listener on opening of tabs and check if the url matches the one, that you want to override and then redirect to your desired url, using chrome.tabs.update(data, {url: 'yourUrl'}); It is fast enough to not make a difference, compared to the overrides declared in the plugin manifest.

Tip #3

NB: Everything regarding chrome extensions is using relative path. If you ever need the absolute path of your plugin you can use chrome.runtime.getURL( 'your.html' );

Tip #4

Last but not least — MDN documentation on browser extensions is more detailed in some areas then that of Chrome and is filled with examples, unlike that of Chrome.For example here are the documentations of MDN and Chrome for webRequests. Compare them for yourself.

Regarding what you do after developing it

Once you uploaded your plugin to the Chrome Webstore, nothing will happen. There are thousands and thousands of other extensions. Don’t wait for someone to just stumble on your extension and fall in love with it and then show it to all of his friends.

Helpful trick #1

First check the name that you came up with is free before you start making your plugin and after, as well. A few weeks back I got contacted by the creator of Darkness — Beautiful Dark Themes because one of my plugins was named Darkness as well at that time. He had released his, while I was writing mine. So always double check after you are finished, even if the name was free when you started.

Helpful trick #2

(Ab)Use Reddit. Submit your extension in as much subreddits as you can. For example there are /r/chrome, r/SideProject, /r/Feedback and this thread. Find more that can be used for your plugin. Even if it gives you 10–20 users, those 10–20 users can lead to plenty of feedback and show you how people perceive your plugin.

Helpful trick #3

Speaking of gathering feedback, the people will not perceive your plugin as you do. Things that you think are obvious and easily understood, are actually not. Because of this — if you can, always use video, instead of just a screenshot. It will save you from having to explain things. Chrome webstore allows uploading YouTube videos, as well as screenshots.

Helpful trick #4

If Reddit can give you a little boost and some feedback, Product Hunt, can give you a TON more. The community is better and given the certain exclusivity of Product Hunt, your plugin can be seen by bigger audience, since there won’t be as many other things published compared to some subreddits. Product Hunt is also a lot more active on Twitter. To over simplify it, here is the user count graph of Janus Workspace from before (the blue dot) and after 2 day on Product Hunt.

To be fair, the initial bump of users, in February was caused by posting on Reddit.

Helpful trick #5

Typeform.com can be used to make a form for a feedback and set it as a uninstall url to get feedback from your users on why are they uninstalling your extension. It is really easy to customize and edit and you don’t need any hosting and backend for it. Beware that you can (and will) get number of responses, in incomprehensibly broken English, languages that you don’t speak, or anything else from “ok” and “puf” to “No Me Gusta”. However somewhere in all those unusable replies, are always a few that are worth it —” It didnt snap automatically, and that would be aweasome”, “Predefined window distributions would make it easier to manage.”, “ Load urls from history when writing them down.”

Helpful trick #6

Google Analytics can be used in plugins and is definitely worth it. A tutorial on how to run Google Analytics in a plugin can be found here. Opening the Google Analytics board and seeing how there is always a number of people that use your plugin is a side benefit.

Prologue

I guess

I wrote this article to summarize several things, that I have encountered while making my latest 2 side projects. I don’t consider myself an expert in making and popularizing Chrome plugins. However I believe that this can be useful to someone who is just starting to venture in the Chrome webstore, as a developer.