refined-gitlab

Much like refined-github, but for gitlab!

Install

• Chrome extension

• Firefox add-on

Verify integrity

works for versions >= 0.9.1

PATH_TO_XPI="$HOME/Library/Application Support/Firefox/Profiles/<YOUR_PROFILE>/extensions/refined-gitlab@kipras.org.xpi"
VERSION="0.9.0"
./verify.sh "$PATH_TO_XPI" "$VERSION"

Try it from a local build

Note - downloading a .zip won't work - do exactly as described below (you'll need git and yarn).

Inside your terminal:

git clone https://github.com/kiprasmel/refined-gitlab.git
# or:  git clone git@github.com:kiprasmel/refined-gitlab.git

cd refined-gitlab/

yarn install

wait a bit. This will install the dependencies & clone git submodules

Some features need the API. Either

a) be logged-in to gitlab, or

b) provider a custom API token - inside ./source/utils/config.ts add your gitlab's host URL & API token (found at <gitlab_host>/profile/personal_access_tokens) with scopes api & read_api);

then:

yarn build # you need to do this every time you update something inside this repository

And then load up the built extension:

chrome:

navigate to

chrome://extensions

1. enable "Developer mode" (toggle @ top right)
2. click "Load unpacked" (top left)
3. navigate to the path where you cloned the repository at first step
4. navigate to the distribution/ folder & click "Select"

done! Note that after shutting down the browser, you'll need to load the extension from the distribution/ folder again (begin @ #chrome)

firefox:

navigate to

about:debugging#/runtime/this-firefox

1. click "Load Temporary Add-on..."
2. navigate to the path where you cloned the repository at first step
3. navigate to the distribution/ folder
4. select any file & double-click it

done! Note that after shutting down the browser, you'll need to load the extension from the distribution/ folder again (begin @ #firefox)

Contributing

Here is a short overview to get your familiar with how the project works.

In essence, this extension isn't that different from a regular react application 🤷‍♀️ (except it isn't as complex ☠️☠️)

We use react to render components and handle state logic (hooks included!).

The source/ directory contains a few core folders - react's components/, the extension's features/, their styles/, utils/ and other necessary files.

There are also the background-scripts/ and content-scripts/ directories - they hold & import their respective scripts, which are later loaded by the browser, as defined in the manifest.json file (which is essential to web extensions - that's where you configure stuff (though you'll rarely touch it, if so)).

The extension is compiled via webpack into an IIFE, ready for browsers to execute. It's source is imported in source/scripts-content/refined-gitlab.ts and loaded inside source/utils/globalInit.ts, where all features get loaded by source/Features.ts. The features end up there by adding themselves into the Features array, where, once loaded, get their necessary data and render the resulting JSX.

We'll provide some examples soon™️. For now - feel free to explore the source, especially features/, components/ and utils/

Permission explanations

Permissions can be seen in ./source/manifest.json

• cookies: required for 0-config authentication (the other option is an API token, but that's for power users who want to customize it that way).

• tabs: required to retrieve the current tab and send over the cookie from the background to content script (see ./source/scripts-background/gitlab-session-cookie-sync.ts)

• <all_urls>: required since you have your own self-hosted gitlab instance and the gitlab.com url won't work

Auto authentication

It works like magic -- both for local development (auto sign-in by borrowing your session from another browser), and for production (0-config API auth - just be signed in to GitLab, and all features that require the API will work automatically).

Meta

• refined-gitlab project ID on gitlab: 20434942

• refined-gitlab-playground project ID on gitlab: 20690630

See also

• Gitbeaker - GitLab's API wrapper we use here & often contribute to.
• Figma assets - icons, feature screenshots etc.

License

MIT © Kipras Melnikovas