Suggestions and pull requests are highly encouraged! Have a look at the open issues, especially the easy ones.
- 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/content.ts
. - Some GitHub pages are loaded via AJAX/PJAX, so some features use the special
onAjaxedPages
loader (see it as a custom "on DOM ready"). - 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.
The simplest usage of feature.add
is the following. This will be run instantly on all page-loads (but not on ajax loads):
import features from '../libs/features';
function init () {
console.log('✨');
}
features.add({
id: __featureName__,
description: 'Simplify the GitHub interface and adds useful features',
init
});
Here's an example using all of the possible feature.add
options:
import React from 'dom-chef';
import select from 'select-dom';
import features from '../libs/features';
function log() {
console.log('✨', <div className="rgh-jsx-element"/>);
}
function init(): void {
select('.btn')!.addEventListener('click', log);
}
function deinit(): void {
select('.btn')!.removeEventListener('load', log);
}
features.add({
id: __featureName__,
description: 'Simplify the GitHub interface and adds useful features',
screenshot: 'https://user-images.githubusercontent.com/1402241/58238638-3cbcd080-7d7a-11e9-80f6-be6c0520cfed.jpg',
shortcuts: { // This only adds the shortcut to the help screen, it doesn't enable it
'↑': 'Edit your last comment'
},
include: [
features.isUserProfile,
features.isRepo
],
exclude: [
features.isOwnUserProfile
],
load: features.onDomReady, // Wait for DOM ready
// load: features.onAjaxedPages, // Or: Wait for DOM ready AND run on all AJAXed loads
// load: features.onNewComments, // Or: Wait for DOM ready AND run on all AJAXed loads AND watch for new comments
deinit, // Rarely needed
init
});
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 for file changes and automatically rebuild
Then load or reload it into the browser to see the changes (this does not happen automatically).
Once built, load it in the browser of your choice:
Chrome | Firefox |
---|---|
|
web-ext run :
npm run watch:firefox |