5 |
4 |
5 |
8 |
9 |
10 | 
28 | Developped and maintained with ❤️ by AmraniCh and contributors. 29 |
30 | 31 | # 32 | 33 | Unhappy with the boring GitHub code viewer font? You're looking for a way to change it without affecting other website's fonts? Well, this extension is made for you :raised_hands:. 34 | 35 | ## 🚀 Features 36 | 37 | - As of Version 3, changing font size is supported. 38 | - As of version 2, you can use the fonts installed in your local machine alongside the fonts provided by the extension. 39 | - Change the font weight for the selected font family. 40 | - Hide the indentation guides. 41 | 42 | ## 🔥 Available Fonts 43 | 44 | - Anonymous Mono. 45 | - Atma. 46 | - Courier Prime. 47 | - Fira Code. 48 | - Inconsolata. 49 | - IBM Plex Mono. 50 | - JetBrains Mono. 51 | - Oxygen Mono. 52 | - PT Mono. 53 | - Roboto Mono. 54 | - Share Tech Mono. 55 | - Source Code Pro. 56 | - Space Mono. 57 | - Ubuntu Mono. 58 | 59 | If you have some other font that other developers could like, you can send a pull request to add it to this extension (The font must be free for personal use or licensed under a free open source license). 60 | 61 | ## 🌠 Download 62 | 63 | You can download this extension via : 64 | 65 | ### Via Chrome Store 66 | 67 |
68 |
69 | ### Manual Installation Using Developer Mode
70 |
71 | You can also manually install it via the developer mode in your browser.
72 |
73 | 1. Download the last stable version from [releases tab](https://github.com/AmraniCh/github-code-font-changer/releases).
74 | 2. Unzip the downloaded zip file.
75 | 3. Visit `chrome://extensions`.
76 | 4. Enable the developer mode.
77 | 5. Click `Load unpacked` button.
78 | 6. Select the `src` folder from the unzipped file.
79 | 7. Have fun :blush:!
80 |
81 | ## 🗃️ Assets
82 |
83 | Logo assets (PSD files) are available in the assets folder, If you see a need for changing something in the logo or you have a creative idea feel free to download and edit the PSD file.
84 |
85 | For the store chrome Promo images they are created with Figma, with this If you want to edit them, you have first to open an issue describing your idea and what you will change, if approved I will invite you the [source Figme file](https://www.figma.com/file/7SHQlL5ehiQhxWpz4DkQpO/github-code-font-changer?type=design&node-id=0-1&mode=design&t=qv0LXPwBsEHsJ55M-0).
86 |
87 | ## ⭐ Rate The Extension If You Found It Useful
88 |
89 | If you find this extension useful for you please give us a review at [Chrome Web Store](https://chrome.google.com/webstore/detail/github-code-font-changer/jmbophfanmlfkloliildahlpnlbojhfi), this will motivate us to improve and maintain this extension in the future, Thank you :)
90 |
91 | ## 📜 License
92 |
93 | GitHub Code Font Changer is an open-source chrome extension lisenced under the [MIT](https://github.com/AmraniCh/github-code-font-changer/blob/master/LICENSE) open source license.
94 |
--------------------------------------------------------------------------------
/TODO.md:
--------------------------------------------------------------------------------
1 | # TODO LIST
2 |
3 | Here you can find/add some of the desired features to be implemented in the next versions of this extension.
4 |
5 | ## Requested features
6 |
7 | - [X] Add the option to change the font size of the selected font family [#8](../../issues/8).
8 | - [x] Allows using local fonts [#12](../../issues/12).
9 |
--------------------------------------------------------------------------------
/assets/logo-wide.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/assets/logo-wide.psd
--------------------------------------------------------------------------------
/assets/logo.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/assets/logo.psd
--------------------------------------------------------------------------------
/assets/promo1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/assets/promo1.jpg
--------------------------------------------------------------------------------
/assets/promo2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/assets/promo2.jpg
--------------------------------------------------------------------------------
/assets/promo3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/assets/promo3.jpg
--------------------------------------------------------------------------------
/src/background.js:
--------------------------------------------------------------------------------
1 | var /**
2 | * Supported fonts
3 | */
4 | fonts = {
5 | 'Fira Code': 'https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap',
6 | 'Source Code Pro': 'https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400;500;600;700;900&display=swap',
7 | 'Roboto Mono': 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap',
8 | 'Ubuntu Mono': 'https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap',
9 | 'Courier Prime': 'https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap',
10 | 'JetBrains Mono': 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap',
11 | 'Share Tech Mono': 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap',
12 | 'Fira Mono': 'https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap',
13 | 'PT Mono': 'https://fonts.googleapis.com/css2?family=PT+Mono&display=swap',
14 | 'Oxygen Mono': 'https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap',
15 | 'Space Mono': 'https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
16 | Inconsolata: 'https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap',
17 | 'Anonymous Pro': 'https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap',
18 | 'IBM Plex Mono':
19 | 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap',
20 | Atma: 'https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&display=swap',
21 | },
22 | selectors = {
23 | code: '.blob-code-inner, .react-code-text, .react-blob-print-hide',
24 | intentGuides: '[data-rgh-whitespace="space"]',
25 | };
26 |
27 | // add a listener to tabs.onUpdated event
28 | chrome.tabs.onUpdated.addListener(function (tabId, info) {
29 | // if the tab is completely loaded
30 | if (info.status === 'complete') {
31 | chrome.storage.sync.get(['gt_font_family', 'gt_font_weight', 'gt_font_size', 'gt_font_link', 'gt_indent_guides'], function (data) {
32 | if (Object.keys(data).length > 0) {
33 | chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
34 | chrome.tabs.sendMessage(tabs[0].id, {
35 | type: 'loadFont',
36 | font: {
37 | font: data.gt_font_family,
38 | link: data.gt_font_link,
39 | },
40 | });
41 | });
42 |
43 | applyFontFamily(data.gt_font_family);
44 | applyFontWeight(data.gt_font_weight);
45 | applyFontSize(data.gt_font_size);
46 |
47 | data.gt_indent_guides ? showIndentGuides() : hideIndentGuides();
48 | }
49 | });
50 |
51 | // Intercept the load font message from the popup script
52 | // and resend the same request to the content script
53 | chrome.runtime.onMessage.addListener(function (request) {
54 | if (request.type === 'loadFont') {
55 | chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
56 | chrome.tabs.sendMessage(tabs[0].id, request);
57 | });
58 | }
59 | });
60 | }
61 | });
62 |
63 | /**
64 | * Apply the giving css styles to Github code container
65 | * @param {String} styles
66 | * @returns true
67 | */
68 | function applyStyles(selector, styles) {
69 | const css = stylesToCss(styles);
70 | chrome.tabs.insertCSS({
71 | code: `${selector} {${css}}`,
72 | });
73 | }
74 |
75 | /**
76 | * Converts the giving css styles object into a regular CSS string
77 | * @param {Object} styles
78 | * @returns {String}
79 | */
80 | function stylesToCss(styles) {
81 | var css = '';
82 | for (let property in styles) {
83 | const value = styles[property];
84 | if (!Object.prototype.hasOwnProperty.call(styles, property) || !value) {
85 | continue;
86 | }
87 | css += `${property}: ${value} !important;`;
88 | }
89 |
90 | return css;
91 | }
92 |
93 | /**
94 | * Applies the giving font family to the html github code container
95 | * @param {String} family
96 | */
97 | function applyFontFamily(family) {
98 | applyStyles(selectors.code, { 'font-family': family });
99 | chrome.extension.sendMessage({
100 | type: 'loadFont',
101 | font: {
102 | font: family,
103 | link: fonts[family],
104 | },
105 | });
106 | }
107 |
108 | /**
109 | * Applies the provided weight to the html github code container
110 | * @param {String} weight
111 | */
112 | function applyFontWeight(weight) {
113 | applyStyles(selectors.code, { 'font-weight': weight });
114 | }
115 |
116 | /**
117 | * Applies the provided font-size to the html github code container
118 | * @param {String} font-size (in px, em, rem, etc)
119 | */
120 | function applyFontSize(size) {
121 | applyStyles(selectors.code, { 'font-size': size });
122 | }
123 |
124 | function hideIndentGuides() {
125 | applyStyles(selectors.intentGuides, { visibility: 'hidden' });
126 | }
127 |
128 | function showIndentGuides() {
129 | applyStyles(selectors.intentGuides, { visibility: 'visible' });
130 | }
131 |
132 | /**
133 | * Just a shortcut for the native target.addEventListener
134 | * @param {DOMElement} ele
135 | * @param {String} event
136 | * @param {function} handler
137 | */
138 | function addEvent(ele, event, handler) {
139 | ele.addEventListener(event, handler.bind(this), false);
140 | }
141 |
--------------------------------------------------------------------------------
/src/content.js:
--------------------------------------------------------------------------------
1 | chrome.runtime.onMessage.addListener((message) => {
2 | if (message.type === 'loadFont') {
3 | const style = document.createElement('style');
4 | style.appendChild(document.createTextNode(`@import url(${message.font.link})`));
5 | document.head.appendChild(style);
6 | }
7 | return true;
8 | });
9 |
--------------------------------------------------------------------------------
/src/images/logo/V1/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/src/images/logo/V1/icon128.png
--------------------------------------------------------------------------------
/src/images/logo/V1/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/src/images/logo/V1/icon16.png
--------------------------------------------------------------------------------
/src/images/logo/V1/icon48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/src/images/logo/V1/icon48.png
--------------------------------------------------------------------------------
/src/images/logo/V1/logo-wide2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/src/images/logo/V1/logo-wide2.png
--------------------------------------------------------------------------------
/src/images/logo/V2/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/src/images/logo/V2/icon128.png
--------------------------------------------------------------------------------
/src/images/logo/V2/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/src/images/logo/V2/icon16.png
--------------------------------------------------------------------------------
/src/images/logo/V2/icon48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/src/images/logo/V2/icon48.png
--------------------------------------------------------------------------------
/src/images/logo/V2/logo-wide.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/src/images/logo/V2/logo-wide.png
--------------------------------------------------------------------------------
/src/images/logo/V2/logo_original.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmraniCh/github-code-font-changer/b836bb65a65da67ced9e94a030d1ea04447f440a/src/images/logo/V2/logo_original.png
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "Github Code Font Changer",
4 | "description": "Change and customize the boring GitHub code viewer font",
5 | "version": "3.0",
6 | "icons": {
7 | "16": "images/logo/V2/icon16.png",
8 | "48": "images/logo/V2/icon48.png",
9 | "128": "images/logo/V2/icon128.png"
10 | },
11 | "browser_action": {
12 | "default_popup": "popup.html"
13 | },
14 | "background": {
15 | "scripts": [
16 | "background.js"
17 | ]
18 | },
19 | "content_scripts": [
20 | {
21 | "matches": [
22 | "https://*.github.com/*"
23 | ],
24 | "run_at": "document_idle",
25 | "js": [
26 | "content.js"
27 | ]
28 | }
29 | ],
30 | "permissions": [
31 | "storage",
32 | "https://*.github.com/*"
33 | ]
34 | }
--------------------------------------------------------------------------------
/src/popup.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --primary-color: #298f8e
3 | }
4 |
5 | * {
6 | margin: 0;
7 | padding: 0;
8 | box-sizing: border-box;
9 | color: var(--primary-color);
10 | font-weight: 500;
11 | }
12 |
13 | input[type="checkbox"] {
14 | accent-color: var(--primary-color);
15 | }
16 |
17 | input::placeholder {
18 | color: var(--primary-color);
19 | opacity: .6;
20 | }
21 |
22 | .form {
23 | width: 320px;
24 | background-color: #fff;
25 | border-right: 6px solid var(--primary-color);
26 | border-bottom: 6px solid var(--primary-color);
27 | padding: 15px 10px 15px 10px;
28 | }
29 |
30 | .title {
31 | text-align: left;
32 | background-color: #fff;
33 | text-transform: uppercase;
34 | margin-bottom: 15px;
35 | padding: 15px 15px;
36 | display: flex;
37 | align-items: center;
38 | border-bottom: 2px solid var(--primary-color);
39 | }
40 |
41 | .title img.logo {
42 | width: 100%;
43 | }
44 |
45 | .title span {
46 | font-size: 24px;
47 | margin-left: 10px;
48 | }
49 |
50 | .label {
51 | font-size: .9rem;
52 | }
53 |
54 | .input-field,
55 | .checkbox-field {
56 | margin-bottom: 10px;
57 | padding: 0 8px;
58 | }
59 |
60 | .input-field .label::first-letter {
61 | text-transform: uppercase;
62 | }
63 |
64 | .input-field .label {
65 | display: block;
66 | margin-bottom: 8px;
67 | text-align: left;
68 | }
69 |
70 | .input-field .control {
71 | transition: all .1s linear;
72 | padding: 8px;
73 | width: 100%;
74 | font-size: 1.2rem;
75 | margin-top: 8px;
76 | border: 2px solid var(--primary-color);
77 | border-radius: 5px;
78 | }
79 |
80 | .input-field select.control {
81 | border: 1px solid #ddd;
82 | text-align: center;
83 | }
84 |
85 | .input-field .control:focus {
86 | outline: 3px solid var(--primary-color);
87 | }
88 |
89 | .checkbox-field .control {
90 | margin-right: 5px;
91 | width: 15px;
92 | height: 15px;
93 | }
94 |
95 | .checkbox-field .label,
96 | .checkbox-field .control {
97 | vertical-align: middle;
98 | }
99 |
100 | .apply-btn {
101 | width: 100%;
102 | background-color: rgb(9 132 227);
103 | padding: 12px 20px;
104 | color: rgb(255 255 255);
105 | border-radius: 2px;
106 | border: none;
107 | cursor: pointer;
108 | margin-top: 35px;
109 | text-transform: uppercase;
110 | transition: all 0.3s ease-in-out;
111 | }
112 |
113 | .apply-btn:hover {
114 | opacity: 0.8;
115 | }
--------------------------------------------------------------------------------
/src/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |