lslsilva86 · lslsilva86 · Mar 17, 2024 · Mar 17, 2024
diff --git a/background.js b/background.js
@@ -0,0 +1,22 @@
+chrome.action.onClicked.addListener((tab) => {
+  chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    function: reloadStylesheetsAndScripts,
+  });
+});
+
+function reloadStylesheetsAndScripts() {
+  var queryString = '?reload=' + new Date().getTime();
+
+  // Reload stylesheets
+  document.querySelectorAll('link[rel="stylesheet"], link[rel="stylesheet preload"]').forEach(function (link) {
+    link.href = link.href.replace(/\?.*|$/, queryString);
+  });
+
+  // Reload scripts
+  document.querySelectorAll('script').forEach(function (script) {
+    if (script.src) {
+      script.src = script.src.replace(/\?.*|$/, queryString);
+    }
+  });
+}
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/icon128.png b/images/icon128.png
diff --git a/images/icon16.png b/images/icon16.png
diff --git a/images/icon48.png b/images/icon48.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,23 @@
+{
+  "manifest_version": 3,
+  "name": "CSS and JS Reload",
+  "version": "1.0",
+  "description": "Extension to reload CSS and JavaScript on a webpage.",
+  "permissions": ["activeTab", "scripting"],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "images/icon16.png",
+      "48": "images/icon48.png",
+      "128": "images/icon128.png"
+    }
+  },
+  "icons": {
+    "16": "images/icon16.png",
+    "48": "images/icon48.png",
+    "128": "images/icon128.png"
+  }
+}
diff --git a/popup.css b/popup.css
diff --git a/popup.css.map b/popup.css.map
diff --git a/popup.html b/popup.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Reload CSS and JS</title>
+    <script src="popup.js"></script>
+    <link
+      rel="stylesheet"
+      href="popup.css"
+    />
+  </head>
+  <body>
+    <button id="reloadJs">Reload JavaScript</button>
+    <button id="reloadCss">Reload CSS</button>
+  </body>
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var reloadCssButton = document.getElementById('reloadCss');
+  if (reloadCssButton) {
+    reloadCssButton.addEventListener('click', () => {
+      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        chrome.scripting.executeScript({
+          target: { tabId: tabs[0].id },
+          function: reloadStylesheets,
+        });
+      });
+    });
+  }
+
+  var reloadJsButton = document.getElementById('reloadJs');
+  if (reloadJsButton) {
+    reloadJsButton.addEventListener('click', () => {
+      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        chrome.scripting.executeScript({
+          target: { tabId: tabs[0].id },
+          function: reloadScripts,
+        });
+      });
+    });
+  }
+});
+
+function reloadStylesheets() {
+  var queryString = '?reload=' + new Date().getTime();
+  document.querySelectorAll('link[rel="stylesheet"], link[rel="stylesheet preload"]').forEach(function (link) {
+    link.href = link.href.replace(/\?.*|$/, queryString);
+  });
+}
+
+function reloadScripts() {
+  var queryString = '?reload=' + new Date().getTime();
+  document.querySelectorAll('script').forEach(function (script) {
+    if (script.src) {
+      script.src = script.src.replace(/\?.*|$/, queryString);
+    }
+  });
+}
diff --git a/popup.scss b/popup.scss
@@ -0,0 +1,11 @@
+body {
+  width: 244px;
+  button {
+    width: 100px;
+    margin: 10px;
+    padding: 10px;
+    border: none;
+    color: white;
+    background: purple;
+  }
+}