Skip to content

eps90/uuid-generator-chrome-extension

Repository files navigation

UUID Generator Chrome Extension

Build Codacy Badge

About

How many times have you needed to quickly generate UUID, for example, for test purposes? Probably each time you opened a web page with online generator, copy and paste into your code. Then, when you need another one, you had to open this page or refresh, copy and paste it, probably loosing focus on what you've been doing so far.

The main goal of this project is to provide quick way to generate new UUIDs. The initial stage, the Google Chrome Extension, seems to be the easiest way to invoke the generator without need to switch a work context.

More features coming soon!

Installation

Feel free to install the extension from Google Chrome WebStore:

UUID generator Chrome Extension

Development

You can choose whether you'd like to develop the extension locally or with docker.

Locally

Requirements:

  • Node.js 14+

Install npm dependencies and run following scripts to develop the project:

# Install dependencies
npm install

# Run the app locally
npm start

Building the project

npm run-script build

Running the tests

Unit tests

npm test

The project uses Cypress to run browser e2e tests. You can run them locally manually having the app started with npm start with:

npx cypress open

Or just run all the test with:

npx cypress run

For more details on how to use the Cypress, please refer to their docs.

With docker-compose

First you need to install dependencies:

docker-compose run node npm install

Google Analytics tracking

This project provides a very simple Google Analytics page views and events tracing. Following events are registered:

Event (category/action) Labels Description
UI/MODE_SELECT
  • SINGLE
  • MULTI
  • no :pno
Switching between generation screens
UI/REFRESH ~ New single UUID generation
UI/COPY ~ Copying single UUID using copy the button
UI/REFRESH_MULTI SIZE=x Multi UUID generation with specified size
UI/COPY_MULTI SIZE=x Copying multiple UUID using copy the button
UI/OPTION_SELECT E.g.
  • SIZE=x
  • SEPARATORS=comma,newline
  • SEPARATORS=nothing
  • QUOTES=single
Selecting an option in multi generation screen
LINK/CLICK ~ Clicking the external link in the footer

You can configure your tracking key by putting it into .env.local file (see .env for the example and how to use environment variables in React Apps)

Contributing

Please read CONTRIBUTING.md for details on the code of conduct, and the process for submitting pull requests.