1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
# Contributing
Suggestions and pull requests are highly encouraged! Have a look at the [open issues](https://github.com/refined-github/refined-github/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22+sort%3Areactions-%2B1-desc), especially [the easy ones](https://github.com/refined-github/refined-github/issues?q=is%3Aissue+is%3Aopen+label%3A%22small%22+sort%3Areactions-%2B1-desc).
## Notions
- You will need to be familiar with [npm](https://docs.npmjs.com/getting-started/) and TypeScript to build this extension.
- The extension can be loaded into Chrome or Firefox manually ([See notes below](#loading-into-the-browser))
- [JSX](https://reactjs.org/docs/introducing-jsx.html) is used to create DOM elements.
- All the [latest DOM APIs](https://github.com/WebReflection/dom4#features) 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`](https://github.com/refined-github/refined-github/tree/main/source/features) and it's imported in [`source/refined-github.ts`](https://github.com/refined-github/refined-github/blob/main/source/refined-github.ts).
- See what a feature [looks like](https://github.com/refined-github/refined-github/blob/main/source/features/user-profile-follower-badge.tsx).
- Follow [the styleguide](https://github.com/refined-github/refined-github/blob/main/readme.md#L80) 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](https://primer.style/css) might come in useful.
## `features.add`
The simplest usage of `feature.add` is the following. This will be run instantly on all page-loads:
```ts
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:
```tsx
import React from 'dom-chef';
import select 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!'),
});
```
## Requirements
[Node.js](https://nodejs.org/en/download/) version 16 or later is required.
## Workflow
First clone:
```sh
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:
```sh
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 with [web-ext](https://github.com/mozilla/web-ext):
```sh
npx web-ext run --target=chromium # Open extension in Chrome
```
```sh
npx web-ext run # Open extension in Firefox
```
Or you can [load it manually in Chrome](https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/#google-chrome-opera-vivaldi) or [Firefox](https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/#mozilla-firefox).
## Reverse-engineering GitHub
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:
```js
d = Node.prototype.dispatchEvent;
Node.prototype.dispatchEvent = function (...a) {
console.log(...a);
// debugger; // Uncomment when necessary
d.apply(this, a);
};
```
<img width="379" alt="screen" src="https://user-images.githubusercontent.com/1402241/79168882-406ea100-7deb-11ea-9e9c-ad657202422f.png">
|
