https://github.com/baurine/gitlab-time-report
A chrome extension for reporting gitlab issues spent time, made by React+TypeScript+Webpack+Firebase+Bulma
https://github.com/baurine/gitlab-time-report
chrome-extension firebase react typescript
Last synced: about 1 year ago
JSON representation
A chrome extension for reporting gitlab issues spent time, made by React+TypeScript+Webpack+Firebase+Bulma
- Host: GitHub
- URL: https://github.com/baurine/gitlab-time-report
- Owner: baurine
- Created: 2018-06-13T09:06:40.000Z (about 8 years ago)
- Default Branch: develop
- Last Pushed: 2019-04-23T06:34:22.000Z (about 7 years ago)
- Last Synced: 2025-03-22T17:13:17.622Z (over 1 year ago)
- Topics: chrome-extension, firebase, react, typescript
- Language: TypeScript
- Homepage:
- Size: 3.17 MB
- Stars: 17
- Watchers: 0
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GitLab Time Report Chrome Extension
This is a chrome extension used to generate **realtime** (thanks for Firebase) spent time report for gitlab issues and projects.
Note: the gitlab is deployed and hosted by yourself, for example: , not the public .
This extension is developed by:
- React
- TypeScript
- Webpack
- Firebase
- Bulma.css
## What can it do
(I use the asterisk to hide the real information.)
1. A realtime report for a single issue in each issue page
1. A realtime report for all projects/users in a dashboard page
1. A realtime report for all issues of a project in a dashboard page
1. A shortcut button to log today's spent time to resolve the timezone problem if your gitlab server deploys in another far timezone
## How does the extension work
The extension is injected into every gitlab issue page, it parses the page content and listens to its changes, stores the spent time logs to Firebase realtime database - Firestore.
## How to start
Because of the data privacy, I think you maybe don't want to store the data to others' server, so this extension won't be published public, it is recommended to build this extension by yourself and use inside the company only.
### Setting Firebase
1. Create a project in Firebase console:
1. Enable "Email/Password" type for authentication
1. Choose Firestore as realtime database
1. Config firestore prerequisite collections and documents
Add `settings` collection and `allowed_domains`, `versions` documents inside it, you can know their usage from their names.
`allowed_domains` is used to config which domain this extension should work for, it should be your gitlab server domain.
`versions` is used to config minimal version this extension support, I use this value to force user to upgrade the extension if its version is lower than `min` value (forgive me).
1. Config firestore access rule
The default firestore access rule is that the data is disabled or enable for all users, we should change it to only can be accessed by users inside the company.
service cloud.firestore {
match /databases/{database}/documents {
function signInAndEmailVerified() {
return request.auth != null &&
request.auth.token.email_verified &&
request.auth.token.email.matches('.*@company[.]com');
}
match /{document=**} {
allow read, write: if signInAndEmailVerified();
}
match /settings/{setting} {
allow read: if true;
allow write: if false;
}
}
}
Note, you need to change the email format '.*@company[.]com' to yourself email format.
We config the `settings` collection only can be read but can't be written, for other collections, they only can be read and written by users whose email matches your company's email format.
1. Copy firebase configuration to `chrome_ext/src/js/firebase/firebase-config.ts`
// firebase-config.ts
export default {
apiKey: "***",
authDomain: "***",
databaseURL: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***"
}
### Build and install extension
1. Build
$ cd chrome_ext
$ npm install
$ npm run build
the extension is generated in `dist` folder, send this folder to your colleagues.
2. Install
open `chrome://extensions` page, turn on "Developer mode", click "Load unpacked" button, choose the `dist` folder just generated.
### Use extension
1. Register and login following the instruction after clicking the extension icon
you have big chance to meet the permission error after the first login, don't worry, just try sign out and login again.
2. It will automatically work in the issue or merge request page
in the dashboard page, you will meet the `The query requires an index` error in the first time query, don't worry, just open the url in the message to create the index.
## Notes
- [GitLab Time Report Chrome Extension Note](./notes/chrome-extension-react.md)
- Config multiple js entries by Webpack
- Use TypeScript
- Make it as a chrome extension
- Login/Signup with Firebase Auth
- Store/Access data in Firebase Firestore
## Related projects
- [cf-firebase-demo](https://github.com/baurine/cf-firebase-demo)
- [Gitlab Issue Time Tracker Chrome Extension](https://github.com/baurine/gitlab-issue-time-tracker-ext)
## Release Notes
1. 0.2.0
- Because Chrome prevents CROS request in content script from Chrome 73, so we changed our code much, separated all CORS requests from the content script to background script.
- [Cross-Origin Read Blocking (CORB)](https://www.chromestatus.com/feature/5629709824032768)
- [Changes to Cross-Origin Requests in Chrome Extension Content Scripts](https://www.chromium.org/Home/chromium-security/extension-content-script-fetches)
## Thanks
Thanks to my colleague @joey who designed the icon for the project.