From e356ced3e9cbf70ac39dff8d480b0316854ec6ca Mon Sep 17 00:00:00 2001 From: moshangqi <2509678669@qq.com> Date: Fri, 22 Dec 2023 16:21:41 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20content-script=20showMessage=20?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/background/actionListener/tab.ts | 38 ++- .../SuperSideBar/impl/ClipAssistant/index.tsx | 21 +- src/core/bridge/background/index.ts | 25 +- src/core/bridge/background/tab.ts | 54 ++-- src/core/chrome.ts | 29 -- src/core/parseDom/index.ts | 4 +- src/hooks/useCheckVersion.ts | 7 +- src/isomorphic/background/tab.ts | 2 + src/isomorphic/event/contentScript.ts | 16 - src/pages/inject/AreaSelector/app.tsx | 1 - src/pages/inject/WordMark/Editor/index.tsx | 3 +- src/pages/inject/WordMark/app.tsx | 269 ---------------- .../{app.module.less => index.module.less} | 1 - src/pages/inject/WordMark/index.tsx | 290 ++++++++++++++++-- src/pages/inject/action-listener.tsx | 90 +----- src/pages/inject/app.module.less | 27 ++ src/pages/inject/app.tsx | 54 +++- src/pages/inject/content-scripts.ts | 15 +- src/pages/setting/shortcut/index.tsx | 4 +- src/styles/inject.less | 27 -- 20 files changed, 430 insertions(+), 547 deletions(-) delete mode 100644 src/core/chrome.ts delete mode 100644 src/pages/inject/WordMark/app.tsx rename src/pages/inject/WordMark/{app.module.less => index.module.less} (99%) delete mode 100644 src/styles/inject.less diff --git a/src/background/actionListener/tab.ts b/src/background/actionListener/tab.ts index 9b82f896..fdfc2bcc 100644 --- a/src/background/actionListener/tab.ts +++ b/src/background/actionListener/tab.ts @@ -1,6 +1,5 @@ import { OperateTabEnum, IOperateTabData } from '@/isomorphic/background/tab'; -import Chrome from '@/background/core/chromeExtension'; -import { ContentScriptEvents } from '@/isomorphic/event/contentScript'; +import chromeExtension from '@/background/core/chromeExtension'; import { RequestMessage } from './index'; export async function createTabActionListener( @@ -8,29 +7,46 @@ export async function createTabActionListener( callback: (params: any) => void, sender: chrome.runtime.MessageSender, ) { - const { type, url } = request.data; + const { type, url, data } = request.data; + const currentTab = await chromeExtension.tabs.getCurrentTab(sender.tab); switch (type) { case OperateTabEnum.screenShot: { - const tabs = await Chrome.tabs.query({ lastFocusedWindow: true }); - const res = await Chrome.tabs.captureVisibleTab(tabs[0].windowId as number); + const res = await chromeExtension.tabs.captureVisibleTab(currentTab.windowId as number); callback(res); break; } case OperateTabEnum.getCurrent: { - const tab = await Chrome.tabs.query({ lastFocusedWindow: true, active: true }); - callback(tab?.[0]); + callback(currentTab); break; } case OperateTabEnum.create: { - Chrome.tabs.create({ url }); + chromeExtension.tabs.create({ url }); callback(true); break; } case OperateTabEnum.getDocument: { - const res = await Chrome.sendMessageToCurrentTab({ - action: ContentScriptEvents.GetDocument, + const result = await chromeExtension.scripting.executeScript({ + target: { tabId: currentTab.id as number }, + func: () => { + return { + url: window.location.href, + html: document.documentElement.outerHTML, + title: document.title, + }; + }, }); - callback(res); + callback(result[0].result); + break; + } + case OperateTabEnum.showMessage: { + chromeExtension.scripting.executeScript({ + target: { tabId: currentTab.id as number }, + args: [{ config: data }], + func: args => { + return window._yuque_ext_app.showMessage(args.config); + }, + }); + callback(true); break; } default: { diff --git a/src/components/SuperSideBar/impl/ClipAssistant/index.tsx b/src/components/SuperSideBar/impl/ClipAssistant/index.tsx index 78ac0720..93a4288c 100644 --- a/src/components/SuperSideBar/impl/ClipAssistant/index.tsx +++ b/src/components/SuperSideBar/impl/ClipAssistant/index.tsx @@ -26,10 +26,6 @@ import { ClipAssistantMessageKey, ClipAssistantMessageActions, } from '@/isomorphic/event/clipAssistant'; -import { - ContentScriptMessageActions, - ContentScriptMessageKey, -} from '@/isomorphic/event/contentScript'; import Env from '@/isomorphic/env'; import { IClipConfig } from '@/isomorphic/constant/clip'; import LarkIcon from '@/components/LarkIcon'; @@ -83,18 +79,11 @@ function ClipContent() { link: { text: string; href: string }, ) => { if (Env.isRunningHostPage) { - window.parent.postMessage( - { - key: ContentScriptMessageKey, - action: ContentScriptMessageActions.ShowMessage, - data: { - text, - type: 'success', - link, - }, - }, - '*', - ); + backgroundBridge.tab.showMessage({ + text, + type: 'success', + link, + }); return; } message.success( diff --git a/src/core/bridge/background/index.ts b/src/core/bridge/background/index.ts index b214c410..3c55f9dc 100644 --- a/src/core/bridge/background/index.ts +++ b/src/core/bridge/background/index.ts @@ -1,4 +1,3 @@ -import Chrome from '@/core/chrome'; import { MapT, OneArgFunctionT } from '@/common/declare'; import { createStorageBridge } from './stroge'; import { createUserBridge } from './user'; @@ -20,21 +19,15 @@ export interface IBridgeError { type IBridgeCallback = (res: any) => void; -export type ICallBridgeImpl = ( - bridgeName: string, - params?: IBridgeParams, - callback?: IBridgeCallback, -) => void; - -export function callBackgroundBridge( - bridgeName: string, - data?: MapT, - callback?: OneArgFunctionT, -) { - callback = callback || function() { - // ignore - }; - Chrome.runtime.sendMessage( +export type ICallBridgeImpl = (bridgeName: string, params?: IBridgeParams, callback?: IBridgeCallback) => void; + +export function callBackgroundBridge(bridgeName: string, data?: MapT, callback?: OneArgFunctionT) { + callback = + callback || + function () { + // ignore + }; + chrome.runtime.sendMessage( { action: bridgeName, data, diff --git a/src/core/bridge/background/tab.ts b/src/core/bridge/background/tab.ts index 2870e7b6..f414d91a 100644 --- a/src/core/bridge/background/tab.ts +++ b/src/core/bridge/background/tab.ts @@ -7,35 +7,23 @@ export function createTabBridge(impl: ICallBridgeImpl) { tab: { async screenShot() { return new Promise(resolve => { - impl( - BackgroundEvents.OperateTab, - { type: OperateTabEnum.screenShot }, - res => { - resolve(res); - }, - ); + impl(BackgroundEvents.OperateTab, { type: OperateTabEnum.screenShot }, res => { + resolve(res); + }); }); }, async getCurrent(): Promise { return new Promise(resolve => { - impl( - BackgroundEvents.OperateTab, - { type: OperateTabEnum.getCurrent }, - res => { - resolve(res); - }, - ); + impl(BackgroundEvents.OperateTab, { type: OperateTabEnum.getCurrent }, res => { + resolve(res); + }); }); }, async create(url: string) { return new Promise(resolve => { - impl( - BackgroundEvents.OperateTab, - { type: OperateTabEnum.create, url }, - res => { - resolve(res); - }, - ); + impl(BackgroundEvents.OperateTab, { type: OperateTabEnum.create, url }, res => { + resolve(res); + }); }); }, async getDocument(): Promise<{ @@ -44,13 +32,23 @@ export function createTabBridge(impl: ICallBridgeImpl) { title: string; }> { return new Promise(resolve => { - impl( - BackgroundEvents.OperateTab, - { type: OperateTabEnum.getDocument }, - res => { - resolve(res); - }, - ); + impl(BackgroundEvents.OperateTab, { type: OperateTabEnum.getDocument }, res => { + resolve(res); + }); + }); + }, + async showMessage(data: { + type: 'error' | 'success'; + text: string; + link?: { + text: string; + href: string; + }; + }) { + return new Promise(resolve => { + impl(BackgroundEvents.OperateTab, { type: OperateTabEnum.showMessage, data }, res => { + resolve(res); + }); }); }, }, diff --git a/src/core/chrome.ts b/src/core/chrome.ts deleted file mode 100644 index 3a41b52a..00000000 --- a/src/core/chrome.ts +++ /dev/null @@ -1,29 +0,0 @@ -const _globalThis = typeof window !== 'undefined' ? window : global; - -const { - action, - cookies, - contextMenus, - runtime, - storage, - tabs, - webRequest, - declarativeNetRequest, - windows, - downloads, - scripting, -} = _globalThis.chrome; - -export default { - action, - cookies, - contextMenus, - runtime, - storage, - tabs, - webRequest, - declarativeNetRequest, - windows, - downloads, - scripting, -}; diff --git a/src/core/parseDom/index.ts b/src/core/parseDom/index.ts index 2029e021..1da4a182 100644 --- a/src/core/parseDom/index.ts +++ b/src/core/parseDom/index.ts @@ -13,12 +13,12 @@ class ParseDom { } async parseDom(domArray: Element[]) { - const result: Array = []; + let result: Array = []; for (const dom of domArray) { if (this.isYuqueContent(dom)) { try { const htmlArray = await this.parsePageYuqueContent(dom); - result.push(htmlArray[0]); + result = result.concat(htmlArray); continue; } catch (error) { // diff --git a/src/hooks/useCheckVersion.ts b/src/hooks/useCheckVersion.ts index 36f01c8d..433ea0c7 100644 --- a/src/hooks/useCheckVersion.ts +++ b/src/hooks/useCheckVersion.ts @@ -1,5 +1,4 @@ import { useState, useEffect } from 'react'; -import Chrome from '@/core/chrome'; async function fetchAndParseXML(updateUrl: string): Promise { const response = await fetch( @@ -16,9 +15,7 @@ async function fetchAndParseXML(updateUrl: string): Promise { const root = xml.documentElement; // @ts-ignore - const version = root - .getElementsByTagName('updatecheck')[0] - ?.getAttribute?.('version'); + const version = root.getElementsByTagName('updatecheck')[0]?.getAttribute?.('version'); return version; } @@ -36,7 +33,7 @@ export function useCheckVersion(): string | null { }; useEffect(() => { - const manifest = Chrome.runtime.getManifest(); + const manifest = chrome.runtime.getManifest(); if (process.env.NODE_ENV !== 'production') { console.log('update_url: %s', manifest?.update_url); } diff --git a/src/isomorphic/background/tab.ts b/src/isomorphic/background/tab.ts index 7cf418c4..1702e35d 100644 --- a/src/isomorphic/background/tab.ts +++ b/src/isomorphic/background/tab.ts @@ -3,9 +3,11 @@ export enum OperateTabEnum { getCurrent = 'getCurrent', create = 'create', getDocument = 'getDocument', + showMessage = 'showMessage', } export interface IOperateTabData { type: OperateTabEnum; url?: string; + data?: any; } diff --git a/src/isomorphic/event/contentScript.ts b/src/isomorphic/event/contentScript.ts index 012cedc1..f0a9c40a 100644 --- a/src/isomorphic/event/contentScript.ts +++ b/src/isomorphic/event/contentScript.ts @@ -3,20 +3,4 @@ export enum ContentScriptEvents { LevitateConfigChange = 'contentScript/levitateConfigChange', ForceUpgradeVersion = 'contentScript/forceUpgradeVersion', LoginOut = 'contentScript/LoginOut', - GetDocument = 'contentScript/getDocument', -} - -export const ContentScriptMessageKey = 'ContentScriptMessageKey'; - -export enum ContentScriptMessageActions { - ShowMessage = 'showMessage', -} - -export interface IShowMessageData { - type: 'error' | 'success'; - text: string; - link?: { - text: string; - href: string; - }; } diff --git a/src/pages/inject/AreaSelector/app.tsx b/src/pages/inject/AreaSelector/app.tsx index 0774ef3c..23bc62c3 100644 --- a/src/pages/inject/AreaSelector/app.tsx +++ b/src/pages/inject/AreaSelector/app.tsx @@ -80,7 +80,6 @@ function App(props: IAppProps) { const target = e.composedPath()?.[0] as Element; e.stopImmediatePropagation(); e.preventDefault(); - console.log(target, target.closest('.select-confirm')); if (target.closest('.select-confirm')) { onSave(); } else if (target?.closest('.select-inner')) { diff --git a/src/pages/inject/WordMark/Editor/index.tsx b/src/pages/inject/WordMark/Editor/index.tsx index 5a5e3730..ae529f40 100644 --- a/src/pages/inject/WordMark/Editor/index.tsx +++ b/src/pages/inject/WordMark/Editor/index.tsx @@ -5,7 +5,6 @@ import React, { useImperativeHandle, useRef, } from 'react'; -import Chrome from '@/core/chrome'; import { EDITOR_IFRAME_CONTAINER_ID, EditorMessageType, @@ -172,7 +171,7 @@ export default forwardRef((props, ref) => { return (