published my first chrome extension

Author

author / December 26, 2024

7 min read •

chrome web store logo

tl;dr

Always wanted to build an extension. Made one finally.

Why Extensions?

First exposed to developing on browser extensions was in LTIM, where they had this extension used to record user activity on websites to be used for testing. Always wanted to build one for myself. This Christmas, finally found the time and motivation to do it.

Wherefore

So this Christmas was the time to heavily browse the Java documentation for obvious reasons. While doing so, I found myself wanting to lookup for the implementation of the methods in the source code. This would have me to do following steps:

  1. Open a new tab
  2. Search for the Java Class followed by 'javadocs'
  3. Click the first link (which somehow is for JDK8 docs mostly)
  4. And optionally, ctrl + f looking for the method name

This seemed tedious, as I would have to repeat the same exact steps for looking up something in another class. Sure, you would just search for the next Class in the same tab again, but still there are 3 more steps to go. Thought it would really be cool to have the source code of classes/method directly available near to or next to the class/method itself.

It was then I realized, an extension would come in handy for this.

The Idea

The idea seemed simple. Whenever the documentation page mention a Class, Interface, Method (or a constant field, constructor for that matter), we could just add an anchor link next to it pointing to the openly available source code in git repositories. The 2 requirements major requirements for this were;

  1. The documentation should have the anchor tags with href for the Class that we want to look up.
  2. The source code being available.

Both these were satified with the Oracle Java Docs.

There is also a third requirement, for linking up Method, Constructors and Constant fields; 3. The code reporitory should support scroll-to-text for fragment directed URL'

In our case, thankfully Github does support it, although wierdly soemtimes.

Inception

Although I had earlier worked on extensions, I needed a refresh. Because it was more than 2 years ago that I worked on them, but also it was just feature enhancements and debugging, and not from scratch.

As always, the first step was to Google and naturally landed up to https://developer.chrome.com/docs/extensions/get-started.

And as always the case Google documentation(or is it?), the documentation is very consise and clear. All thanks to the developers at Google.

The Extension itself

Name

Thought of various -ify or -ly names in trend recently, but none of them quite fit (Linkify, Connectify, Linkly, Docly😂). Also most, if not all are already use, established or taken (taken here is in context of how you would say a domain is taken). There are actually some articles about this fad if you'd like reading The Name-ified Startups Are All Grown Up. What's Next?, The ‘ify’ naming fad: Did Spotify start it? , also How Quirky Startup Names Became an Internet Aesthetic.

After spending substantially good amount of time deciding a good name, finally decided to not brand it with one word and just call it "Docs with Code: Link Source Code to Documentation, Java". I know bad for branding, but it was finally time to let go of the name and finally do something actually useful.

Logo (or Icon as Google would like)

The good old representation of code by using Angle Brackets, </> should be enough.

The font color is #00BBD3 with plain white background.

Suprisingly there aren't good enough resources that quickly let you make logos or icons without paying, or atleast they don't show up on the first few Google search results. Most of them have very limited functionality of what you could do without paying for there pro or plus versions. Take Logo.com for example. But I get it, it must have cost them $$$ for that domain, and they must reclaim that investment somehow.

For creating the image of extension(which Google calls as 'Small promo tile') that is displayed in search results of Web store, I used Looka.com.

Code

As with the documentation, there are also lots of sample extensions provided by Google to get started with.

A bare minimum working extension requires just 2 files;

  1. metadata script - manifest.json
  2. content script

The metadata.json contains the metadata about the extension, like the name, description, version, service workers, host permissions etc. Ours is a simple extension, which does not require must permissions or access to users browser API, except for host permissions for documentation sites as that is where we are going to inject our content-srcipt when there webpages are loaded. Currently only requiring access 'https://docs.oracle.com/'.

And the content-script.js with the bussiness logic or the purpose the extensions resolves. Currently there is only 1 content script, which works as outlined;

  1. Checks if the JDK version for docs the user is veiwing(from the URL) is above 5(or 1.5), as there is no code repo for JDK5 in OpenJdk Github repo, and moreover I doubt there are many users who would land up on JDK 1.5 docs either intentionally or accidentally.
  2. Search the DOM for all the anchor elements with href property, exluding some pre-defined set of words that are not the actual code docs.
  3. With this list of the required links, we add another anchor tag to each of these links with the text of Unicode Armenian eternity sign.
  4. The href for these tags is generated by determining the api version, as there are some minor path changes from JDK6 through JDK23, along with the combination of package/class name we get from the original link's href.

We might have to move up creating separate content scripts for different sites as we add them in future.

Publishing to the Web Store.

With the code ready, it was now time to publish the extension. This requires a Google web store developer account with a one-time payment of 5$.

The extensions files need to be zipped before they can be uploaded. Once uploaded, Google says it will take few hours to days to get it reviewed and published. Mine was accepted in about 18 hours. I wasn't expecting this quick review considering this is the last week of December.

Future

  1. As this heavily relies on the Web API FragmentDirective, making sure the browser supports it is very important. As of writing this extension, almost all major desktop browsers supports it, with the exception of Safari though, which although supports the scroll-to-text for fragmented text, but don't support the actual interface FragmentDirective which can come handy while checking the browsers support for this feature.

Use this interface to warn the user about this dependency where there browser is not supported.

  1. Adding a small pop-up while hovering on the link which shows small code snipped. Not quit sure how feasible is this, as this would require us to visit the repo first and fetch the code. Not to mention format and color code it accordingly.

  2. Support more languages and libraries. Scala looks to be good next.

  3. Take feature requests, bugs or issues using Github as medium.

  4. Add Buy me a coffee?

Known issues

  1. Erronous handling of fragmented directive links

When landing to methods, constructors and constant fields using fragment directive, the Github page sometimes keeps loading and eventually Chrome throws a stack overflow for the tab. Also sometimes, the page is scrolled back to top even after finding the text, once the full page is loaded.