feat: 增加全文剪藏功能 & 支持 InjectScript & 侧边栏支持拖拽 & 支持 Beta 版打包 & 支持反馈来源识别 (#…

…228)

* feat: 增加全文剪藏功能 & 支持 InjectScript & 侧边栏支持拖拽

package.json

@@ -37,6 +37,7 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
+    "@mozilla/readability": "^0.5.0",
     "antd": "^5.7.3",
     "bowser": "^2.11.0",
     "classnames": "^2.2.6",

src/background/actionListener/clip.ts

@@ -1,35 +1,61 @@
-import {
-  OperateClipEnum,
-  IOperateClipData,
-} from '@/isomorphic/background/clip';
-import Chrome from '@/background/core/chrome';
-import { ContentScriptEvents } from '@/isomorphic/event/contentScript';
+import { OperateClipEnum, IOperateClipData } from '@/isomorphic/background/clip';
+import chromeExtension from '@/background/core/chromeExtension';
 import { RequestMessage } from './index';
 
 export async function createClipActionListener(
   request: RequestMessage<IOperateClipData>,
   callback: (params: any) => void,
+  sender: chrome.runtime.MessageSender,
 ) {
-  const { type, isRunningInjectPage } = request.data;
+  const { type, isRunningHostPage } = request.data;
+  const currentTab = await chromeExtension.tabs.getCurrentTab(sender.tab);
   switch (type) {
     case OperateClipEnum.screenOcr: {
-      const res = await Chrome.sendMessageToCurrentTab({
-        action: ContentScriptEvents.ScreenOcr,
-        data: {
-          isRunningInjectPage,
+      chromeExtension.scripting.executeScript(
+        {
+          target: { tabId: currentTab.id as number },
+          args: [{ isRunningHostPage }],
+          func: args => {
+            return window._yuque_ext_app.clipScreenOcr({
+              isRunningHostPage: args.isRunningHostPage,
+            });
+          },
         },
-      });
-      callback(res);
+        res => {
+          callback(res[0].result);
+        },
+      );
       break;
     }
     case OperateClipEnum.selectArea: {
-      const res = await Chrome.sendMessageToCurrentTab({
-        action: ContentScriptEvents.SelectArea,
-        data: {
-          isRunningInjectPage,
+      chromeExtension.scripting.executeScript(
+        {
+          target: { tabId: currentTab.id as number },
+          args: [{ isRunningHostPage }],
+          func: args => {
+            return window._yuque_ext_app.clipSelectArea({
+              isRunningHostPage: args.isRunningHostPage,
+            });
+          },
+        },
+        res => {
+          callback(res[0].result);
+        },
+      );
+      break;
+    }
+    case OperateClipEnum.clipPage: {
+      chromeExtension.scripting.executeScript(
+        {
+          target: { tabId: currentTab?.id as number },
+          func: () => {
+            return window._yuque_ext_app.parsePage();
+          },
+        },
+        res => {
+          callback(res[0]?.result);
         },
-      });
-      callback(res);
+      );
       break;
     }
     default: {

src/background/actionListener/configManager.ts

@@ -1,8 +1,5 @@
 import { levitateConfigManager } from '@/background/core/configManager/levitate';
-import {
-  IOperateConfigManagerData,
-  OperateConfigManagerEnum,
-} from '@/isomorphic/background/configManager';
+import { IOperateConfigManagerData, OperateConfigManagerEnum } from '@/isomorphic/background/configManager';
 import { wordMarkConfigManager } from '../core/configManager/wordMark';
 import { clipConfigManager } from '../core/configManager/clip';
 import { RequestMessage } from './index';
@@ -16,6 +13,7 @@ const managerMap = {
 export async function createManagerConfigActionListener(
   request: RequestMessage<IOperateConfigManagerData>,
   callback: (params: any) => void,
+  sender: chrome.runtime.MessageSender,
 ) {
   const { type, value, key, managerType, option = {} } = request.data;
   const manage = managerMap[managerType];

src/background/actionListener/index.ts

@@ -1,4 +1,4 @@
-import Chrome from '@/background/core/chrome';
+import Chrome from '@/background/core/chromeExtension';
 import { BackgroundEvents } from '@/isomorphic/background';
 import { createStorageActionListener } from './storage';
 import { createUserActionListener } from './user';
@@ -8,8 +8,6 @@ import { createSidePanelActionListener } from './sidePanel';
 import { createRequestActionListener } from './request';
 import { createManagerConfigActionListener } from './configManager';
 
-type MessageSender = chrome.runtime.MessageSender;
-
 type SendResponse = (response: any) => void;
 
 export interface RequestMessage<T> {
@@ -19,38 +17,34 @@ export interface RequestMessage<T> {
 
 export const initBackGroundActionListener = () => {
   Chrome.runtime.onMessage.addListener(
-    (
-      request: RequestMessage<any>,
-      _sender: MessageSender,
-      sendResponse: SendResponse,
-    ) => {
+    (request: RequestMessage<any>, _sender: chrome.runtime.MessageSender, sendResponse: SendResponse) => {
       switch (request.action) {
         case BackgroundEvents.OperateUser: {
-          createUserActionListener(request, sendResponse);
+          createUserActionListener(request, sendResponse, _sender);
           break;
         }
         case BackgroundEvents.OperateStorage: {
-          createStorageActionListener(request, sendResponse);
+          createStorageActionListener(request, sendResponse, _sender);
           break;
         }
         case BackgroundEvents.OperateClip: {
-          createClipActionListener(request, sendResponse);
+          createClipActionListener(request, sendResponse, _sender);
           break;
         }
         case BackgroundEvents.OperateTab: {
-          createTabActionListener(request, sendResponse);
+          createTabActionListener(request, sendResponse, _sender);
           break;
         }
         case BackgroundEvents.OperateSidePanel: {
-          createSidePanelActionListener(request, sendResponse);
+          createSidePanelActionListener(request, sendResponse, _sender);
           break;
         }
         case BackgroundEvents.OperateRequest: {
-          createRequestActionListener(request, sendResponse);
+          createRequestActionListener(request, sendResponse, _sender);
           break;
         }
         case BackgroundEvents.OperateManagerConfig: {
-          createManagerConfigActionListener(request, sendResponse);
+          createManagerConfigActionListener(request, sendResponse, _sender);
           break;
         }
         default: {

src/background/actionListener/request.ts

@@ -6,6 +6,7 @@ import { RequestMessage } from './index';
 export async function createRequestActionListener(
   request: RequestMessage<IOperateRequestData>,
   callback: (params: any) => void,
+  sender: chrome.runtime.MessageSender,
 ) {
   const { url, config, options = {} } = request.data;
 

src/background/actionListener/sidePanel.ts

@@ -1,35 +1,41 @@
-import {
-  OperateSidePanelEnum,
-  IOperateSidePanelData,
-} from '@/isomorphic/background/sidePanel';
-import Chrome from '@/background/core/chrome';
-import { ContentScriptEvents } from '@/isomorphic/event/contentScript';
+import { OperateSidePanelEnum, IOperateSidePanelData } from '@/isomorphic/background/sidePanel';
+import chromeExtension from '../core/chromeExtension';
 import { RequestMessage } from './index';
 
 export async function createSidePanelActionListener(
   request: RequestMessage<IOperateSidePanelData>,
   callback: (params: any) => void,
+  sender: chrome.runtime.MessageSender,
 ) {
   const { type } = request.data;
+  const currentTab = await chromeExtension.tabs.getCurrentTab(sender.tab);
   switch (type) {
     case OperateSidePanelEnum.close: {
-      const res = await Chrome.sendMessageToCurrentTab({
-        action: ContentScriptEvents.ToggleSidePanel,
-        data: {
-          forceVisible: false,
+      chromeExtension.scripting.executeScript(
+        {
+          target: { tabId: currentTab?.id as number },
+          func: () => {
+            return window._yuque_ext_app.toggleSidePanel(false);
+          },
         },
-      });
-      callback(res);
+        res => {
+          callback(res[0]?.result);
+        },
+      );
       break;
     }
     case OperateSidePanelEnum.open: {
-      const res = await Chrome.sendMessageToCurrentTab({
-        action: ContentScriptEvents.ToggleSidePanel,
-        data: {
-          forceVisible: true,
+      chromeExtension.scripting.executeScript(
+        {
+          target: { tabId: currentTab?.id as number },
+          func: () => {
+            return window._yuque_ext_app.toggleSidePanel(true);
+          },
+        },
+        res => {
+          callback(res[0]?.result);
         },
-      });
-      callback(res);
+      );
       break;
     }
     default: {

src/background/actionListener/storage.ts

@@ -1,13 +1,11 @@
-import {
-  IOperateStorageData,
-  OperateStorageEnum,
-} from '@/isomorphic/background/storage';
+import { IOperateStorageData, OperateStorageEnum } from '@/isomorphic/background/storage';
 import { storage } from '@/isomorphic/storage';
 import { RequestMessage } from './index';
 
 export async function createStorageActionListener(
   request: RequestMessage<IOperateStorageData>,
   callback: (params: any) => void,
+  sender: chrome.runtime.MessageSender,
 ) {
   const { type, key, data } = request.data;
   switch (type) {

src/background/actionListener/tab.ts

@@ -1,14 +1,12 @@
-import {
-  OperateTabEnum,
-  IOperateTabData,
-} from '@/isomorphic/background/tab';
-import Chrome from '@/background/core/chrome';
+import { OperateTabEnum, IOperateTabData } from '@/isomorphic/background/tab';
+import Chrome from '@/background/core/chromeExtension';
 import { ContentScriptEvents } from '@/isomorphic/event/contentScript';
 import { RequestMessage } from './index';
 
 export async function createTabActionListener(
   request: RequestMessage<IOperateTabData>,
   callback: (params: any) => void,
+  sender: chrome.runtime.MessageSender,
 ) {
   const { type, url } = request.data;
   switch (type) {

src/background/actionListener/user.ts

@@ -1,9 +1,6 @@
 import { pick } from 'lodash';
-import Chrome from '@/background/core/chrome';
-import {
-  IOperateUserData,
-  OperateUserEnum,
-} from '@/isomorphic/background/user';
+import Chrome from '@/background/core/chromeExtension';
+import { IOperateUserData, OperateUserEnum } from '@/isomorphic/background/user';
 import { IUser } from '@/isomorphic/interface';
 import { storage } from '@/isomorphic/storage';
 import requestFn from '@/background/core/request';
@@ -60,6 +57,7 @@ const removeWindow = (windowId: number) => {
 export async function createUserActionListener(
   request: RequestMessage<IOperateUserData>,
   callback: (params: any) => void,
+  sender: chrome.runtime.MessageSender,
 ) {
   const { type } = request.data;
   switch (type) {
@@ -76,12 +74,7 @@ export async function createUserActionListener(
         });
         if (status === 200) {
           const accountInfo = (data as any).data as IUser;
-          const value = pick(accountInfo, [
-            'id',
-            'login',
-            'name',
-            'avatar_url',
-          ]);
+          const value = pick(accountInfo, ['id', 'login', 'name', 'avatar_url']);
           const newValue = {
             ...value,
             login_at: Date.now(),

src/background/browser-action.ts

@@ -1,33 +1,29 @@
-import Chrome from '@/background/core/chrome';
-import { ContentScriptEvents } from '@/isomorphic/event/contentScript';
-
-function remindToRefreshPage(tabId: number) {
-  const msg = __i18n('你需要重新加载该页面才能剪藏。请重新加载页面后再试一次');
-  Chrome.scripting.executeScript({
-    target: { tabId },
-    args: [{ msg }],
-    func: (args: { msg: string }) => {
-      window.alert(args.msg); // eslint-disable-line
-    },
-  });
-}
+import chromeExtension from './core/chromeExtension';
 
 export function listenBrowserActionEvent() {
-  Chrome.action.onClicked.addListener(tab => {
-    Chrome.tabs.sendMessage(
-      tab.id as number,
+  chrome.action.onClicked.addListener(async tab => {
+    const currentTab = await chromeExtension.tabs.getCurrentTab(tab);
+    chromeExtension.scripting.executeScript(
       {
-        action: ContentScriptEvents.ToggleSidePanel,
+        target: { tabId: currentTab?.id as number },
+        func: () => {
+          try {
+            return window._yuque_ext_app.toggleSidePanel();
+          } catch (e) {
+            return { error: e };
+          }
+        },
       },
-      () => {
-        /**
-         * 插件更新后会断链接，需要提醒用户手动刷新下页面
-         */
-        if (
-          Chrome.runtime.lastError?.message ===
-          'Could not establish connection. Receiving end does not exist.'
-        ) {
-          remindToRefreshPage(tab.id as number);
+      res => {
+        if (res[0]?.result?.error) {
+          const msg = __i18n('你需要重新加载该页面才能剪藏。请重新加载页面后再试一次');
+          chromeExtension.scripting.executeScript({
+            target: { tabId: currentTab?.id as number },
+            args: [{ msg }],
+            func: (args: { msg: string }) => {
+              window.alert(args.msg); // eslint-disable-line
+            },
+          });
         }
       },
     );