feat: create extension

.gitignore

@@ -0,0 +1 @@
+.DS_Store

LICENCE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2023 Tshaka Lekholoane
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -0,0 +1,13 @@
+# Invert
+
+A Chrome extension to invert the colours of a web page.
+
+## Usage
+
+Click the extension button or use the shortcut ⌃ + B or ⌘ + B on macOS to toggle the colours on the page in the current tab.
+
+## Installation 
+
+1. Go to the extensions page by entering `chrome://extensions` in a new tab.
+2. Enable Developer Mode by clicking the toggle switch in the upper right corner.
+3. Click the **Load unpacked** button and select the extension directory.

background.js

@@ -0,0 +1,29 @@
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.action.setBadgeText({ text: "OFF" });
+});
+
+const toggle = (state) => state === "ON" ? "OFF" : "ON";
+
+chrome.action.onClicked.addListener(async (tab) => {
+  let state = await chrome.action.getBadgeText({ tabId: tab.id });
+  state = toggle(state);
+
+  await chrome.action.setBadgeText({
+    tabId: tab.id,
+    text: state,
+  });
+
+  const details = {
+    files: ["invert.css"],
+    target: { tabId: tab.id },
+  };
+
+  switch (state) {
+    case "ON":
+      await chrome.scripting.insertCSS(details);
+      break;
+    case "OFF":
+      await chrome.scripting.removeCSS(details);
+      break;
+  }
+});

invert.css

@@ -0,0 +1,3 @@
+html {
+  filter: invert(90%);
+}

manifest.json

@@ -0,0 +1,35 @@
+{
+  "manifest_version": 3,
+  "name": "Invert",
+  "description": "Invert the colour of web pages.",
+  "version": "1.0",
+  "icons": {
+    "16": "icons/16.png",
+    "32": "icons/32.png",
+    "48": "icons/48.png",
+    "128": "icons/128.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_icon": {
+      "16": "icons/16.png",
+      "32": "icons/32.png",
+      "48": "icons/48.png",
+      "128": "icons/128.png"
+    }
+  },
+  "permissions": [
+    "scripting",
+    "activeTab"
+  ],
+  "commands": {
+    "_execute_action": {
+      "suggested_key": {
+        "default": "Ctrl + B",
+        "mac": "Command + B"
+      }
+    }
+  }
+}