CARVIEW |
Navigation Menu
-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Contributing
-
npm run watch
starts the build + watch -
npm run fix
attempts to fix all formatting, linting, snapshots at once -
npm run new -- your-feature-name
will create a new feature file so you can jump right in.
The extension is output into the distribution
folder. See below how you can load the extension into the browser.
Tip
Don't worry about failing feature
screenshot tests until the PR is finalized/approved. The style/behavior needs to be verified first.
See the dedicated page: https://github.com/refined-github/refined-github/wiki/%22Can-you-add-this-feature%3F%22
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.
PRs for new features that were not discussed/accepted first are very likely to be closed on sight, please open an issue first.
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!'),
});
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);
};

- feature names should be 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
- Use the GitHub's light theme, not dark
- Zoom the page at 200% before taking a screenshot (native retina screens are fine at 100%)
- Keep the screenshot focused on the change, but with just enough context to know where it's supposed to appear
- Maybe clean up the page by disabling nearby features or hiding clutter, e.g. everything below this tab bar has been hidden.
- If changes are subtle, add a before/after comparison using the arrows from this template
- You can use colored arrows to point to what's new exactly
- If it's not clear from a static screenshot, consider recording a very short GIF with LICEcap
Tip
In the Options page, alt-click the "Screenshot" link to see all the screenshots at once and use it as inspiration.
- Starts with: "(Refined GitHub) ..."
- Ends with period (inside link or parens, if present, like this.)
- Keyboard shortcuts must follow this stile:
Adds a keyboard shortcut to ...: <kbd>key1</kbd> <kbd>key2</kbd>
Adds keyboard shortcuts to ...: <kbd>a</kbd> and <kbd>alt</kbd> <kbd>a</kbd>
- Use smart apostrophes: ’ instead of '
- Keep it concise.