3 files changed, 37 insertions, 0 deletions
diff --git a/source/content.ts b/source/content.ts
index d974bf80..6b532ea4 100644
--- a/source/content.ts
+++ b/source/content.ts
@@ -149,6 +149,7 @@ import './features/separate-draft-pr-button';
 import './features/link-to-prior-blame-line';
 import './features/dim-bots';
 import './features/conflict-marker';
+import './features/html-preview-link';
 
 // Add global for easier debugging
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/source/features/html-preview-link.tsx b/source/features/html-preview-link.tsx
new file mode 100644
index 00000000..968cefb6
--- /dev/null
+++ b/source/features/html-preview-link.tsx
@@ -0,0 +1,34 @@
+import React from 'dom-chef';
+import select from 'select-dom';
+import features from '../libs/features';
+import {isSingleHTMLFile} from '../libs/utils';
+
+function init(): void {
+	const rawButton = select<HTMLAnchorElement>('#raw-url')!;
+	const link = rawButton.pathname.split('/');
+	// Remove /raw/
+	link.splice(3, 1);
+	rawButton
+		.parentElement! // `BtnGroup`
+		.prepend(
+			<a
+				className="btn btn-sm BtnGroup-item"
+				href={`https://cdn.statically.io/gh${link.join('/')}`}>
+				Preview
+			</a>
+		);
+}
+
+features.add({
+	id: __featureName__,
+	description: 'Adds a link to preview HTML files.',
+	screenshot: 'https://user-images.githubusercontent.com/44045911/67634792-48995980-f8fb-11e9-8b6a-7b57d5b12a2f.png',
+	include: [
+		isSingleHTMLFile
+	],
+	exclude: [
+		features.isEnterprise
+	],
+	load: features.onAjaxedPages,
+	init
+});
diff --git a/source/libs/utils.ts b/source/libs/utils.ts
index e11a8071..b32247d5 100644
--- a/source/libs/utils.ts
+++ b/source/libs/utils.ts
@@ -144,3 +144,5 @@ export function reportBug(featureName: string, bugName: string): void {
 	console.log('Find existing issues:\n' + String(issuesUrl));
 	console.log('Open new issue:\n' + String(newIssueUrl));
 }
+
+export const isSingleHTMLFile = (): boolean => /\.html?$/.test(location.pathname);