Merge pull request #2 from sagynbek/upgrade-manifest-to-v3

Upgrade manifest to v3

src/_locales/en.config

@@ -14,7 +14,7 @@ Open next episode automatically
 Automatically play video
 
 @enable_fullscreen
-Enable auto fullscreen 
+Enable auto fullscreen (for better experience press F11 on Windows or Control+Command+F on Mac and go to fullscreen once, it will be full screen in next episodes) 
 
 @video_speed
 Video speed

src/_locales/ru.config

@@ -14,7 +14,7 @@ Jut.su Extension добавляет новые функции поверх ва
 Автоматически воспроизводить видео
 
 @enable_fullscreen
-Включить полноэкранный режим автоматически
+Включить полноэкранный режим автоматически (для лучшего опыта нажмите F11 на Windows или Control+Command+F на Mac и перейдите в полноэкранный режим один раз, он будет автоматически включаться в следующих эпизодах)
 
 @video_speed
 Скорость видео

src/inject/index.ts

@@ -2,4 +2,3 @@ import { initPlayer } from "./player/player";
 
 
 initPlayer();
-chrome.runtime.sendMessage({ "message": "activate_icon" });

src/inject/models/user-preference.ts

@@ -16,14 +16,14 @@ export class UserPreference {
   }
 
   private onStorageChange = (changes: { [key: string]: chrome.storage.StorageChange; }) => {
-    for (let key in changes) {
+    for (const key in changes) {
       const storageChange = changes[key];
 
       this.observables.forEach(({ preference, onChange }) => {
         if (preference === key) {
           onChange(storageChange.newValue);
         }
-      })
+      });
     }
   }
 

src/inject/player/auto-full-screen.ts

@@ -33,8 +33,7 @@ export class AutoFullScreen<T extends HTMLDivElement> extends BaseModel<T> {
   }
 
   private handleLastTriggerTime = (lastTriggerTime) => {
-    // @ts-ignore
-    if (lastTriggerTime && (new Date() - new Date(lastTriggerTime)) < TOLERATE_AUTO_FULL_SCREEN_IN_MS) {
+    if (lastTriggerTime && (new Date().getTime() - new Date(lastTriggerTime).getTime()) < TOLERATE_AUTO_FULL_SCREEN_IN_MS) {
       this.nextEpisodeLastTriggerTimeFitsTime = true;
     }
   }
@@ -58,8 +57,8 @@ export class AutoFullScreen<T extends HTMLDivElement> extends BaseModel<T> {
 
     document.addEventListener("mousedown", this.exitCssFullScreen);
     document.addEventListener("keyup", (e) => {
-      // F11's keycode = 122
-      if (e.keyCode !== 122) {
+      // check if e is not F11 (Windows full screen) or Control+Command+F (Mac full screen) or arrow keys
+      if (e.key !== "F11" && !(e.ctrlKey && e.metaKey && e.key === "f") && !["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
         this.exitCssFullScreen();
       }
     });

src/manifest.json

@@ -1,11 +1,11 @@
 {
-    "manifest_version": 2,
+    "manifest_version": 3,
     "name": "__MSG_extension_name__",
-    "version": "0.8",
+    "version": "0.9",
     "author": "Sagynbek Kenzhebaev",
     "description": "__MSG_extension_description__",
     "default_locale": "en",
-    "page_action": {
+    "action": {
         "default_title": "Jut.su Extension",
         "default_popup": "ui/popup/index.html"
     },
@@ -14,10 +14,6 @@
         "48": "icons/icon48.png",
         "16": "icons/icon16.png"
     },
-    "background": {
-        "persistent": true,
-        "page": "background/index.html"
-    },
     "content_scripts": [
         {
             "matches": [
@@ -33,12 +29,21 @@
         }
     ],
     "web_accessible_resources": [
-        "ui/themes/dark.css",
-        "ui/themes/default.css",
-        "icons/pip-icon.png"
+        {
+            "resources": [
+                "ui/themes/dark.css",
+                "ui/themes/default.css",
+                "icons/pip-icon.png"
+            ],
+            "matches": [
+                "https://*.jut.su/*"
+            ]
+        }
     ],
     "permissions": [
-        "storage",
+        "storage"
+    ],
+    "host_permissions": [
         "https://*.jut.su/*"
     ]
 }

src/ui/popup/index.html

@@ -52,11 +52,11 @@ <h1 id="title">
         __MSG_video_speed__
     </div>
     <button class="btn-reset" id="reset-config">__MSG_reset_config__</button>
-    <hr />
+    <!-- <hr />
 
     <div class="features">
         <label for="switch" class="heading">__MSG_request_features__</label>
-    </div>
+    </div> -->
 
     <script src="index.js"></script>
 </body>

src/ui/popup/style.less

@@ -3,7 +3,8 @@ body {
   min-width: 300px;
   min-height: 50px;
   background-color: #29303b;
-  color: white
+  color: white;
+  margin-bottom: 1em;
 }
 
 body div{
@@ -89,16 +90,23 @@ input:checked + .slider:before {
 }
 
 button{
-  background-color: #2196F3;
+  background-color: #15619e;
   border: none;
   color: white;
   padding: 8px 15px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
+
+  &:hover {
+    background-color: #2196F3;
+  }
 }
 
 .btn-reset{
+  float:right;
   background-color: 2196F3;
+  margin-bottom: 1em;
+  border-radius: 8px;
 }

tasks/bundle-js.js

@@ -39,18 +39,6 @@ function patchFirefoxJS(/** @type {string} */code) {
 
 /** @type {JSEntry[]} */
 const jsEntries = [
-  {
-    src: "src/background/index.ts",
-    dest: "background/index.js",
-    reloadType: reload.FULL,
-    async postBuild({ debug }) {
-      const destPath = `${getDestDir({ debug })}/${this.dest}`;
-      const ffDestPath = `${getDestDir({ debug, firefox: true })}/${this.dest}`;
-      const code = await fs.readFile(destPath, "utf8");
-      await fs.outputFile(ffDestPath, patchFirefoxJS(code));
-    },
-    watchFiles: null,
-  },
   {
     src: "src/inject/index.ts",
     dest: "inject/index.js",