Merge pull request #3 from alexnguyennz/manifest-v3

migrate v3
alexnguyennz · Jan 5, 2024 · 4df8d91 · 4df8d91
2 parents 051a268 + 4d5773c
commit 4df8d91
Show file tree

Hide file tree

Showing 11 changed files with 538 additions and 472 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea
diff --git a/README.md b/README.md
@@ -2,21 +2,24 @@
 
 A simple per-tab automatic page refresher/reloader for Google Chrome and Microsoft Edge.
 
-[Chrome store page](https://chrome.google.com/webstore/detail/page-refresher/hedjdjlfiijoibijchekancllfeppchp) 
+[Chrome store page](https://chrome.google.com/webstore/detail/page-refresher/hedjdjlfiijoibijchekancllfeppchp)
 
 ##### Features
 
-  - tab based (tab ID) reloads
-  - 5 customizable intervals
-  - refresh info table
-  - blocks automatic reloads or meta refreshes (per tab)
-  - bypass local cache (per tab)
-  - context menu functionality
+- tab based (tab ID) reloads
+- 5 customizable intervals
+- refresh info table
+- blocks automatic reloads or meta refreshes (per tab)
+- bypass local cache (per tab)
+- context menu functionality
 
 ##### Required Permissions
-  - storage - used to store default settings and save user preferences
-  - contextMenus - used to enable the optional context (right click) menu for this extension
-  - tabs - used to get the title from each tab (to be displayed in the options page)
-  - activeTab - used to execute the code to block reloads
-
-Warning: Some sites may restrict your access to them if you make too many requests (or reloads) within a short period of time.
+
+- storage - used to store default settings and save user preferences
+- contextMenus - used to enable the optional context (right click) menu for this extension
+- tabs - used to get the title from each tab (to be displayed in the options page)
+- activeTab - used to execute the code to block reloads
+- scripting - required for block reloading feature
+
+Warning: Some sites may restrict your access to them if you make too many requests (or reloads) within a short period of
+time.
diff --git a/public/background.html b/public/background.html
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,7 +1,7 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Page Refresher",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "author": "Alex Nguyen",
   "description": "A simple per-tab automatic page refresher/reloader.",
   "icons": {
@@ -10,16 +10,17 @@
     "128": "./src/img/logo-128.png"
   },
   "background": {
-    "page": "background.html",
-    "persistent": false
+    "service_worker": "src/js/background.js",
+    "type": "module"
   },
   "permissions": [
     "storage",
     "contextMenus",
     "tabs",
-    "activeTab"
+    "activeTab",
+    "scripting"
   ],
-  "browser_action": {
+  "action": {
     "default_title": "Page Refresher",
     "default_popup": "popup.html"
   },

diff --git a/public/options.html b/public/options.html
@@ -10,7 +10,7 @@
 
     <img src="./src/img/banner.png">
     <p id="extension-info">
-        Version: 1.0.3<br>
+        Version: 2.0.0<br>
         Author: Alex Nguyen<br>
         Source Code: <a href="https://github.com/alexnguyennz/pagerefresher" target="_blank">GitHub</a>
     </p>

diff --git a/public/popup.html b/public/popup.html
@@ -8,41 +8,46 @@
 
 <body>
 
-    <div class="interval-block">
-        <label for="minuteInterval" class="interval-label">Minutes: </label>
-        <input type="number" id="minuteInterval" name="customInterval" class="interval-inputs" min="0" value="0">
-
-        <label for="secondInterval" class="interval-label">Seconds: </label>
-        <input type="number" id="secondInterval" name="customInterval" class="interval-inputs" min="0" value="0">
-    </div>
-
-    <div id="reload-toggle">
-        <input type="checkbox" id="option">
-        <div class="knobs"><span>OFF</span></div>
-        <div class="layer"></div>
-    </div>
-
-    <div class="custom-intervals">
-        <input type="radio" id="intervalOne" name="definedInterval" class="definedInterval"><label for="intervalOne"></label>
-        <input type="radio" id="intervalTwo" name="definedInterval" class="definedInterval"><label for="intervalTwo"></label>
-        <input type="radio" id="intervalThree" name="definedInterval" class="definedInterval"><label for="intervalThree"></label>
-        <input type="radio" id="intervalFour" name="definedInterval" class="definedInterval"><label for="intervalFour"></label>
-        <input type="radio" id="intervalFive" name="definedInterval" class="definedInterval"><label for="intervalFive"></label>
-    </div>
-
-    <hr>
-
-    <div>
-        <input type="checkbox" id="blockReload">
-        <label for="blockReload">Block Auto Reloading</label>
-    </div>
-
-    <div>
-        <input type="checkbox" id="bypassCache">
-        <label for="bypassCache">Bypass Local Cache</label>
-
-        <a id="option-link" href="/options.html" target="_blank" alt="Settings page" title="Go to settings"></a>
-    </div>
+<div class="interval-block">
+    <label for="minuteInterval" class="interval-label">Minutes: </label>
+    <input type="number" id="minuteInterval" name="customInterval" class="interval-inputs" min="0" value="0">
+
+    <label for="secondInterval" class="interval-label">Seconds: </label>
+    <input type="number" id="secondInterval" name="customInterval" class="interval-inputs" min="0" value="0">
+</div>
+
+<div id="reload-toggle">
+    <input type="checkbox" id="option">
+    <div class="knobs"><span>OFF</span></div>
+    <div class="layer"></div>
+</div>
+
+<div class="custom-intervals">
+    <input type="radio" id="intervalOne" name="definedInterval" class="definedInterval"><label
+        for="intervalOne"></label>
+    <input type="radio" id="intervalTwo" name="definedInterval" class="definedInterval"><label
+        for="intervalTwo"></label>
+    <input type="radio" id="intervalThree" name="definedInterval" class="definedInterval"><label
+        for="intervalThree"></label>
+    <input type="radio" id="intervalFour" name="definedInterval" class="definedInterval"><label
+        for="intervalFour"></label>
+    <input type="radio" id="intervalFive" name="definedInterval" class="definedInterval"><label
+        for="intervalFive"></label>
+</div>
+
+<hr>
+
+<div>
+    <input type="checkbox" id="blockReload">
+    <label for="blockReload">Block Auto Reloading</label>
+</div>
+
+<div>
+    <input type="checkbox" id="bypassCache">
+    <label for="bypassCache">Bypass Local Cache</label>
+
+    <a id="option-link" href="/options.html" target="_blank" alt="Settings page" title="Go to settings"></a>
+</div>
 
 <script type="module" src="./src/js/popup.js"></script>
 

diff --git a/public/src/css/popup.css b/public/src/css/popup.css
@@ -1,17 +1,24 @@
-.interval-block { column-count: 2; }
+.interval-block {
+    column-count: 2;
+}
 
-.custom-intervals { column-count: 5; }
+.custom-intervals {
+    column-count: 5;
+}
 
-.custom-intervals input { margin-left: 10px; }
+.custom-intervals input {
+    margin-left: 10px;
+}
 
-.custom-intervals label { margin-left: 5px; }
+.custom-intervals label {
+    margin-left: 5px;
+}
 
 input[type=number] {
     width: 75px;
     padding: 10px;
 }
 
-
 /* *** TOGGLE *** */
 .knobs, .layer {
     position: absolute;
@@ -21,7 +28,9 @@ input[type=number] {
     left: 0;
 }
 
-.knobs { z-index: 2; }
+.knobs {
+    z-index: 2;
+}
 
 #reload-toggle {
     position: relative;
@@ -75,19 +84,28 @@ input[type=number] {
     z-index: 1;
 }
 
-#reload-toggle #option:checked + .knobs span { color: #4e4e4e; }
+#reload-toggle #option:checked + .knobs span {
+    color: #4e4e4e;
+}
 
 #reload-toggle #option:checked + .knobs:before {
     left: 105px;
     background-color: #03A9F4;
 }
 
-#reload-toggle #option:checked + .knobs:after { color: #fff; }
+#reload-toggle #option:checked + .knobs:after {
+    color: #fff;
+}
+
+#reload-toggle #option:checked ~ .layer {
+    background-color: #ebf7fc;
+}
 
-#reload-toggle #option:checked ~ .layer { background-color: #ebf7fc; }
 /* *** END TOGGLE *** */
 
-hr { margin-bottom: 4px; }
+hr {
+    margin-bottom: 4px;
+}
 
 #option-link {
     float: right;