Users of Google Chrome have long been able to customize their browsing experiences by installing extensions; small pieces of software that ‘enable users to tailor Chrome functionality and behaviour to individual needs or preferences’ (Google). Extensions are written in HTML, JavaScript, CSS, and JSON and are relatively easy to create. For those involved in the Digital Humanities, and indeed scholarship more generally, extensions offer the potentiality to increase workflow and are an important, if not overlooked, tool for research. This post will explore a simple Google Chrome extension that I created to quickly access the digital tools and websites that I most regularly use.
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.
After creating an unused JavaScript file, the third step in the process is to create a HTML file which will contain the HTML and CSS for the extension. Again, I based my own code on that which Traversy Media provided changing relevant details such as the content of the modal header and modal content classes. I chose nine tools or websites that I regularly use in my research to be included in the extension these included three dictionaries; Weblio, Weblio Kogojiten, and Jisho; GlyphWiki; Japanese text segmenter and morphological analyzer, Web Chamame (explored in my last post); my Japanese (Shakkanhō) Unit Conversion Calculator (explored here and here); the databases CiNii and the National Diet Library Digital Collections; and the website of the Center for Open Data in the Humanities. Whilst I followed Traversy Media in using Font Awesome to select the icons attached to each link in the launcher, I chose to use a different font for text (Noto Sans JP). (A list of usable Google Fonts can be found here). I also chose to use a different colour scheme. After I had completed the tutorial I also redacted the code. I changed the width of html, body and added a flex-wrap property in order to improve the style of the extension.
The Modal-Header and Modal-Content functions.
For those interested, Traversy Media’s source code can be found here, whereas my edited version used for the Japanese DH Tools Launcher can be found here.
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.
The Digital Orientalist 