feat: Support opening web ui in side panel (beta)

alexhua · Nov 10, 2024 · 6ed085e · 6ed085e
1 parent 463e21e
commit 6ed085e
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 7 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -180,10 +180,13 @@
       "message":"Popup"
    },
    "WebUIOpenStyle2":{
-      "message":"New tab"
+      "message":"New Tab"
    },
    "WebUIOpenStyle3":{
-      "message":"New window"
+      "message":"New Window"
+   },
+   "WebUIOpenStyle4":{
+      "message":"Side Panel"
    },
    "openWebUIStr":{
       "message":"Open AriaNG"
@@ -255,7 +258,7 @@
       "message":"Creating download task over insecure HTTP/WebSocket protocol can potentially expose Secret Key and related website Cookies on the public network."
    },
    "AutoDownloadCookiesTooltipDes":{
-      "message": "The related website cookies will not be attached when auto-download or direct export."
+      "message": "For insecure RPC, the related website cookies will not be attached when auto-download or direct export."
    },
    "ManualDownloadCookiesTooltipDes":{
       "message": "You should determine whether to delete the related website cookies when asking download settings."

diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json
@@ -185,6 +185,9 @@
    "WebUIOpenStyle3":{
       "message":"新しいウィンドウ"
    },
+   "WebUIOpenStyle4":{
+      "message":"サイドパネル"
+   },
    "openWebUIStr":{
       "message":"AriaNGを開く"
    },

diff --git a/_locales/ko/messages.json b/_locales/ko/messages.json
@@ -185,6 +185,9 @@
    "WebUIOpenStyle3": {
       "message": "새 창"
    },
+   "WebUIOpenStyle4":{
+      "message":"측면 패널"
+   },
    "openWebUIStr": {
       "message": "AriaNG 열기"
    },

diff --git a/_locales/uk/messages.json b/_locales/uk/messages.json
@@ -185,6 +185,9 @@
    "WebUIOpenStyle3": {
       "message": "Нове вікно"
    },
+   "WebUIOpenStyle4":{
+      "message":"бічна панель"
+   },
    "openWebUIStr": {
       "message": "Відкрити AriaNG"
    },

diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json
@@ -185,6 +185,9 @@
    "WebUIOpenStyle3":{
       "message":"新窗口"
    },
+   "WebUIOpenStyle4":{
+      "message":"侧边栏"
+   },
    "openWebUIStr":{
       "message":"打开AriaNG"
    },
@@ -255,7 +258,7 @@
       "message":"通过不安全的 HTTP/WebSocket 协议创建下载任务可能会导致 Secret Key 和相关网站的 Cookies 信息暴露于公共网络。"
    },
    "AutoDownloadCookiesTooltipDes":{
-      "message": "在自动下载和右键导出下载时，将不会附带相关网站的Cookies信息。"
+      "message": "使用不安全的RPC协议，在自动下载和右键导出下载时，将不会附带相关网站的Cookies信息。"
    },
    "ManualDownloadCookiesTooltipDes":{
       "message": "在询问下载设置时，你需要决定是否删除相关网站的Cookies信息。"

diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json
@@ -185,6 +185,9 @@
    "WebUIOpenStyle3":{
       "message":"新視窗"
    },
+   "WebUIOpenStyle4":{
+      "message":"側邊面板"
+   },
    "openWebUIStr":{
       "message":"打開AriaNG"
    },
@@ -255,7 +258,7 @@
       "message":"使用不安全的HTTP/WebSocket協定創建下載工作可能會導致Secret Key和相關網站的Cookies資訊暴露於公共網絡。"
    },
    "AutoDownloadCookiesTooltipDes":{
-      "message": "在自動下載和右鍵匯出下載時，將不會附帶相關網站的Cookies資訊。"
+      "message": "使用不安全的RPC協定，在自動下載和右鍵匯出下載時，將不會附帶相關網站的Cookies資訊。"
    },
    "ManualDownloadCookiesTooltipDes":{
       "message": "在詢問下載設定時，你需要决定是否删除相關網站的Cookies資訊。"

diff --git a/background.js b/background.js
@@ -8,6 +8,7 @@ const NID_TASK_NEW = "NID_TASK_NEW";
 const NID_TASK_STOPPED = "NID_TASK_STOPPED";
 const NID_CAPTURED_OTHERS = "NID_CAPTURED_OTHERS";
 
+var CurrentWindowId = 0;
 var CurrentTabUrl = "about:blank";
 var MonitorId = -1;
 var MonitorInterval = 3000; // Aria2 monitor interval 3000ms
@@ -315,6 +316,20 @@ async function launchUI(info) {
     const index = chrome.runtime.getURL('ui/ariang/index.html');
     let webUiUrl = index + '#!'; // launched from notification, option menu or browser toolbar icon
 
+    let sidePanelOpened = false;
+    if (Configs.webUIOpenStyle == "sidePanel") {
+        try {
+            if (info && 'id' in info) {
+                await chrome.sidePanel.open({ tabId: info.id });
+            } else {
+                await chrome.sidePanel.open({ windowId: CurrentWindowId });
+            };
+            sidePanelOpened = true;
+        } catch {
+            sidePanelOpened = false;
+        }
+    }
+
     /* assemble the final web ui url */
     if (info?.hasOwnProperty("filename") && info.url) { // launched for new task
         const downloadItem = info;
@@ -341,6 +356,15 @@ async function launchUI(info) {
         webUiUrl = index;
     }
 
+    if (sidePanelOpened) {
+        if (info && 'id' in info) {
+            await chrome.sidePanel.setOptions({ tabId: info.id, path: webUiUrl });
+        } else {
+            await chrome.sidePanel.setOptions({ path: webUiUrl });
+        }
+        return;
+    }
+
     chrome.tabs.query({ "url": index }).then(function (tabs) {
         if (tabs?.length > 0) {
             chrome.windows.update(tabs[0].windowId, {
@@ -526,7 +550,7 @@ function onMenuClick(info, tab) {
     let downloadItem = { url, referrer, filename };
 
     if (info.menuItemId == "MENU_OPEN_WEB_UI") {
-        launchUI();
+        launchUI(tab);
     } else if (info.menuItemId == "MENU_START_ARIA2") {
         const url = chrome.runtime.getURL('aria2.html');
         chrome.tabs.create({ url });
@@ -549,6 +573,7 @@ function onMenuClick(info, tab) {
         if (Configs.askBeforeExport) {
             const rpcItem = getRpcServer(downloadItem.url);
             downloadItem.dir = rpcItem.location;
+            downloadItem.id = tab.id;
             launchUI(downloadItem);
         } else {
             let id = info.menuItemId.split('-')[1];
@@ -749,6 +774,16 @@ async function monitorAria2() {
     }
 }
 
+async function resetSidePanel(tabId) {
+    if (Configs.webUIOpenStyle == "sidePanel") {
+        let { path } = await chrome.sidePanel.getOptions(tabId ? { tabId } : undefined);
+        const defaultPath = 'ui/ariang/index.html';
+        if (!path.endsWith(defaultPath)) {
+            chrome.sidePanel.setOptions(tabId ? { tabId, path: defaultPath } : { path: defaultPath });
+        }
+    }
+}
+
 function registerAllListeners() {
     chrome.action.onClicked.addListener(launchUI);
     chrome.contextMenus.onClicked.addListener(onMenuClick);
@@ -757,16 +792,19 @@ function registerAllListeners() {
             CurrentTabUrl = tab?.url || "about:blank";
             updateOptionMenu(tab);
         }
+        resetSidePanel(tabId);
     });
 
     chrome.tabs.onActivated.addListener(function (activeInfo) {
         chrome.tabs.get(activeInfo.tabId).then(function (tab) {
             CurrentTabUrl = tab?.url || "about:blank";
             updateOptionMenu(tab);
         });
+        resetSidePanel(activeInfo.tabId);
     });
 
     chrome.windows.onFocusChanged.addListener(function (windowId) {
+        CurrentWindowId = windowId;
         chrome.tabs.query({ windowId: windowId, active: true }).then(function (tabs) {
             if (tabs?.length > 0) {
                 CurrentTabUrl = tabs[0].url || "about:blank";
@@ -883,6 +921,7 @@ function init() {
         Configs.monitorAria2 ? enableMonitor() : disableMonitor();
         url = Configs.captureMagnet ? "https://github.com/alexhua/Aria2-Explore/issues/98" : '';
         chrome.runtime.setUninstallURL(url);
+        chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: Configs.webUIOpenStyle == "sidePanel" });
     });
 }
 

diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
    "short_name": "A2E",
    "version": "2.5.5",
    "manifest_version": 3,
-   "minimum_chrome_version": "100.0.0",
+   "minimum_chrome_version": "116.0.0",
    "default_locale": "en",
    "description": "__MSG_description__",
    "options_page": "options.html",
@@ -16,6 +16,7 @@
       "storage",
       "system.display",
       "scripting",
+      "sidePanel",
       "power"
    ],
    "host_permissions": [
@@ -31,6 +32,9 @@
       },
       "default_title": "__MSG_appName__"
    },
+   "side_panel": {
+      "default_path": "ui/ariang/index.html"
+   },
    "content_security_policy": {
       "extension_pages": "script-src 'self';object-src 'self';"
    },

diff --git a/options.html b/options.html
@@ -141,6 +141,12 @@
               __MSG_WebUIOpenStyle3__
             </label>
           </div>
+          <div class="form-check">
+            <input class="form-check-input" type="radio" id="sidePanel" name="webUIOpenStyle" value="sidePanel">
+            <label for="sidePanel">
+              __MSG_WebUIOpenStyle4__ (Beta)
+            </label>
+          </div>
         </div>
       </div>