diff --git a/background.js b/background.js
new file mode 100644
index 0000000000000000000000000000000000000000..41f874dcc7504d048f0f9375a701b7a4e55a7acf
--- /dev/null
+++ b/background.js
@@ -0,0 +1,6 @@
+let color = '#3aa757';
+
+chrome.runtime.onInstalled.addListener(() => {
+    chrome.storage.sync.set({ color });
+    console.log('Default background color set to %cgreen', `color: ${color}`);
+});
\ No newline at end of file
diff --git a/button.css b/button.css
new file mode 100644
index 0000000000000000000000000000000000000000..b477d83ea90bc95fcb3daca24560d82adab27047
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/images/get_started128.png b/images/get_started128.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c1cf87615c86adb4e84f935297e12f425548a9e
Binary files /dev/null and b/images/get_started128.png differ
diff --git a/images/get_started16.png b/images/get_started16.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb8531c8eed86b5f70f7075d7ba5006d7dad97fe
Binary files /dev/null and b/images/get_started16.png differ
diff --git a/images/get_started32.png b/images/get_started32.png
new file mode 100644
index 0000000000000000000000000000000000000000..77152233a85eb4834ebbb36106282159e75f1337
Binary files /dev/null and b/images/get_started32.png differ
diff --git a/images/get_started48.png b/images/get_started48.png
new file mode 100644
index 0000000000000000000000000000000000000000..94ddde9b35a3d70e95966d838a3948959465272f
Binary files /dev/null and b/images/get_started48.png differ
diff --git a/manifest.json b/manifest.json
index 890e74cf4e76fd038324dd9d6a1a6f443be174e0..b51db085c9c595294d125ff4e011a7f59ee40c62 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,5 +2,24 @@
   "name": "Getting Started Example",
   "description": "Build an Extension!",
   "version": "1.0",
-  "manifest_version": 3
+  "manifest_version": 3,
+  "background": {
+    "service_worker": "background.js"
+  },
+  "permissions": ["storage", "activeTab", "scripting"],
+  "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"
+  }
 }
\ No newline at end of file
diff --git a/popup.html b/popup.html
new file mode 100644
index 0000000000000000000000000000000000000000..fb6caa0ed8ba5ebd1a785981c6734b6f7dddc84d
--- /dev/null
+++ b/popup.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="button.css">
+    <title>DigitalME</title>
+</head>
+<body>
+<button id="changeColor"></button>
+<script src="popup.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/popup.js b/popup.js
new file mode 100644
index 0000000000000000000000000000000000000000..4e81f49e89d91994a2b1868259315a7b26975024
--- /dev/null
+++ b/popup.js
@@ -0,0 +1,17 @@
+// When the button is clicked, inject setPageBackgroundColor into current page
+changeColor.addEventListener("click", async () => {
+    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+    chrome.scripting.executeScript({
+        target: { tabId: tab.id },
+        function: setPageBackgroundColor,
+    });
+});
+
+// The body of this function will be executed as a content script inside the
+// current page
+function setPageBackgroundColor() {
+    chrome.storage.sync.get("color", ({ color }) => {
+        document.body.style.backgroundColor = color;
+    });
+}
\ No newline at end of file