Refined GitHub [![Chrome version][badge-cws]][link-cws] [![Firefox version][badge-amo]][link-amo] [![Deployment][badge-travis]][link-travis]
2 |
3 | [badge-cws]: https://img.shields.io/chrome-web-store/v/hlepfoohegkhhmjieoechaddaejaokhf.svg?label=chrome
4 | [badge-amo]: https://img.shields.io/amo/v/refined-github-.svg?label=firefox
5 | [badge-travis]: https://img.shields.io/travis/sindresorhus/refined-github/master.svg?label=deployment
6 | [link-cws]: https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf "Version published on Chrome Web Store"
7 | [link-amo]: https://addons.mozilla.org/en-US/firefox/addon/refined-github-/ "Version published on Mozilla Add-ons"
8 | [link-travis]: https://travis-ci.org/sindresorhus/refined-github
9 |
10 | > Browser extension that simplifies the GitHub interface and adds useful features
11 |
12 | **Discuss it on [Product Hunt](https://www.producthunt.com/posts/refined-github)** 🦄
13 |
14 | We use GitHub a lot and notice many dumb annoyances we'd like to fix. So here be dragons.
15 |
16 | Our hope is that GitHub will notice and implement some of these much needed improvements. So if you like any of these improvements, please email [GitHub support](mailto:support@github.com) about doing it.
17 |
18 | GitHub Enterprise is also supported by [authorizing your own domain in the options](https://github.com/sindresorhus/refined-github/pull/450).
19 |
20 | - **[What's new lately](https://blog.sindresorhus.com/whats-new-in-refined-github-836d05582df7)**
21 | - [Original announcement](https://blog.sindresorhus.com/refined-github-21185789685d)
22 |
23 |
24 | ## Install
25 |
26 | - [**Chrome** extension][link-cws]
27 | - [**Firefox** add-on][link-amo]
28 | - Opera - Use [this Opera extension](https://addons.opera.com/en/extensions/details/download-chrome-extension-9/) to install the Chrome version.
29 |
30 | ## Highlights
31 |
32 | | 35 | Dashboard cleanup 36 | | 37 |
|---|
41 | 
42 | |
43 |
|
49 | Mark issues and pull requests as unread 50 | (They will reappear in Notifications) 51 | |
52 | 53 | Preserves the original Markdown when you copy text from comments 54 | | 55 |
|---|---|
59 | 
60 | |
61 |
62 | 
63 | |
64 |
| 70 | Reaction avatars 71 | | 72 |73 | Moves destructive buttons in commenting forms away from the primary button 74 | | 75 |
|---|---|
79 | 
80 | |
81 |
82 | 
83 | |
84 |
| 90 | Linkifies issue/PR references in code, comments and titles 91 | | 92 ||
|---|---|
96 | 
97 | |
98 |
99 | 
100 | |
101 |
| Chrome | 209 |Firefox | 210 |
|---|---|
213 |
|
220 |
221 |
|
227 |
16 |
17 |
18 | );
19 | const viewButton = select('[aria-label^="View"]', file);
20 | viewButton.classList.add('BtnGroup-item');
21 | viewButton.replaceWith(group);
22 | group.append(viewButton);
23 | }
24 | }
25 |
26 | export default () => {
27 | observeEl('#files', addFilePathCopyBtn, {childList: true, subtree: true});
28 | };
29 |
--------------------------------------------------------------------------------
/src/features/copy-file.js:
--------------------------------------------------------------------------------
1 | import select from 'select-dom';
2 | import {h} from 'dom-chef';
3 | import {groupButtons} from '../libs/utils';
4 |
5 | export default function () {
6 | // This selector skips binaries + markdowns with code
7 | for (const code of select.all('.file .blob-wrapper > .highlight:not(.rgh-copy-file)')) {
8 | code.classList.add('rgh-copy-file');
9 | const file = code.closest('.file');
10 |
11 | // Enable copy behavior
12 | file.classList.add('js-zeroclipboard-container');
13 | code.classList.add('js-zeroclipboard-target');
14 |
15 | // Prepend to list of buttons
16 | const firstAction = select('.file-actions .btn', file);
17 | firstAction.before(
18 |
19 | );
20 |
21 | // Group buttons if necessary
22 | groupButtons(firstAction.parentNode.children);
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/features/copy-markdown.js:
--------------------------------------------------------------------------------
1 | import toMarkdown from 'to-markdown';
2 | import copyToClipboard from 'copy-text-to-clipboard';
3 |
4 | const unwrapContent = content => content;
5 | const unshortenRegex = /^https:[/][/](www[.])?|[/]$/g;
6 |
7 | const converters = [
8 | // Drop unnecessary elements
9 | //
153 |
158 |
159 |
167 | );
168 |
169 | $('.notifications-list').prepend(list);
170 | }
171 |
172 | const list = $(`a.notifications-repo-link[title="${repository}"]`).parent().siblings('ul.notifications');
173 |
174 | const usernames = participants
175 | .map(participant => participant.username)
176 | .join(', ');
177 |
178 | const avatars = participants
179 | .map(participant => {
180 | return 160 | 161 | {repository} 162 | 163 |
164 | 165 |-
194 |
- 195 | 198 | 199 | 200 |
- 201 | 204 | 205 | 206 |
-
207 |
208 |
209 |
210 | -
211 | 212 | {avatars} 213 |214 |
215 |
286 | Mark all as read
287 |
288 |
298 | );
299 |
300 | $(document).on('click', '#clear-local-notification', () => {
301 | storage.set([]);
302 | location.reload();
303 | });
304 | }
305 |
306 | function updateLocalNotificationsCount() {
307 | const unreadCount = select('#notification-center .filter-list a[href="/notifications"] .count');
308 | const githubNotificationsCount = Number(unreadCount.textContent);
309 | const localNotifications = storage.get();
310 |
311 | if (localNotifications.length > 0) {
312 | unreadCount.textContent = githubNotificationsCount + localNotifications.length;
313 | }
314 | }
315 |
316 | function updateLocalParticipatingCount() {
317 | const unreadCount = select('#notification-center .filter-list a[href="/notifications/participating"] .count');
318 | const githubNotificationsCount = Number(unreadCount.textContent);
319 | const myUserName = getUsername();
320 |
321 | const participatingNotifications = storage.get()
322 | .filter(notification => isParticipatingNotification(notification, myUserName));
323 |
324 | if (participatingNotifications.length > 0) {
325 | unreadCount.textContent = githubNotificationsCount + participatingNotifications.length;
326 | }
327 | }
328 |
329 | async function setup() {
330 | storage = await new SynchronousStorage(
331 | () => {
332 | return browser.storage.local.get({
333 | unreadNotifications: []
334 | }).then(storage => storage.unreadNotifications);
335 | },
336 | unreadNotifications => {
337 | return browser.storage.local.set({unreadNotifications});
338 | }
339 | );
340 | gitHubInjection(() => {
341 | destroy();
342 |
343 | // Remove old data from previous storage
344 | // Drop code in 2018
345 | localStorage.removeItem('_unreadNotifications_migrated');
346 | localStorage.removeItem('unreadNotifications');
347 |
348 | if (pageDetect.isNotifications()) {
349 | renderNotifications();
350 | addCustomAllReadBtn();
351 | updateLocalNotificationsCount();
352 | updateLocalParticipatingCount();
353 | $(document).on('click', '.js-mark-read', markNotificationRead);
354 | $(document).on('click', '.js-mark-all-read', markAllNotificationsRead);
355 | $(document).on('click', '.js-delete-notification button', updateUnreadIndicator);
356 | $(document).on('click', 'form[action="/notifications/mark"] button', () => {
357 | storage.set([]);
358 | });
359 | } else if (pageDetect.isPR() || pageDetect.isIssue()) {
360 | markRead(location.href);
361 | addMarkUnreadButton();
362 | }
363 |
364 | updateUnreadIndicator();
365 | });
366 | }
367 |
368 | function destroy() {
369 | $(document).off('click', '.js-mark-unread', markUnread);
370 | $('.js-mark-unread').remove();
371 | }
372 |
373 | export default {
374 | setup,
375 | destroy
376 | };
377 |
--------------------------------------------------------------------------------
/src/features/more-dropdown.js:
--------------------------------------------------------------------------------
1 | import select from 'select-dom';
2 | import {h} from 'dom-chef';
3 | import * as icons from '../libs/icons';
4 | import * as pageDetect from '../libs/page-detect';
5 |
6 | const repoUrl = pageDetect.getRepoURL();
7 |
8 | export default function () {
9 | if (select.exists('.refined-github-more')) {
10 | return;
11 | }
12 |
13 | // Last tab, but before settings
14 | const insertionPoint = select.all('.reponav-item:not([href$="settings"])').pop();
15 |
16 | insertionPoint.after(
17 |
39 | );
40 |
41 | // Remove native Insights tab
42 | const insightsTab = select('[data-selected-links~="pulse"]');
43 | if (insightsTab) {
44 | insightsTab.remove();
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/features/move-account-switcher-to-sidebar.js:
--------------------------------------------------------------------------------
1 | import select from 'select-dom';
2 | import {safeElementReady} from '../libs/utils';
3 |
4 | export default function () {
5 | safeElementReady('.dashboard-sidebar').then(sidebar => {
6 | const switcher = select('.account-switcher');
7 | if (sidebar && switcher) {
8 | sidebar.prepend(switcher);
9 | }
10 | });
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/src/features/move-marketplace-link-to-profile-dropdown.js:
--------------------------------------------------------------------------------
1 | import {h} from 'dom-chef';
2 | import select from 'select-dom';
3 |
4 | export default function () {
5 | const lastDivider = select.all('.user-nav .dropdown-divider').pop();
6 | if (!lastDivider) {
7 | return;
8 | }
9 | const marketplaceLink = Marketplace;
10 | const divider = ;
11 | lastDivider.before(divider);
12 | lastDivider.before(marketplaceLink);
13 | }
14 |
15 |
--------------------------------------------------------------------------------
/src/features/op-labels.js:
--------------------------------------------------------------------------------
1 | import select from 'select-dom';
2 | import {h} from 'dom-chef';
3 | import * as pageDetect from '../libs/page-detect';
4 | import {getUsername} from '../libs/utils';
5 |
6 | export default () => {
7 | let op;
8 | if (pageDetect.isPR()) {
9 | const titleRegex = /^(?:.+) by (\S+) · Pull Request #(\d+)/;
10 | [, op] = titleRegex.exec(document.title) || [];
11 | } else {
12 | op = select('.timeline-comment-header-text .author').textContent;
13 | }
14 |
15 | let newComments = $(`.js-comment:not(.refined-github-op)`).has(`strong .author[href="/${op}"]`).get();
16 |
17 | if (!pageDetect.isPRFiles()) {
18 | newComments = newComments.slice(1);
19 | }
20 |
21 | if (newComments.length === 0) {
22 | return;
23 | }
24 |
25 | const type = pageDetect.isPR() ? 'pull request' : 'issue';
26 | const tooltip = `${op === getUsername() ? 'You' : 'This user'} submitted this ${type}.`;
27 |
28 | const placeholders = select.all(`
29 | .timeline-comment .timeline-comment-header-text,
30 | .review-comment .comment-body
31 | `, newComments);
32 |
33 | for (const placeholder of placeholders) {
34 | placeholder.before(
35 |
36 | Original Poster
37 |
38 | );
39 | }
40 |
41 | for (const el of newComments) {
42 | el.classList.add('refined-github-op');
43 | }
44 | };
45 |
--------------------------------------------------------------------------------
/src/features/open-all-notifications.js:
--------------------------------------------------------------------------------
1 | import select from 'select-dom';
2 | import {h} from 'dom-chef';
3 | import {isNotifications} from '../libs/page-detect';
4 |
5 | function openNotifications() {
6 | const urls = select.all('.js-notification-target').map(el => el.href);
7 | browser.runtime.sendMessage({
8 | urls,
9 | action: 'openAllInTabs'
10 | });
11 | for (const listItem of select.all('.list-group .list-group-item')) {
12 | listItem.classList.add('read');
13 | }
14 | }
15 |
16 | export default function () {
17 | if (!isNotifications()) {
18 | return;
19 | }
20 | const unreadCount = select.all('.js-notification-target').length;
21 |
22 | if (unreadCount === 0) {
23 | return;
24 | }
25 |
26 | const openButton = Open all in tabs;
27 |
28 | // Make a button group
29 | const markAsReadButton = select('[href="#mark_as_read_confirm_box"]');
30 | markAsReadButton.parentNode.classList.add('BtnGroup');
31 | markAsReadButton.classList.add('BtnGroup-item');
32 | markAsReadButton.before(openButton);
33 |
34 | // Move out the extra node that messes with .BtnGroup-item:last-child
35 | document.body.append(select('#mark_as_read_confirm_box'));
36 |
37 | if (unreadCount < 10) {
38 | openButton.addEventListener('click', openNotifications);
39 | } else {
40 | // Add confirmation modal
41 | openButton.setAttribute('rel', 'facebox');
42 | document.body.append(
43 |
289 |
297 | Are you sure?
290 | 291 |Are you sure you want to mark all unread notifications as read?
292 | 293 | 296 |
44 |
52 | );
53 |
54 | $(document).on('click', '#open-all-notifications', () => {
55 | openNotifications();
56 | select('.js-facebox-close').click(); // Close modal
57 | });
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/features/open-ci-details-in-new-tab.js:
--------------------------------------------------------------------------------
1 | import select from 'select-dom';
2 |
3 | export default function () {
4 | const CIDetailsLinks = select.all('a.status-actions');
5 | for (const link of CIDetailsLinks) {
6 | link.setAttribute('target', '_blank');
7 | link.setAttribute('rel', 'noopener');
8 | }
9 | }
10 |
11 |
--------------------------------------------------------------------------------
/src/features/preserve-whitespace-option-in-nav.js:
--------------------------------------------------------------------------------
1 | import select from 'select-dom';
2 |
3 | // When navigating with next/previous in review mode, preserve whitespace option.
4 | export default function () {
5 | const navLinks = select.all('.commit > .BtnGroup.float-right > a.BtnGroup-item');
6 | if (navLinks.length === 0) {
7 | return;
8 | }
9 |
10 | const url = new URL(location.href);
11 | const hidingWhitespace = url.searchParams.get('w') === '1';
12 |
13 | if (hidingWhitespace) {
14 | for (const a of navLinks) {
15 | const linkUrl = new URL(a.href);
16 | linkUrl.searchParams.set('w', '1');
17 | a.href = linkUrl;
18 | }
19 | }
20 | }
21 |
22 |
--------------------------------------------------------------------------------
/src/features/reactions-avatars.js:
--------------------------------------------------------------------------------
1 | import debounce from 'debounce-fn';
2 | import select from 'select-dom';
3 | import {h} from 'dom-chef';
4 | import {getUsername, flatZip} from '../libs/utils';
5 |
6 | const arbitraryAvatarLimit = 36;
7 | const approximateHeaderLength = 3; // Each button header takes about as much as 3 avatars
8 |
9 | function getParticipants(container) {
10 | const currentUser = getUsername();
11 | return container.getAttribute('aria-label')
12 | .replace(/ reacted with.*/, '')
13 | .replace(/,? and /, ', ')
14 | .replace(/, \d+ more/, '')
15 | .split(', ')
16 | .filter(username => username !== currentUser)
17 | .map(username => ({
18 | container,
19 | username
20 | }));
21 | }
22 |
23 | function add() {
24 | for (const list of select.all(`.has-reactions .comment-reactions-options:not(.rgh-reactions)`)) {
25 | const avatarLimit = arbitraryAvatarLimit - (list.children.length * approximateHeaderLength);
26 |
27 | const participantByReaction = [].map.call(list.children, getParticipants);
28 | const flatParticipants = flatZip(participantByReaction, avatarLimit);
29 |
30 | for (const participant of flatParticipants) {
31 | participant.container.append(
32 |
33 | Are you sure?
45 | 46 |Are you sure you want to open {unreadCount} tabs?
47 | 48 | 51 |
34 |
35 | );
36 | }
37 |
38 | list.classList.add('rgh-reactions');
39 |
40 | // Overlap reaction avatars when near the avatarLimit
41 | if (flatParticipants.length > avatarLimit * 0.9) {
42 | list.classList.add('rgh-reactions-near-limit');
43 | }
44 | }
45 | }
46 |
47 | // Feature testable on
48 | // https://github.com/babel/babel/pull/3646
49 | export default () => {
50 | add();
51 | document.addEventListener('socket:message', debounce(add, {wait: 100}));
52 | };
53 |
--------------------------------------------------------------------------------
/src/features/remove-diff-signs.js:
--------------------------------------------------------------------------------
1 | /* Lasciate ogne speranza, voi ch'entrate. */
2 | import select from 'select-dom';
3 | import {observeEl} from '../libs/utils';
4 |
5 | function removeDiffSigns() {
6 | for (const line of select.all('.diff-table tr:not(.refined-github-diff-signs)')) {
7 | line.classList.add('refined-github-diff-signs');
8 | for (const code of select.all('.blob-code-inner', line)) {
9 | // Drop -, + or space
10 | code.firstChild.textContent = code.firstChild.textContent.slice(1);
11 |
12 | // If a line is empty, the next line will collapse
13 | if (code.textContent.length === 0) {
14 | code.prepend(' ');
15 | }
16 | }
17 | }
18 | }
19 |
20 | function removeSelectableWhiteSpaceFromDiffs() {
21 | for (const commentBtn of select.all('.add-line-comment')) {
22 | for (const node of commentBtn.childNodes) {
23 | if (node.nodeType === Node.TEXT_NODE) {
24 | node.remove();
25 | }
26 | }
27 | }
28 | }
29 |
30 | function removeDiffSignsAndWatchExpansions() {
31 | removeSelectableWhiteSpaceFromDiffs();
32 | removeDiffSigns();
33 | for (const file of $('.diff-table:not(.rgh-watching-lines)').has('.diff-expander')) {
34 | file.classList.add('rgh-watching-lines');
35 | observeEl(file.tBodies[0], removeDiffSigns);
36 | }
37 | }
38 |
39 | export default function () {
40 | const diffElements = select('.js-discussion, #files');
41 | if (diffElements) {
42 | observeEl(diffElements, removeDiffSignsAndWatchExpansions, {childList: true, subtree: true});
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/features/remove-projects-tab.js:
--------------------------------------------------------------------------------
1 | import select from 'select-dom';
2 |
3 | export default function () {
4 | const projectsTab = select('.js-repo-nav .reponav-item[data-selected-links^="repo_projects"]');
5 | if (projectsTab && projectsTab.querySelector('.Counter, .counter').textContent === '0') {
6 | projectsTab.remove();
7 | }
8 | }
9 |
10 |
--------------------------------------------------------------------------------
/src/features/remove-upload-files-button.js:
--------------------------------------------------------------------------------
1 | import select from 'select-dom';
2 | import * as pageDetect from '../libs/page-detect';
3 |
4 | const repoUrl = pageDetect.getRepoURL();
5 |
6 | export default () => {
7 | if (pageDetect.isRepoRoot()) {
8 | const uploadFilesButton = select(`.file-navigation a[href^="/${repoUrl}/upload"]`);
9 | if (uploadFilesButton) {
10 | uploadFilesButton.remove();
11 | }
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/src/features/scroll-to-top-on-collapse.js:
--------------------------------------------------------------------------------
1 | import select from 'select-dom';
2 |
3 | export default () => {
4 | const toolbar = select('.pr-toolbar');
5 |
6 | $('.js-diff-progressive-container').on('details:toggled', '.file', ({target}) => {
7 | const elOffset = target.getBoundingClientRect().top;
8 | const toolbarHeight = toolbar.getBoundingClientRect().top;
9 |
10 | // Bring element in view if it's above the PR toolbar
11 | if (elOffset < toolbarHeight) {
12 | window.scrollBy(0, elOffset - toolbarHeight);
13 | }
14 | });
15 | };
16 |
--------------------------------------------------------------------------------
/src/features/show-names.js:
--------------------------------------------------------------------------------
1 | import {h} from 'dom-chef';
2 | import select from 'select-dom';
3 | import domify from '../libs/domify';
4 | import {getUsername, groupBy} from '../libs/utils';
5 |
6 | const storageKey = 'cachedNames';
7 |
8 | const getCachedUsers = async () => {
9 | const keys = await browser.storage.local.get({
10 | [storageKey]: {}
11 | });
12 | return keys[storageKey];
13 | };
14 |
15 | const fetchName = async username => {
16 | // /following/you_know is the lightest page we know
17 | // location.origin is required for Firefox #490
18 | const pageHTML = await fetch(`${location.origin}/${username}/following`)
19 | .then(res => res.text());
20 |
21 | const el = domify(pageHTML).querySelector('h1 strong');
22 |
23 | // The full name might not be set
24 | const fullname = el && el.textContent.slice(1, -1);
25 | if (!fullname || fullname === username) {
26 | // It has to be stored as false or else it will be fetched every time
27 | return false;
28 | }
29 | return fullname;
30 | };
31 |
32 | export default async () => {
33 | const myUsername = getUsername();
34 | const cache = await getCachedUsers();
35 |
36 | // {sindresorhus: [a.author, a.author], otheruser: [a.author]}
37 | const selector = `.js-discussion .author:not(.refined-github-fullname)`;
38 | const usersOnPage = groupBy(select.all(selector), el => el.textContent);
39 |
40 | const fetchAndAdd = async username => {
41 | if (typeof cache[username] === 'undefined' && username !== myUsername) {
42 | cache[username] = await fetchName(username);
43 | }
44 |
45 | for (const usernameEl of usersOnPage[username]) {
46 | const commentedNode = usernameEl.parentNode.nextSibling;
47 | if (commentedNode && commentedNode.textContent.includes('commented')) {
48 | commentedNode.remove();
49 | }
50 |
51 | usernameEl.classList.add('refined-github-fullname');
52 |
53 | if (cache[username] && username !== myUsername) {
54 | // If it's a regular comment author, add it outside
55 | // otherwise it's something like "User added some commits"
56 | const insertionPoint = usernameEl.parentNode.tagName === 'STRONG' ? usernameEl.parentNode : usernameEl;
57 | insertionPoint.after(' (', {cache[username]}, ') ');
58 | }
59 | }
60 | };
61 |
62 | const fetches = Object.keys(usersOnPage).map(fetchAndAdd);
63 |
64 | // Wait for all the fetches to be done
65 | await Promise.all(fetches);
66 |
67 | browser.storage.local.set({[storageKey]: cache});
68 | };
69 |
--------------------------------------------------------------------------------
/src/features/show-recently-pushed-branches.js:
--------------------------------------------------------------------------------
1 | import {h} from 'dom-chef';
2 | import select from 'select-dom';
3 | import * as pageDetect from '../libs/page-detect';
4 |
5 | const repoUrl = pageDetect.getRepoURL();
6 |
7 | export default async function () {
8 | // Don't duplicate on back/forward in history
9 | if (select.exists('[data-url$=recently_touched_branches_list]')) {
10 | return;
11 | }
12 |
13 | const codeTabURL = select('[data-hotkey="g c"]').href;
14 | const fragmentURL = `/${repoUrl}/show_partial?partial=tree%2Frecently_touched_branches_list`;
15 |
16 | const html = await fetch(codeTabURL, {
17 | credentials: 'include'
18 | }).then(res => res.text());
19 |
20 | // https://github.com/sindresorhus/refined-github/issues/216
21 | if (html.includes(fragmentURL)) {
22 | select('.repository-content').prepend(-
23 |
- try me out 24 |
- test across lines 25 |
-
92 |
- big lists 93 |
- deserve big numbers 94 |