Creating the extension.
Creating the Extension
Although I have some basic knowledge of HTML from playing around with creating websites as a teenager, I am admittedly a novice, and therefore when I set out to create the extension my first port of call was to search for online guides. I quickly came across a video by YouTuber, Traversy Media, and decided to use the tutorial and Traversy Media’s code to make my own simple extension. The extension is a launcher that allows users to quickly access a series of predetermined websites.
Creating the extension is a painless process, and Traversy Media’s tutorial provides an easy to follow guide which I will summarize here.
The first step is to create a parent folder (in my case entitled Japanese-DH-Tools-Launcher) in which you will need to place two PNG files for the extension’s icon. One should measure 19×19 pixels and the other 128×128 pixels. I used the website CoolText to create a simple text-based icon using the Japanese character de デ, the first character in the term Dejitaru Hyūmanitīzu デジタル・ヒューマニティーズ (E. Digital Humanities), and then edited its dimensions in Apple’s Preview (under Tools, Adjust Size…). A sub-folder entitled Images should then be created and a PNG icon measuring 150×150 pixels is placed inside.
The second step is to open the parent folder in a text editor or IDE. Following Traversy Media’s tutorial, I decided to use Microsoft’s free Visual Studio Code, although I am more accustomed to using Sublime Text. All Google Chrome extensions require a manifest.json file, and therefore, Traversy Media first guides the viewer through creating one. I copied his code changing the relevant parts to fit the nature of my own extension (principally “name”, “description” and file names). In case circumstances had changed since Traversy Media uploaded the tutorial, I also confirmed the manifest version that Chrome App developers are currently required to use here.
The JSON file.
The Modal-Header and Modal-Content functions.
The Finished Product
The finished extension is functional, but far from aesthetically appealing. This is partially due the use of Font Awesome for the icons of each link, but also due to my own limited abilities. Font Awesome is useful, but simply doesn’t have a large enough variety of icons that could be used in the extension that I wanted to create. I imagine that it could be fixed by creating custom individual icons for each link, but this would be time-consuming and might infringe on copyright laws if I were, for instance, to use official site icons.
The finished extension when clicked on.
Although creating the Japanese DH Tools Launcher was a valuable experience that allowed me to learn the basics of creating Google Chrome extensions, the finished product does not drastically increase workflow or productivity. Certainly, the ability to use the launcher to swiftly open new tabs containing tools and websites that I regularly use reduces the time spent on typing in web addresses. However, the time saved is only marginal.
Despite all this, creating the extension was a useful experience and one which I hope to be able to build on in the future in order to create more useful extensions for Google Chrome.
Downloading and Using the Extension
I created the extension for personal use, and therefore have not uploaded it to the Chrome Web Store. Indeed, it is unlikely that many scholars require swift access to the same websites and tools as I do. Nevertheless, I am aware that some readers may want to try using it, see how it works, and edit it for their own purposes. As such, I have made the extension available for download here.
After downloading and unpacking the zip file, you will want to save the contents in a folder. Following this open Chrome and click on the menu button (the three vertical dots on the far upper right), select “More Tools” and then “Extensions”. Make sure to turn “Developer Mode” on and then click on the button entitled “Load unpacked”. Find the folder that you have saved the contents of the download files into and click “Select”. The extension is now installed to your browser and can be used freely.
Finding the extension.