Building a Chrome extension for Centry

Centry allows you to connect websites with a centralized portal. It'd be handy to have access to those domains from within the browser. So this weekend I decided to create an extension for Chrome.

There are plenty of online tutorials on how to build a Chrome Extension. It's really easy if you have basic knowledge of HTML, CSS, and JavaScript. One of the things I liked is that you only have to create a manifest.json file to get started. With only a manifest, Chrome will already install the extension.

How it works

The UI is pretty straightforward. If you click on the Centry icon in the address bar, a popup will be shown. The focus is automatically on the Filter field, so you'd type right away. It uses RegExp to match domains. Via tab you'd simply change focus and open the highlighted domain in a new window. The "Edit" button next to the domain points to a dashboard page in Centry Portal. From there you can easily change the domain, view properties, or run a scan.

For the Centry extension I'm using Chrome's local storage to store the token and the list of domains. The username / password are of course not stored. They are only used once to authenticate with. The portal responds with a personal access token.

Some issues

While building this extension I had trouble with three things. The local storage can be synced with Google. However, the storage size is a bit limited. I had to move to the 'local' storage because a list of > 140 domains hit the size limit of the synced storage. The second problem was that for the XHR requests I used an Authorization header. In the header I accidently put a colon behind "Bearer: ". I spent hours on a 401 Unauthorized response from the webserver and thought it was CORS related, because in Postman I had no problems. I couldn't get the Xdebug Chrome extension working in the popup dialog (I guess it's not supported in extensions?), so I had to go var-dumping / dd-ing through the vendor directory... ouch! The last problem is that I had to write vanilla JavaScript again. Honestly, I even had to look up a simple click event handler...!

Launching it!

Publishing went relatively easy. Google recommends to create a new Google account, so that's what I did. You also have to pay $5 by credit card. I guess because they just want an excuse to get more personal information from me :) Anyhows, I'm happy with the simple, but functional, version that's now ready to be used.

Check it out in the Chrome Web Store: https://chrome.google.com/webstore/detail/centry/nlmbcikndaoflinafeadgpakddbgdkdi

Centry Chrome Extension
(ps. this extension connects with a test Centry Portal instance, so the list of domains is a bit short)