-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Contributing
If you're willing to contribute a new feature, make sure that the feature has already been requested and accepted with the help wanted label. You can take a look at the small issues to get started.
- You will need to be familiar with npm and TypeScript to build this extension.
- The extension can be loaded into Chrome or Firefox manually (See notes below)
- JSX is used to create DOM elements.
- All the latest DOM APIs and JavaScript features are available because the extension only has to work in the latest Chrome and Firefox. 🎉
- Each JavaScript feature lives in its own file under
source/features
and it's imported insource/refined-github.ts
. - See what a feature looks like.
- Follow the styleguide that appears in the Readme's source to write readable descriptions.
- Refined GitHub tries to integrate as best as possible, so GitHub's own styleguide might come in useful.
This page contains some information regarding adding new features.
See the dedicated page: https://github.com/refined-github/refined-github/wiki/%22Can-you-add-this-feature%3F%22
- feature names should 2-4 words long so that we can mention them in commit (impossible to mention or remember 7-word-long features like
highlight-deleted-and-added-files-in-diffs
) - feature names should not be super specific because feature evolve over time: https://ntietz.com/blog/name-your-projects-cutesy-things/
- avoid renaming features because every rename breaks the search on the repo
You can start with a new feature by running:
npm run new -- your-feature-name
The simplest usage of feature.add
is the following. This will be run instantly on all page-loads:
import * as pageDetect from 'github-url-detection';
import features from '../feature-manager';
function init(): void {
console.log('✨');
}
void features.add(import.meta.url, {
include: [
pageDetect.isPR, // Find which one you need on https://refined-github.github.io/github-url-detection/
],
awaitDomReady: true,
init,
});
Here's an example using all of the possible feature.add
options:
import React from 'dom-chef';
import {$, $$, elementExists} from 'select-dom';
import * as pageDetect from 'github-url-detection';
import delegate, {DelegateEvent} from 'delegate-it';
import features from '../feature-manager';
function append(event: DelegateEvent<MouseEvent, HTMLButtonElement>): void {
event.delegateTarget.after('✨', <div className="rgh-jsx-element">Button clicked!</div>);
}
function init(signal: AbortSignal): void {
// Events must be set via delegate, unless shortlived
delegate('.btn', 'click', append, {signal});
}
void features.add(import.meta.url, {
// This only adds the shortcut to the help screen, it doesn't enable it.
shortcuts: {
'↑': 'Edit your last comment'
},
// Whether to wait for DOM ready before running `init`. By default, it runs `init` as soon as `body` is found. @default false
awaitDomReady: true,
// Every one of these must match
asLongAs: [
pageDetect.isForkedRepo,
],
// At least one of these must match
include: [
pageDetect.isSingleFile,
pageDetect.isRepoTree,
pageDetect.isEditingFile,
],
// None of these must match
exclude: [
pageDetect.isRepoRoot,
],
init,
}, {
include: [
pageDetect.isGist
],
init: () => console.log('Additional listener for gist pages!'),
});
First clone:
git clone https://github.com/refined-github/refined-github
cd refined-github
npm install
When working on the extension or checking out branches, use this to have it constantly build your changes:
npm run watch # Listen to file changes and automatically rebuild
Then load or reload it into the browser to see the changes.
Once built, load it in the browser of your choice with web-ext:
npx web-ext run --target=chromium # Open extension in Chrome
npx web-ext run # Open extension in Firefox
Or you can load it manually in Chrome or Firefox.
GitHub fires several custom events that we can listen to. You can run this piece of code in the console to start seeing every event being fired:
d = Node.prototype.dispatchEvent;
Node.prototype.dispatchEvent = function (...a) {
console.log(...a);
// debugger; // Uncomment when necessary
d.apply(this, a);
};
![screen](https://user-images.githubusercontent.com/1402241/79168882-406ea100-7deb-11ea-9e9c-ad657202422f.png)