contributing.md

Contributing

Suggestions and pull requests are highly encouraged! Have a look at the open issues, especially the easy ones.

Notions

• 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 in source/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.

features.add

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 '.';

function init () {
	console.log('✨');
}

void features.add(__filebasename, {
	include: [
		pageDetect.isPR // Find which one you need on https://fregante.github.io/github-url-detection/
	],
	awaitDomReady: false,
	init
});

Here's an example using all of the possible feature.add options:

import React from 'dom-chef';
import select from 'select-dom';
import delegate from 'delegate-it';
import * as pageDetect from 'github-url-detection';

import features from '.';

function append(event: delegate.Event<MouseEvent, HTMLButtonElement>): void {
	event.delegateTarget.after('✨', <div className="rgh-jsx-element">Button clicked!</div>);
}
function init(): void {
	// Events must be set via delegate, unless shortlived
	delegate(document, '.btn', 'click', append);
}

void features.add(__filebasename, {
	/** 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`. `false` makes `init` run right as soon as `body` is found. @default true */
	awaitDomReady: false,

	/** Rarely needed: When pressing the back button, the DOM and listeners are still there, so normally `init` isn’t called again. If this is true, it’s called anyway. @default false */
	repeatOnBackButton: true,
	include: [
		pageDetect.isUserProfile,
		pageDetect.isRepo
	],
	exclude: [
		pageDetect.isOwnUserProfile
	],
	init
}, {
	include: [
		pageDetect.isGist
	],
	init: () => console.log('Additional listener for gist pages!')
});

Requirements

Node.js version 13 or later is required.

Workflow

First clone:

git clone https://github.com/sindresorhus/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.

Loading into the browser

Once built, load it in the browser of your choice.

npm run start # Open extension in Chrome

npm run start:firefox # Open extension in Firefox

Or you can load it manually in Chrome or Firefox.