Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jilizart/glab-linker-crx

Gitlab linker on any page
https://github.com/jilizart/glab-linker-crx

chrome-extension chrome-extensions gitlab

Last synced: about 5 hours ago
JSON representation

Gitlab linker on any page

Host: GitHub
URL: https://github.com/jilizart/glab-linker-crx
Owner: JiLiZART
License: mit
Created: 2024-12-02T07:09:43.000Z (2 months ago)
Default Branch: main
Last Pushed: 2025-02-03T02:27:33.000Z (about 13 hours ago)
Last Synced: 2025-02-03T03:23:58.295Z (about 12 hours ago)
Topics: chrome-extension, chrome-extensions, gitlab
Language: TypeScript
Homepage: https://chromewebstore.google.com/detail/gitlab-merge-requests-lin/gmadeabfaaioiakicdhdncdpbdhfeihj
Size: 1.16 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 11
Metadata Files:
- Readme: README.boilerplate.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        


    

    

    

![](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black)

![](https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=typescript&logoColor=white)

![](https://badges.aleen42.com/src/vitejs.svg)

![GitHub action badge](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/actions/workflows/build-zip.yml/badge.svg)

![GitHub action badge](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/actions/workflows/lint.yml/badge.svg)





> This boilerplate

> has [Legacy version](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/tree/legacy)



> [!NOTE]

> This project is listed in the [Awesome Vite](https://github.com/vitejs/awesome-vite)

> [!TIP]

> Share storage state between all pages

>

> https://github.com/user-attachments/assets/3b8e189f-6443-490e-a455-4f9570267f8c

## Table of Contents

- [Intro](#intro)

- [Features](#features)

- [Structure](#structure)

    - [ChromeExtension](#structure-chrome-extension)

    - [Packages](#structure-packages)

    - [Pages](#structure-pages)

- [Getting started](#getting-started)

    - [Chrome](#getting-started-chrome)

    - [Firefox](#getting-started-firefox)

- [Install dependency](#install-dependency)

    - [For root](#install-dependency-for-root)

    - [For module](#install-dependency-for-module)

- [Community](#community)

- [Reference](#reference)

- [Star History](#star-history)

- [Contributors](#contributors)

## Intro 

This boilerplate is made for creating chrome extensions using React and Typescript.

> The focus was on improving the build speed and development experience with Vite(Rollup) & Turborepo.

## Features 

- [React18](https://reactjs.org/)

- [TypeScript](https://www.typescriptlang.org/)

- [Tailwindcss](https://tailwindcss.com/)

- [Vite](https://vitejs.dev/)

- [Turborepo](https://turbo.build/repo)

- [Prettier](https://prettier.io/)

- [ESLint](https://eslint.org/)

- [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)

- [Custom I18n Package](/packages/i18n/)

- [Custom HMR(Hot Module Rebuild) Plugin](/packages/hmr/)

- [End to End Testing with WebdriverIO](https://webdriver.io/)

## Getting started: 

1. When you're using Windows run this:

   - `git config --global core.eol lf`

   - `git config --global core.autocrlf input`

   #### This will change eol(End of line) to the same as on Linux/Mac, without this, you will have conflicts with your teammates with those systems and our bash script won't work

2. Clone this repository.

3. Change `extensionDescription` and `extensionName` in `messages.json` file in `packages/i18n/locales` folder.

4. Install pnpm globally: `npm install -g pnpm` (check your node version >= 18.19.1))

5. Run `pnpm install`

### And then, depending on needs:

### For Chrome: 

1. Run:

    - Dev: `pnpm dev` (On windows, you should run as administrator. [(Issue#456)](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/456)

    - Prod: `pnpm build`

2. Open in browser - `chrome://extensions`

3. Check - `Developer mode`

4. Find and Click - `Load unpacked extension`

5. Select - `dist` folder at root

### For Firefox: 

1. Run:

    - Dev: `pnpm dev:firefox`

    - Prod: `pnpm build:firefox`

2. Open in browser - `about:debugging#/runtime/this-firefox`

3. Find and Click - `Load Temporary Add-on...`

4. Select - `manifest.json` from `dist` folder at root



Remember in firefox you add plugin in temporary mode, that's mean it'll disappear after each browser close.

You have to do it on every browser launch.



## Install dependency for turborepo: 

### For root: 

1. Run `pnpm i  -w`

### For module: 

1. Run `pnpm i  -F `

`package` - Name of the package you want to install e.g. `nodemon` \

`module-name` - You can find it inside each `package.json` under the key `name`, e.g. `@extension/content-script`, you can use only `content-script` without `@extension/` prefix

## Env Variables

1. Copy `.example.env` and paste it as `.env` in the same path

2. Add a new record inside `.env`

3. Add this key with type for value to `vite-env.d.ts` (root) to `ImportMetaEnv`

4. Then you can use it with `import.meta.env.{YOUR_KEY}` like with standard [Vite Env](https://vitejs.dev/guide/env-and-mode)

#### If you want to set it for each package independently:

1. Create `.env` inside that package

2. Open related `vite.config.mts` and add `envDir: '.'` at the end of this config

3. Rest steps like above

#### Remember you can't use global and local at the same time for the same package(It will be overwritten)

## Structure 

### ChromeExtension 

Main app with background script, manifest

- `manifest.js` - manifest for chrome extension

- `src/background` - [background script](https://developer.chrome.com/docs/extensions/mv3/background_pages/) for chrome

  extension (`background.service_worker` in

  manifest.json)

- `public/content.css` - content css for user's page injection

### Packages 

Some shared packages

- `dev-utils` - utils for chrome extension development (manifest-parser, logger)

- `i18n` - custom i18n package for chrome extension. provide i18n function with type safety and other validation.

- `hmr` - custom HMR plugin for vite, injection script for reload/refresh, hmr dev-server

- `shared` - shared code for entire project. (types, constants, custom hooks, components, etc.)

- `storage` - helpers for [storage](https://developer.chrome.com/docs/extensions/reference/api/storage) easier integration with, e.g local, session storages

- `tailwind-config` - shared tailwind config for entire project

- `tsconfig` - shared tsconfig for entire project

- `ui` - here's a function to merge your tailwind config with global one, and you can save components here

- `vite-config` - shared vite config for entire project

- `zipper` - By ```pnpm zip``` you can pack ```dist``` folder into ```extension.zip``` inside newly created ```dist-zip```

- `e2e` - By ```pnpm e2e``` you can run end to end tests of your zipped extension on different browsers

### Pages 

- `content` - [content script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) for chrome

  extension (`content_scripts` in manifest.json)

- `content-ui` - [content script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) for render UI in

  user's page (`content_scripts` in manifest.json)

- `content-runtime` - [content runtime script](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts#functionality)

  this can be inject from `popup` like standard `content`

- `devtools` - [devtools](https://developer.chrome.com/docs/extensions/mv3/devtools/#creating) for chrome

  extension (`devtools_page` in manifest.json)

- `devtools-panel` - devtools panel for [devtools](pages/devtools/src/index.ts)

- `new-tab` - [new tab](https://developer.chrome.com/docs/extensions/mv3/override/) for chrome

  extension (`chrome_url_overrides.newtab` in manifest.json)

- `options` - [options](https://developer.chrome.com/docs/extensions/mv3/options/) for chrome extension (`options_page`

  in manifest.json)

- `popup` - [popup](https://developer.chrome.com/docs/extensions/reference/browserAction/) for chrome

  extension (`action.default_popup` in

  manifest.json)

- `side-panel` - [sidepanel(Chrome 114+)](https://developer.chrome.com/docs/extensions/reference/sidePanel/) for chrome

  extension (`side_panel.default_path` in manifest.json)

## Community 

To chat with other community members, you can join the [Discord](https://discord.gg/4ERQ6jgV9a) server.

You can ask questions on that server, and you can also help others.

Also, suggest new features or share any challenges you've faced while developing Chrome extensions!

## Reference 

- [Vite Plugin](https://vitejs.dev/guide/api-plugin.html)

- [ChromeExtension](https://developer.chrome.com/docs/extensions/mv3/)

- [Rollup](https://rollupjs.org/guide/en/)

- [Turborepo](https://turbo.build/repo/docs)

- [Rollup-plugin-chrome-extension](https://www.extend-chrome.dev/rollup-plugin)

## Star History 



 

   

   

   

 



## Contributors 

This Boilerplate is made possible thanks to all of its contributors.



  



---

## Special Thanks To

|  |  |

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

---

Made by [Jonghakseo](https://jonghakseo.github.io/)

Ecosyste.ms: Awesome

https://github.com/jilizart/glab-linker-crx

Awesome Lists containing this project

README

Remember in firefox you add plugin in temporary mode, that's mean it'll disappear after each browser close. You have to do it on every browser launch.

Remember in firefox you add plugin in temporary mode, that's mean it'll disappear after each browser close.

You have to do it on every browser launch.