Version 0.0.2

Vigasaurus · May 10, 2019 · b296504 · b296504
1 parent bc8ed2c
commit b296504
Show file tree

Hide file tree

Showing 7 changed files with 453 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+src/*.zip
+*.zip
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/logo_header.png b/src/images/logo_header.png
diff --git a/src/manifest.json b/src/manifest.json
@@ -0,0 +1,18 @@
+{
+	"manifest_version": 2,
+	"name": "Lighthouse Report Generator",
+	"version": "0.0.2",
+	"description": "Generates a Lighthouse Report and without needing to use Chrome",
+	"icons": {
+		"128": "images/logo.png"
+	},
+	"permissions": ["activeTab", "storage"],
+	"browser_action": {
+		"default_icon": {
+			"38": "images/logo.png"
+		},
+		"default_title": "Lighthouse",
+		"default_popup": "popup.html",
+		"browser_style": true
+	}
+}
diff --git a/src/popup.html b/src/popup.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Lighthouse Report Generator</title>
+		<link rel="stylesheet" href="styles/lighthouse.css" />
+	</head>
+	<body>
+		<header class="header">
+			<img
+				src="images/logo_header.png"
+				class="header__icon"
+				width="100"
+				height="100"
+				alt="Lighthouse Logo"
+			/>
+			<div class="header-title__container">
+				<h1 class="header-title__item">Lighthouse</h1>
+			</div>
+		</header>
+
+		<div class="feedback__container">
+			<span class="error" id="error_message" hidden></span>
+			<span class="success" id="success_message" hidden></span>
+		</div>
+
+		<div class="content">
+			<div class="content__button ld-ext-right" id="generate_report">
+				<span id="button_text">Generate Report</span>
+				<div class="ld ld-ring ld-spin"></div>
+			</div>
+		</div>
+		<script src="scripts/makeRequest.js"></script>
+	</body>
+</html>
diff --git a/src/scripts/makeRequest.js b/src/scripts/makeRequest.js
@@ -0,0 +1,131 @@
+const setLoader = state => {
+	if (state) {
+		document
+			.getElementsByClassName('content__button')[0]
+			.classList.add('running');
+	} else {
+		document
+			.getElementsByClassName('content__button')[0]
+			.classList.remove('running');
+	}
+};
+
+const setError = message => {
+	if (message) {
+		document.getElementById('error_message').innerText = message;
+		document.getElementById('error_message').hidden = false;
+		setSuccess();
+	} else {
+		document.getElementById('error_message').hidden = true;
+	}
+};
+
+const setSuccess = message => {
+	if (message) {
+		document.getElementById('success_message').innerText = message;
+		document.getElementById('success_message').hidden = false;
+		setError();
+	} else {
+		document.getElementById('success_message').hidden = true;
+	}
+};
+
+const setButtonText = text => {
+	if (text) {
+		document.getElementById('button_text').innerText = text;
+		document.getElementById('generate_report').classList.add('disabled');
+	} else {
+		document.getElementById('button_text').innerText = 'Generate Report';
+		document.getElementById('generate_report').classList.remove('disabled');
+	}
+};
+
+const generateReport = () => {
+	if (
+		document.getElementById('generate_report').classList.contains('disabled') ||
+		document.getElementById('generate_report').classList.contains('successful')
+	) {
+		return;
+	}
+	setLoader(true);
+	setButtonText('Verifying Start Conditions');
+	setSuccess();
+	setError();
+	browser.tabs.query({ currentWindow: true }, tabs => {
+		const currentTab = tabs.filter(tab => tab.active)[0];
+		if (
+			/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/.test(
+				currentTab.url
+			)
+		) {
+			setTimeout(() => {
+				setButtonText('Generating Report');
+			}, 1000);
+			let request = {
+				url: currentTab.url,
+				replace: true,
+				save: true,
+			};
+			fetch('https://lighthouse-dot-webdotdevsite.appspot.com/lh/newaudit', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'Content-Length': 64,
+				},
+				body: JSON.stringify(request),
+			})
+				.then(response => {
+					if (response.status === 201) {
+						setSuccess('Successfully ran Lighthouse. Opening Report...');
+						setButtonText('Opening Report');
+						setTimeout(() => {
+							setButtonText('Report Generated');
+							setLoader(false);
+							document
+								.getElementById('generate_report')
+								.classList.add('successful');
+							browser.tabs.create(
+								{
+									active: true,
+									url: `https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=${
+										currentTab.url
+									}`,
+								},
+								() => {
+									setTimeout(() => {
+										window.close();
+									}, 3000);
+								}
+							);
+						}, 500);
+					} else {
+						return response.json();
+					}
+				})
+				.then(res => {
+					if (res) {
+						console.log(res);
+						setLoader(false);
+						setButtonText();
+						setError('There was an error in getting data from Google...');
+					}
+				})
+				.catch(e => {
+					console.log(e);
+					setLoader(false);
+					setButtonText();
+					setError('There was an error in getting data from Google');
+				});
+		} else {
+			setTimeout(() => {
+				setLoader(false);
+				setButtonText();
+				setError(`That's not a valid URL to run Lighthouse on`);
+			}, 1000);
+		}
+	});
+};
+
+document
+	.getElementById('generate_report')
+	.addEventListener('click', generateReport);