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