Boosting Productivity Through a Chrome Extension

About Developer Experience

In the world of modern web development, where technologies evolve at a breakneck pace, enhancing efficiency and improving Developer Experience becomes an increasingly attractive aspect of a company’s technical brand. Amidst the constant competition for talented specialists, creating a productive environment for development serves not only as a way to attract and retain leading developers but also as a crucial criterion for achieving technological leadership in the market.

I have always been fascinated by the idea of creating tools that could simplify and accelerate the development process, making it more intuitive and accessible. Over the past few years, I have developed several such tools, each of which solved specific tasks and addressed particular challenges faced by developers daily

Chrome Extension for Nuxt

Today, I want to share one of my latest tools — a Chrome extension called Nuxt Assistant. This tool, which I developed, aims to assist developers working with the Nuxt.js framework, enhancing their workflow and increasing the speed of website debugging.

The motivation behind creating Nuxt Assistant was straightforward: I actively work with Nuxt.js and have repeatedly encountered repetitive and routine tasks that consumed a lot of time. Noticing that many developers face similar challenges with Nuxt.js, I realized that an effective solution to these tasks could significantly impact productivity when working with Nuxt.

Features

The extension introduces a custom tab in DevTools, featuring several sections.

Overview

It provides general information about the project, including the Nuxt version, Vue.js, and the presence of SSR and i18n.

Routes

This allows viewing the application’s routes, highlighting the active route for easier debugging.

SSR Requests

Displays server requests with detailed information and syntax highlighting, crucial for determining the functionality of the nitro server.

Configurations

Gives access to the configurations and state of the application, offering a complete view of the current project state.

i18n

Shows the available language settings, the active locale, and the browser language, and allows searching through i18n keys and their values.

Internals

Provides information about the connected plugins, directives, and hooks, to understand the internal workings of the application.

Development Process

Challenge #1: Lack of Information

Creating a browser extension is no different from building a website — the same HTML, JavaScript are used. The greater challenges were learning the DevTools API due to scant documentation, which often meant searching for API names on GitHub, studying the code of third-party extensions, and if necessary, adapting an example to a new API version. Additionally, setting up message exchange between the main extension file and the custom DevTools tab was required.

Challenge #2: Code Minification

Since the website code in production environments is minified, parsing internal Nuxt data often involves guessing what is stored in variables like r, e, a, etc. Add to this the different framework versions, different versions of plugins for Nuxt, and the complexity increases sharply.

Challenge #3: API Limitations

Chrome extensions are limited in functionality compared to typical websites — for instance, there’s no capability to let users copy text by default, nor is it possible to include scripts from external URLs, etc. For most browser features, such as obtaining data about the current tab, you need to provide an explanation to the Chrome Web Store moderation team about why you need these permissions. All these limitations are fair and provide some level of security to users, making the development process even more interesting!

Overcoming each of these challenges has, in fact, improved Nuxt Assistant as an extension, and I gained colossal experience.

Examples of Using the Extension

Here are a few examples when the extension becomes indispensable while working with Nuxt.js:

1. Build ID: Knowing the build ID allows you to accurately determine which version of the build is currently on the site. This is necessary when you want to test fresh commits in the application, but there are no changes on the site. This helped to identify several problems, including with CI/CD.
2. SSR: It’s easy to determine if a request was made on the server, what the response was, whether the response was successful, and if there was an error, what the error message was. Sentry solves this problem, but it’s turned off in staging environments to reduce noise.
3. Routes: Nuxt.js’s file-based routing is a somewhat ambiguous solution, and not to everyone’s taste. Experienced developers prefer explicit over magical, but with Nuxt.js, there are certain limitations — file-based routing is too tightly integrated with the framework. The extension can help identify which routes have been created and which one is active.

In Conclusion

In closing, I would like to thank the readers of this article and those who have provided and continue to provide feedback on the extension — without them, the tool would not be what it is today.

I am delighted that the extension has already garnered 200 users from different continents in just a month, without any advertising. I believe the extension truly solves many problems. If you’re interested in trying out the extension, here is the link: Nuxt Assistant on Chrome Web Store

If you’re interested in writing your own extension, here is the link to the Chrome Extension API: Chrome Extension API Documentation