Much like refined-github, but for gitlab!
works for versions >= 0.9.1
PATH_TO_XPI="$HOME/Library/Application Support/Firefox/Profiles/<YOUR_PROFILE>/extensions/[email protected]"
VERSION="0.9.0"
./verify.sh "$PATH_TO_XPI" "$VERSION"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 [email protected]:kiprasmel/refined-gitlab.git
cd refined-gitlab/
yarn installwait 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 repositoryAnd then load up the built extension:
navigate to
chrome://extensions
- enable "Developer mode" (toggle @ top right)
- click "Load unpacked" (top left)
- navigate to the path where you cloned the repository at first step
- 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)
navigate to
about:debugging#/runtime/this-firefox
- click "Load Temporary Add-on..."
- navigate to the path where you cloned the repository at first step
- navigate to the
distribution/folder - 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)
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/
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 thegitlab.comurl won't work
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).
-
refined-gitlab project ID on gitlab:
20434942 -
refined-gitlab-playground project ID on gitlab:
20690630
- Gitbeaker - GitLab's API wrapper we use here & often contribute to.
- Figma assets - icons, feature screenshots etc.
MIT © Kipras Melnikovas