init with tutorial

3 years ago · f236859e05
commit f236859e05
12 changed files with 110 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/background.js
+++ b/background.js
@ -0,0 +1,6 @@
+let color = "#3aa757";
+
+chrome.runtime.onInstalled.addListener(() => {
+	chrome.storage.sync.set({ color });
+	console.log("Default color set to %cgreen", `color: ${color}`);
+});
--- a/button.css
+++ b/button.css
@ -0,0 +1,13 @@
+button {
+    height: 30px;
+    width: 30px;
+    outline: none;
+    margin: 10px;
+    border: none;
+    border-radius: 2px;
+  }
+  
+  button.current {
+    box-shadow: 0 0 0 2px white,
+                0 0 0 4px black;
+  }
--- a/images/get_started128.png
+++ b/images/get_started128.png
--- a/images/get_started16.png
+++ b/images/get_started16.png
--- a/images/get_started32.png
+++ b/images/get_started32.png
--- a/images/get_started48.png
+++ b/images/get_started48.png
--- a/manifest.json
+++ b/manifest.json
@ -0,0 +1,30 @@
+{
+    "name": "Getting started bla bla",
+    "description": "Test for a Ggl Chrome Extension",
+    "version": "1.0",
+    "manifest_version": 3,
+    "background": {
+        "service_worker": "background.js"
+    },
+    "permissions": [
+        "storage",
+        "activeTab",
+        "scripting"
+    ],
+    "options_page": "options.html",
+    "action": {
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "/images/get_started16.png",
+            "32": "/images/get_started32.png",
+            "48": "/images/get_started48.png",
+            "128": "/images/get_started128.png"
+        }
+    },
+    "icons": {
+        "16": "/images/get_started16.png",
+        "32": "/images/get_started32.png",
+        "48": "/images/get_started48.png",
+        "128": "/images/get_started128.png"
+    }
+}
--- a/options.html
+++ b/options.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<link rel="stylesheet" href="button.css" />
+		<script src="options.js" defer></script>
+	</head>
+	<body>
+		<div id="buttonDiv"></div>
+		<div>
+			<p>Choose a different background color</p>
+			<input type="color" name="color" id="colorPicker" />
+		</div>
+	</body>
+</html>
--- a/options.js
+++ b/options.js
@ -0,0 +1,16 @@
+let page = document.getElementById("buttonDiv");
+let selectedClassName = "current";
+
+let colorPicker = document.getElementById("colorPicker");
+
+colorPicker.addEventListener("change", () => {
+	let color = colorPicker.value;
+	chrome.storage.sync.set({ color });
+});
+
+window.addEventListener("load", () => {
+	chrome.storage.sync.get("color", (data) => {
+		let currentColor = data.color;
+		colorPicker.value = currentColor;
+	});
+});
--- a/popup.html
+++ b/popup.html
@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<link rel="stylesheet" href="button.css" />
+		<script src="popup.js" defer></script>
+	</head>
+	<body>
+		<button id="changeColor"></button>
+	</body>
+</html>
--- a/popup.js
+++ b/popup.js
@ -0,0 +1,21 @@
+// Init button with user's preferred color
+let changeColor = document.getElementById("changeColor");
+
+chrome.storage.sync.get("color", ({ color }) => {
+	changeColor.style.backgroundColor = color;
+});
+
+changeColor.addEventListener("click", async () => {
+	let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+	chrome.scripting.executeScript({
+		target: { tabId: tab.id },
+		function: setPageBackgroundColor,
+	});
+});
+
+var setPageBackgroundColor = function () {
+	chrome.storage.sync.get("color", ({ color }) => {
+		document.body.style.backgroundColor = color;
+	});
+};