make SR dev extension that highlights CODE and DEV

guardian · May 8, 2024 · 6a9d611 · 6a9d611
1 parent dcb7be3
commit 6a9d611
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 0 deletions.
diff --git a/sr-dev-extension/hello.html b/sr-dev-extension/hello.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+<h1>Hello Extensions</h1>
+</body>
+</html>
diff --git a/sr-dev-extension/hello_extensions.png b/sr-dev-extension/hello_extensions.png
diff --git a/sr-dev-extension/manifest.json b/sr-dev-extension/manifest.json
@@ -0,0 +1,32 @@
+{
+  "manifest_version": 3,
+  "name": "SR Devs Extension",
+  "description": "Lets you know when you're in CODE or DEV",
+  "version": "1.0",
+  "action": {
+    "default_popup": "hello.html",
+    "default_icon": "hello_extensions.png"
+  },
+  "content_scripts": [
+    {
+      "js": [
+        "scripts/banner.js",
+        "scripts/dev.js"
+      ],
+      "matches": [
+        "https://*.thegulocal.com/*"
+      ]
+    },
+    {
+      "js": [
+        "scripts/banner.js",
+        "scripts/code.js"
+      ],
+      "matches": [
+        "https://*.code.dev-theguardian.com/*",
+        "https://*.code.dev-gutools.co.uk/*",
+        "https://*.code.dev-guardianapis.com/*"
+      ]
+    }
+  ]
+}
diff --git a/sr-dev-extension/scripts/banner.js b/sr-dev-extension/scripts/banner.js
@@ -0,0 +1,34 @@
+console.log("importing function");
+const mappings = {
+    'dev': {
+        'textContent': 'You are in DEV',
+        'border': 'orange'
+    },
+    'code': {
+        'textContent': 'You are in CODE',
+        'border': 'green'
+    },
+}
+function addBanner(env) {
+    const values = mappings[env]
+    var headingText = document.createElement("span");
+    headingText.style.fontSize = "40px";
+    headingText.style.fontWeight = "bold";
+    headingText.textContent = `****** ${values.textContent} ******`
+    headingText.style.color = "red";
+    headingText.style.background = values.border;
+    var toolbarDiv = document.createElement('div');
+    toolbarDiv.style.width = '100%';
+    toolbarDiv.style.height = '50px';
+    toolbarDiv.style.background = values.border;
+    toolbarDiv.style.textAlign = 'center';
+    toolbarDiv.style.verticalAlign = 'center';
+    toolbarDiv.appendChild(headingText);
+
+    const border = `10px solid ${values.border}`
+    window.document.body.style.border = border;
+    window.document.body.firstChild.border = border;
+    toolbarDiv.border = border;
+
+    window.document.body.insertBefore(toolbarDiv, window.document.body.firstChild);
+}
diff --git a/sr-dev-extension/scripts/code.js b/sr-dev-extension/scripts/code.js
@@ -0,0 +1,2 @@
+console.log("on page", document.documentURI);
+addBanner("code");
diff --git a/sr-dev-extension/scripts/dev.js b/sr-dev-extension/scripts/dev.js
@@ -0,0 +1,2 @@
+console.log("on page", document.documentURI)
+addBanner("dev");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		console.log("on page", document.documentURI);
		addBanner("code");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		console.log("on page", document.documentURI)
		addBanner("dev");