feat: move popup to sidebar

entrypoints/background.ts

@@ -1,4 +1,34 @@
 export default defineBackground(() => {
+  chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
+    await chrome.sidePanel.setOptions({
+      tabId,
+      path: 'popup.html',
+      enabled: true,
+    });
+  });
+
+  // 单击直接打开 panel
+  chrome.sidePanel
+    .setPanelBehavior({ openPanelOnActionClick: true })
+    .catch((error) => console.error(error));
+
+  // 右键菜单
+  chrome.runtime.onInstalled.addListener(() => {
+    chrome.contextMenus.create({
+      id: 'usewiki2',
+      title: '打开 Usewiki2',
+      contexts: ['all'],
+    });
+  });
+
+  chrome.contextMenus.onClicked.addListener((info, tab) => {
+    if (info.menuItemId === 'usewiki2') {
+      chrome.sidePanel
+        .open({ tabId: tab?.id! })
+        .catch((error) => console.error(error));
+    }
+  });
+
   // browser.runtime.onInstalled.addListener(async ({ reason }) => {
   //   if (reason !== 'install') return;
   //   await browser.tabs.create({

entrypoints/popup/Popup.vue

@@ -174,7 +174,7 @@ function savePort(port: number) {
 </script>
 
 <template>
-  <div class="overflow-y-auto w-[600px] h-[550px]">
+  <div class="overflow-y-auto">
     <div class="sticky inset-x-0 top-0 backdrop-blur-sm rounded-md mb-2 z-10">
       <div class="flex justify-end">
         <!-- <ElBacktop :right="100" :bottom="100" /> -->

package.json

@@ -2,7 +2,7 @@
   "name": "usewiki2",
   "description": "Convert HTML to Markdown, and save to your computer, support nodejs tiddlywiki",
   "private": true,
-  "version": "1.6.0",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "wxt",

wxt.config.ts

@@ -60,6 +60,7 @@ export default defineConfig({
     name: 'Usewiki2',
     description: 'Usewiki2: usewiki 的 vue 版本',
     permissions: [
+      'sidePanel',
       'contextMenus',
       'alarms',
       'activeTab',
@@ -73,7 +74,15 @@ export default defineConfig({
       extension_pages: "script-src 'self'; object-src 'self'",
     },
     host_permissions: ['<all_urls>'],
+    // https://developer.chrome.com/docs/extensions/reference/api/sidePanel
+    sidebar_action: {
+      default_panel: 'popup.html',
+      // default_icon: 'icons/icon48.png',
+    },
 
+    action: {
+      default_title: '单击打开 Usewiki2',
+    },
     browser_action: {
       default_popup: 'popup.html',
       default_title: 'Usewiki2',