feat: added first working version with toggle

Author: rajiv-swipejobs

.DS_Store

@@ -0,0 +1 @@
+{}

.gitignore

@@ -0,0 +1,4 @@
+[].forEach.call(document.querySelectorAll("*"), function (a) {
+  a.style.outline =
+    "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
+});

.prettierrc

@@ -0,0 +1,33 @@
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.action.setBadgeText({
+    text: "",
+  });
+});
+
+const extensions = "https://developer.chrome.com/docs/extensions";
+const webstore = "https://developer.chrome.com/docs/webstore";
+
+chrome.action.onClicked.addListener(async (tab) => {
+  // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
+  const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
+  // Next state will always be the opposite
+  const nextState = prevState === "ON" ? "OFF" : "ON";
+
+  // Set the action badge to the next state
+  await chrome.action.setBadgeText({
+    tabId: tab.id,
+    text: nextState === "ON" ? "ON" : "",
+  });
+
+  if (nextState === "ON") {
+    await chrome.scripting.executeScript({
+      target: { tabId: tab.id, allFrames: true },
+      files: ["addOutline.js"],
+    });
+  } else if (nextState === "OFF") {
+    await chrome.scripting.executeScript({
+      target: { tabId: tab.id, allFrames: true },
+      files: ["removeOutline.js"],
+    });
+  }
+});

addOutline.js

@@ -0,0 +1,11 @@
+body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
+main > :not(:last-child),
+main > :last-child > navigation-tree,
+main .toc-container {
+  display: none;
+}
+
+main > :last-child {
+  margin-top: min(10vmax, 10rem);
+  margin-bottom: min(10vmax, 10rem);
+}

background.js

@@ -0,0 +1,25 @@
+{
+  "manifest_version": 3,
+  "name": "Diver",
+  "description": "Diver deep into elements of your webpage",
+  "version": "0.1",
+  "permissions": ["activeTab", "scripting"],
+  "homepage_url": "https://github.com/thoughtlessmind/diver",
+  "icons": {
+    "16": "images/icon-16.png",
+    "32": "images/icon-32.png",
+    "48": "images/icon-48.png",
+    "128": "images/icon-128.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_icon": {
+      "16": "images/icon-16.png",
+      "32": "images/icon-32.png",
+      "48": "images/icon-48.png",
+      "128": "images/icon-128.png"
+    }
+  }
+}

focus-mode.css

@@ -0,0 +1,3 @@
+[].forEach.call(document.querySelectorAll("*"), function (a) {
+  a.style.outline = "none";
+});