Update

mdmen · Oct 3, 2023 · d4e84f8 · d4e84f8
1 parent 482d1fa
commit d4e84f8
Show file tree

Hide file tree

Showing 15 changed files with 73 additions and 2,892 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Dmitry Menovschikov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1 +1,19 @@
-Just allows to turn on/off your extensions. Native es6 without third-party libs.
+# Simple extensions manager for Google Chrome
+
+Just allows to turn on/off your extensions. Vanilla JavaScript without third-party libs.
+
+<table>
+ <tr>
+    <td><img src="./images/screenshots/light.webp" alt="Light theme screenshot"/></td>
+    <td><img src="./images/screenshots/dark.webp" alt="Dark theme screenshot" /></td>
+ </tr>
+</table>
+
+## Installation
+
+1. Clone the repository
+2. Open Google Chrome. Go to chrome://extensions/
+3. Enable "Developer mode"
+4. Click "Load unpacked" (just pick up repo folder)
+5. Disable "Developer mode"
+6. Pin extension to the Chrome toolbar
diff --git a/src/images/icon-128x128.png → images/icon-128x128.png b/src/images/icon-128x128.png → images/icon-128x128.png
diff --git a/src/images/icon-16x16.png → images/icon-16x16.png b/src/images/icon-16x16.png → images/icon-16x16.png
diff --git a/src/images/icon-32x32.png → images/icon-32x32.png b/src/images/icon-32x32.png → images/icon-32x32.png
diff --git a/src/images/icon-48x48.png → images/icon-48x48.png b/src/images/icon-48x48.png → images/icon-48x48.png
diff --git a/images/screenshots/dark.webp b/images/screenshots/dark.webp
diff --git a/images/screenshots/light.webp b/images/screenshots/light.webp
diff --git a/src/index.html → index.html b/src/index.html → index.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>Simple extenstion manager</title>
+  <title>Simple extenstions manager</title>
   <link rel="stylesheet" href="styles.css">
   <script src="scripts.js"></script>
 </head>

diff --git a/src/manifest.json → manifest.json b/src/manifest.json → manifest.json
@@ -1,18 +1,18 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Simple extensions manager",
   "short_name": "Extensions manager",
   "description": "Just allows you to turn on/off your extensions",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "icons": {
     "16": "images/icon-16x16.png",
     "48": "images/icon-48x48.png",
     "128": "images/icon-48x48.png"
   },
-  "browser_action": {
+  "action": {
+    "default_popup": "index.html",
     "default_icon": "images/icon-32x32.png",
-    "default_title": "Extensions manager",
-    "default_popup": "index.html"
+    "default_title": "Extensions manager"
   },
   "permissions": [
     "management"

diff --git a/package.json b/package.json
diff --git a/src/scripts.js → scripts.js b/src/scripts.js → scripts.js
diff --git a/src/styles.css → styles.css b/src/styles.css → styles.css
@@ -1,35 +1,47 @@
 :root {
-  --base-text-color: #222;
+  --base-text-color: #495057;
   --base-bg-color: #fff;
-  --text-active-color: #4F8A10;
-  --text-error-color: rgb(148, 75, 75);
-  --active-bg-color: rgba(0, 0, 0, .02);
+  --text-active-color: #3b82f6;
+  --text-error-color: #e24c4c;
+  --active-bg-color: #fafafa;
 }
 
-*,
-*:before,
-*:after {
+@media (prefers-color-scheme: dark) {
+  :root {
+    --base-text-color: rgba(255, 255, 255, 0.87);
+    --base-bg-color: #040d19;
+    --text-active-color: #93c5fd;
+    --text-error-color: #e24c4c;
+    --active-bg-color: #1d2530;
+  }
+}
+
+* {
   box-sizing: border-box;
 }
 
 body {
-  font: 14px/1.15 Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   color: var(--base-text-color);
-  background: var(--base-bg-color);
+  background-color: var(--base-bg-color);
   margin: 0;
 }
 
 .wrapper {
-  width: 210px;
+  width: 230px;
   max-width: 100%;
   padding: 10px;
+  max-height: 450px;
+  overflow: auto;
 }
 
 /* Extensions list */
 
 .extensions {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   list-style: none;
   margin: -10px;
   padding: 0;
@@ -40,6 +52,8 @@ body {
   width: 100%;
   padding: 5px;
   cursor: pointer;
+  align-items: center;
+  gap: 5px;
 }
 
 .extensions__item:hover {
@@ -58,7 +72,7 @@ body {
   width: 16px;
   height: auto;
   border: 0;
-  margin-right: 5px;
+  object-fit: contain;
   filter: grayscale(1);
 }
 
@@ -72,6 +86,7 @@ body {
 
 .note {
   font-weight: bold;
+  padding: 5px 0;
 }
 
 .note--error {