Chatype All The Things

I recently started dabbling with building Google Chrome extensions and Chrome apps. The experience so far has been pretty simple. There is plenty of documentation related to both extensions and apps although some of it is outdated. I have noticed that there are videos of one particular tool for easily building interfaces for apps that is very similar to building interfaces with Visual Studio for visual basic or c#. It had a drag and drop style interface and looked like a quick way to prototype an application while also being able to make it functional. Unfortunately this magnificent tool has been laid to rest by Google, from my searches of blog posts and articles this has happened because Google wanted to focus more on the html side of extensions and apps...Thanks Google.

Anyways, it only took me a day to get my first Chrome extension built and published. Probably a couple of hours of messing around actually. It was an icon in the browser that when pushed, redirected the current page to the website Chadev.com. FYI Chadev is a local Chattanooga community of developers, programmers, and like minded tech people that I help run along with a handful of other Chattanooga developers. The website is currently in the making but our current main outlet is a subreddit. More on Chadev in a future post. The Chadev extension is very simple, it has an icon, displays the text 'Open Chadev' when hovered over, and redirects to Chadev.com when clicked. The whole extension consists of six files, four of which are images. The two code files, a javascript and manifest.json file have a total of 28 lines of code. The manifest file is probably the most important file in the extension. It holds all relevant information for the project including the name, version, description, icons, browser actions, and has references to all files used with the extension. My manifest file loads in a javascript file in the background which waits for the extension button to be clicked the does its redirection magic. All the code is open sourced and can be found at the Chadev Chrome Extensions github repository and can be installed from Chrome web store at Chadev extension.

After creating the Chadev extension, I set out to create an extension to change the font type of any web page that you visit to the font Chatype, the city of Chattanooga, Tn. font type. Another simple idea but one that I find entertaining. Chattanooga has received some publicity for its specialized font type and hopefully this will help people see how it looks on different web pages. After messing around with the example code provided by google I was able to change the font on pages but I was having a problem actually loading in the Chatype font files. A fellow Chadev member and long time good friend, Kyle Gordy was able to figure out that I was missing the code in the manifest that was supposed to load in the font. After that everything was dandy. Kyle created some amazing extension icons and we shipped it off to the Chrome web store. Kyle also created the amazing graphic that is at the top of this post and is on the github repository. The Chatype All The Things extension is available at the Chrome web store and the open sourced code can be found on my github profile under the Chatype all the things repository.

I have a few more ideas for extensions that I want to create so keep an eye out for more of my Chrome extensions and apps as I continue to learn more about them. If you have any ideas about extensions or apps that you think would be cool or if you have created any yourself let me know. I'm very interested in hearing about your experiences as well.