Creating a multiplatform browser extension for Platzi
Some people like the experience of using web apps with keyboard shortcuts. Platzi is a platform that provides online courses, blogposts, live classes, and exams. The exams are taken in the browser, and the students can use the mouse to select the options. But now the students can use keyboard shortcuts to select the options faster.
What is PlatKey? permalink
PlatKey is a browser extension that helps Platzi students to solve exams faster in Platzi. Also the browser extension provides new functionalities to improve the experience of taking classes in Platzi. And it is available in Chromium browsers and Safari.
Software Information permalink
- Industry: Education
- Work Duration: ≈3 months
- Accessibility WCAG: AA (2.0)
- Version: 3.0
- Keyboard shortcuts to select exam options
- Keyboard shortcuts to navigate between classes
- Fully integrated whiteboard in the exam
- Highlight classes in the Student Home
- Save contributions in the Student Home
- Search for classes using a search bar
- Terminal-style design for Platzi UI
- Multiplatform: available in Chromium-based browsers and Safari
If you want to install the extension, you can do it from the PlatKey website.
It is open-source and under MIT License, you can review the code in GitHub.
Design Process permalink
The extension was made with an architecture that allows the extension to be used in different platforms. The first version of PlatKey was made for Google Chrome (and Chromium browsers). And the third version brings support for Safari browser.
Development Process permalink
Creating the Keyboard Shortcuts Script permalink
I explored how exam options are structured at Platzi. In addition to the available options for a question, we also have a "Skip question" button. Once identified, I created a function that would detect keystrokes, and if they match the 5 options (in letters and numbers), or with the number 0/X, an option would be selected or the question would be skipped respectively.
In addition, considering that the user is sure of the selected option, once an option is selected, that option is confirmed immediately (or at least less than a second later, since there is a delay until the button "Next question" is available)
Developing the Extension Architecture permalink
Once the keyboard shortcuts technology was created. I started to think about how to structure the extension.
I decided to use the Manifest V3 of Chrome. This version of the extension is more secure and has a better performance.
Manifest V3 has features like service workers to load the user configuration, and content scripts to execute the keyboard shortcuts script.
UI Design permalink
The user interface was designed to be simple and intuitive. Inspired by control panel in iOS.
The extension has a popup window that contains only the configuration of the extension and links to the PlatKey website. The
Extension Workflow permalink
The extension has a
content.js files that are executed in background everytime the page is loaded for the
And when styles are required, the extension has a
Every browser extension needs permissions to execute code in the browser. Theses permissions are defined in the
The extension had more permissions in the Alfa version. But after the review of the extension in the Chrome Web Store Team, the extension only needs these permissions:
storage: To store user configuration.
And only is executed in the
Many challenges were faced during the development of PlatKey. Some of them were:
Building Spotlight search permalink
In order to achieve the Spotlight search feature, I needed to manipulate the DOM of the page. And I needed to do it in a way that does not affect the experience of the user by messing with the search functions, and preserving the accessibility and the UI established by Platzi.
There is a specific function to load the Spotlight search. This function is called only if the user activates the feature Spotlight.
After that, it creates a "Spotlight Wrapper" element (
#NewSearchSpotlight) that will contain the Spotlight search. Using the
In this point some styles are applied to the search bar and the wrapper. This styles will take the search bar at the top-center, and will hide it by default. (So the user can activate the Spotlight search by pressing the
This step is applied 500ms after the page is loaded. This delay is to ensure that the search bar is loaded in the DOM.
Safari Support permalink
Safari is the second most used browser in the world according to StatCounter. And Safari has a lot of users in Mac OS. So I decided to make a version of PlatKey for Safari.
The process was straightforward. I used the Safari Extension Builder to transform the extension.
In Safari, the extension has a different architecture. For example, it includes a wizard-like window to configure the extension once it is installed.
After that, I uploaded the extension to the App Store only for Mac. And the extension was approved by the App Store Review Team.
The source code of PlatKey is distributed under the MIT License.