Codebase Changed

raymond-1227 · Jan 24, 2022 · 6d088e9 · 6d088e9
1 parent cbd2000
commit 6d088e9
Show file tree

Hide file tree

Showing 13 changed files with 144 additions and 43 deletions.
diff --git a/buttons/pte-19.png b/buttons/pte-19.png
diff --git a/buttons/pte-38.png b/buttons/pte-38.png
diff --git a/icons/pte-32.png b/icons/pte-32.png
diff --git a/icons/pte-48.png b/icons/pte-48.png
diff --git a/icons/pte-96.png b/icons/pte-96.png
diff --git a/icons/pte-inactive-32.png b/icons/pte-inactive-32.png
diff --git a/icons/pte-inactive-48.png b/icons/pte-inactive-48.png
diff --git a/icons/pte-inactive-96.png b/icons/pte-inactive-96.png
diff --git a/main.js b/main.js
diff --git a/manifest.json b/manifest.json
@@ -1,32 +1,28 @@
 {
-  "manifest_version": 2,
   "name": "Page Text Editor",
-  "version": "1.0",
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "raymond.hsu1227@gmail.com",
-      "strict_min_version": "55.0"
-    }
-  },
-  "description": "Easy access to editing the texts on any websites with a toggle!",
-  "permissions": ["activeTab"],
+  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
+  "manifest_version": 2,
+  "version": "2.1",
+  "homepage_url": "https://github.com/raymond-1227/PTE",
   "icons": {
     "48": "icons/pte-48.png",
     "96": "icons/pte-96.png"
   },
+  "permissions": ["activeTab"],
   "content_scripts": [
     {
       "matches": ["<all_urls>"]
     }
   ],
-  "background": {
-    "scripts": ["main.js"]
-  },
   "browser_action": {
-    "default_icon": {
-      "19": "buttons/pte-19.png",
-      "38": "buttons/pte-38.png"
-    },
-    "default_title": "Edit Texts on Screen"
+    "default_icon": "icons/pte-inactive-32.png",
+    "default_title": "Edit texts on screen",
+    "default_popup": "popup/popup.html"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "raymond.hsu1227@gmail.com",
+      "strict_min_version": "67.0"
+    }
   }
 }
diff --git a/popup/main.js b/popup/main.js
@@ -0,0 +1,15 @@
+document.getElementById("toggle").onclick = function () {
+  if (this.checked == true) {
+    document.getElementById("toggleText").textContent = "ENABLED";
+    browser.browserAction.setIcon({ path: "/icons/pte-32.png" });
+    browser.tabs.executeScript({
+      code: `document.designMode = "on"`,
+    });
+  } else {
+    document.getElementById("toggleText").textContent = "DISABLED";
+    browser.browserAction.setIcon({ path: "/icons/pte-inactive-32.png" });
+    browser.tabs.executeScript({
+      code: `document.designMode = "off"`,
+    });
+  }
+};
diff --git a/popup/popup.html b/popup/popup.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div id="toggleEdit">
+      <label class="switch">
+        <input type="checkbox" id="toggle" onclick="toggle()" autocomplete="off" />
+        <span class="slider round"></span>
+      </label>
+    </div>
+    <span>Text editing</span>
+    <br />
+    <span id="toggleText">DISABLED</span>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/popup/style.css b/popup/style.css
@@ -0,0 +1,94 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");
+html,
+body {
+  width: 150px;
+  height: 130px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  text-align: center;
+  overflow: hidden;
+  padding-top: 15px;
+  margin: 0;
+  position: relative;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #1c1b22;
+    color: #fbfbfe;
+  }
+  input:checked + .slider {
+    background-color: #00ddff !important;
+  }
+}
+
+#toggleEdit {
+  padding-bottom: 10px;
+}
+
+#toggleText {
+  font-weight: 600;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #cccccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #0061e0;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #0061e0;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}