From 3460b686d29ceffd1b2aaa3fc70900e12bd2a3c2 Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 14 Feb 2022 16:38:45 +0800 Subject: [PATCH 01/20] feat: add web3 tab at instagram --- packages/icons/general/Web3Tab.tsx | 14 +++ packages/icons/general/index.ts | 1 + .../InjectedComponents/ProfileTab.tsx | 6 +- .../InjectedComponents/ProfileTabContent.tsx | 1 + .../instagram.com/collecting/indentity.ts | 65 ++++++++++ .../injection/web3tab/ProfileTab.tsx | 116 ++++++++++++++++++ .../injection/web3tab/ProfileTabContent.tsx | 60 +++++++++ .../instagram.com/ui-provider.ts | 6 + .../instagram.com/utils/selector.ts | 41 +++++++ .../instagram.com/utils/user.ts | 37 ++++++ .../twitter.com/injection/ProfileTab.tsx | 2 +- 11 files changed, 346 insertions(+), 3 deletions(-) create mode 100644 packages/icons/general/Web3Tab.tsx create mode 100644 packages/mask/src/social-network-adaptor/instagram.com/collecting/indentity.ts create mode 100644 packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx create mode 100644 packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx create mode 100644 packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts create mode 100644 packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts diff --git a/packages/icons/general/Web3Tab.tsx b/packages/icons/general/Web3Tab.tsx new file mode 100644 index 000000000000..e5a00bd13df2 --- /dev/null +++ b/packages/icons/general/Web3Tab.tsx @@ -0,0 +1,14 @@ +import { createIcon } from '../utils' + +export const Web3TabIcon = createIcon( + 'Web3TabIcon', + + + , + '0 0 13 12', +) diff --git a/packages/icons/general/index.ts b/packages/icons/general/index.ts index 36e95494a86d..efebc9d69736 100644 --- a/packages/icons/general/index.ts +++ b/packages/icons/general/index.ts @@ -87,3 +87,4 @@ export * from './Pin' export * from './Selected' export * from './Cram' export * from './TriangleWarning' +export * from './Web3Tab' diff --git a/packages/mask/src/components/InjectedComponents/ProfileTab.tsx b/packages/mask/src/components/InjectedComponents/ProfileTab.tsx index cd68ad891b04..0aa37cb88602 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTab.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTab.tsx @@ -9,8 +9,9 @@ export interface ProfileTabProps extends withClasses<'tab' | 'button' | 'selecte reset(): void children?: ReactElement // Required! This component don't have it own style. - classes: Record<'tab' | 'button' | 'selected', string> + classes: Record<'root' | 'button' | 'selected', string> title: string + icon?: React.ReactNode } export function ProfileTab(props: ProfileTabProps) { @@ -30,11 +31,12 @@ export function ProfileTab(props: ProfileTabProps) { }) return ( -
+
+ {props.icon} {title} {active && children ? children : null} diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx index e941b0e44853..e4737de245e9 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx @@ -46,6 +46,7 @@ export function ProfileTabContent(props: ProfileTabContentProps) { const [selectedTab, setSelectedTab] = useState() const identity = useCurrentVisitingIdentity() + const { value: addressNames, loading: loadingAddressNames } = useAddressNames(identity) const tabs = useActivatedPluginsSNSAdaptor('any') diff --git a/packages/mask/src/social-network-adaptor/instagram.com/collecting/indentity.ts b/packages/mask/src/social-network-adaptor/instagram.com/collecting/indentity.ts new file mode 100644 index 000000000000..3467fbb41fd1 --- /dev/null +++ b/packages/mask/src/social-network-adaptor/instagram.com/collecting/indentity.ts @@ -0,0 +1,65 @@ +import { LiveSelector, MutationObserverWatcher } from '@dimensiondev/holoflows-kit' +import { ProfileIdentifier, delay } from '@masknet/shared-base' +import { creator, SocialNetworkUI as Next } from '../../../social-network' +import Services from '../../../extension/service' +import { instagramBase } from '../base' +import { searchAvatarSelector } from '../utils/selector' +import { getAvatar, getBioDescription, getNickname, getPersonalHomepage, getUserId } from '../utils/user' + +function resolveCurrentVisitingIdentityInner( + ref: Next.CollectingCapabilities.IdentityResolveProvider['recognized'], + cancel: AbortSignal, +) { + const avatarSelector = searchAvatarSelector() + const assign = async () => { + await delay(500) + const bio = getBioDescription() + const homepage = getPersonalHomepage() + const nickname = getNickname() + const handle = getUserId() + const avatar = getAvatar() + + ref.value = { + identifier: new ProfileIdentifier(instagramBase.networkIdentifier, handle), + nickname, + avatar, + bio, + } + Services.Helper.resolveTCOLink(homepage).then((link) => { + if (cancel?.aborted || !link) return + ref.value = { + ...ref.value, + homepage: link, + } + }) + } + const createWatcher = (selector: LiveSelector) => { + const watcher = new MutationObserverWatcher(selector) + .addListener('onAdd', () => assign()) + .addListener('onChange', () => assign()) + .startWatch({ + childList: true, + subtree: true, + attributes: true, + attributeFilter: ['src', 'content'], + }) + + window.addEventListener('locationchange', assign) + cancel.addEventListener('abort', () => { + window.removeEventListener('locationchange', assign) + watcher.stopWatch() + }) + } + + assign() + + createWatcher(avatarSelector) +} + +export const CurrentVisitingIdentityProviderInstagram: Next.CollectingCapabilities.IdentityResolveProvider = { + hasDeprecatedPlaceholderName: false, + recognized: creator.EmptyIdentityResolveProviderState(), + start(cancel) { + resolveCurrentVisitingIdentityInner(this.recognized, cancel) + }, +} diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx new file mode 100644 index 000000000000..adeb83662c65 --- /dev/null +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -0,0 +1,116 @@ +import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' +import { Web3TabIcon } from '@masknet/icons' +import { makeStyles } from '@masknet/theme' +import { ProfileTab } from '../../../../components/InjectedComponents/ProfileTab' +import { createReactRootShadowed, startWatch } from '../../../../utils' +import { + searchProfileActiveTabSelector, + searchProfileTabListLastChildSelector, + searchProfileTabPageSelector, + searchProfileTabSelector, +} from '../../utils/selector' + +export function injectProfileTabAtInstagram(signal: AbortSignal) { + let tabInjected = false + + const contentWatcher = new MutationObserverWatcher(searchProfileTabPageSelector()).useForeach(() => { + const elePage = searchProfileTabPageSelector().evaluate() + if (elePage && !tabInjected) { + const watcher = new MutationObserverWatcher(searchProfileTabListLastChildSelector()) + startWatch(watcher, signal) + createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() + tabInjected = true + } + }) + + startWatch(contentWatcher, signal) +} + +function getStyleProps() { + const EMPTY_STYLE = {} as CSSStyleDeclaration + + const eleTab = searchProfileTabSelector().evaluate() as Element + const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE + + const activeTab = searchProfileActiveTabSelector().evaluate() as Element + const activeStyle = activeTab ? window.getComputedStyle(activeTab) : EMPTY_STYLE + + return { + color: style.color, + font: style.font, + fontSize: style.fontSize, + padding: style.paddingBottom, + height: style.height, + hover: activeStyle.color, + line: activeStyle.color, + } +} + +const useStyles = makeStyles()((theme) => { + const props = getStyleProps() + return { + root: { + '&:hover': { + cursor: 'pointer', + }, + display: '-webkit-box', + alignItems: 'center', + justifyContent: 'center', + }, + button: { + color: props.color, + font: props.font, + fontSize: props.fontSize, + marginLeft: 4, + height: props.height, + justifyContent: 'center', + alignItems: 'center', + display: 'flex', + }, + selected: { + borderTop: `1px solid ${props.line}`, + color: props.hover, + }, + line: {}, + icon: { + fontSize: props.fontSize, + color: props.color, + paddingRight: 4, + }, + } +}) + +export function ProfileTabAtInstagram() { + const { classes } = useStyles() + + const reset = () => { + const activeTab = searchProfileActiveTabSelector().evaluate() as HTMLDivElement + activeTab.style.borderTop = '' + activeTab.style.color = '' + + Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).map((v) => { + const ele = v as HTMLDivElement + if (ele.tagName !== 'SPAN') ele.style.visibility = '' + }) + } + const clear = () => { + const style = getStyleProps() + const activeTab = searchProfileActiveTabSelector().evaluate() as HTMLDivElement + activeTab.style.borderTop = 'none' + activeTab.style.color = style.color + + Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).map((v) => { + const ele = v as HTMLDivElement + if (ele.tagName !== 'SPAN') ele.style.visibility = 'hidden' + }) + } + return ( + } + classes={classes} + reset={reset} + clear={clear} + /> + ) +} diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx new file mode 100644 index 000000000000..6ad25930052e --- /dev/null +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx @@ -0,0 +1,60 @@ +import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' +import { getMaskColor, makeStyles } from '@masknet/theme' +import { ProfileTabContent } from '../../../../components/InjectedComponents/ProfileTabContent' +import { createReactRootShadowed, startWatch } from '../../../../utils' +import { searchProfileActiveTabSelector, searchProfileTabPageSelector } from '../../utils/selector' + +export function injectProfileTabContentAtInstagram(signal: AbortSignal) { + injectProfileTabContentHaveArticle(signal) + injectProfileTabContentEmptyArticle(signal) +} + +function injectProfileTabContentHaveArticle(signal: AbortSignal) { + const watcher = new MutationObserverWatcher(searchProfileTabPageSelector().querySelector('article')) + startWatch(watcher, signal) + createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() +} + +function injectProfileTabContentEmptyArticle(signal: AbortSignal) { + const watcher = new MutationObserverWatcher(searchProfileTabPageSelector().querySelector('div')) + startWatch(watcher, signal) + createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() +} + +function getStyleProps() { + const activeTab = searchProfileActiveTabSelector().evaluate() as HTMLDivElement + return { + backgroundColor: activeTab ? window.getComputedStyle(activeTab).backgroundColor : undefined, + fontFamily: activeTab ? window.getComputedStyle(activeTab as HTMLElement).fontFamily : undefined, + } +} + +const useStyles = makeStyles()((theme) => { + const props = getStyleProps() + + return { + text: { + paddingTop: 29, + paddingBottom: 29, + '& > p': { + fontSize: 28, + fontFamily: props.fontFamily, + fontWeight: 700, + color: getMaskColor(theme).textPrimary, + }, + }, + button: { + backgroundColor: props.backgroundColor, + color: 'white', + marginTop: 18, + '&:hover': { + backgroundColor: props.backgroundColor, + }, + }, + } +}) + +export function ProfileTabContentAtInstagram() { + const { classes } = useStyles() + return +} diff --git a/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts index 74a97c9c04e0..91dbe3248230 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts @@ -8,6 +8,9 @@ import { pasteInstagram } from '@masknet/injected-script' import { injectPostInspectorInstagram } from './injection/post-inspector' import { newPostCompositionInstagram } from './injection/newPostComposition' import { InitAutonomousStateProfiles } from '../../social-network/defaults/state/InitProfiles' +import { injectProfileTabAtInstagram } from './injection/web3tab/ProfileTab' +import { injectProfileTabContentAtInstagram } from './injection/web3tab/ProfileTabContent' +import { CurrentVisitingIdentityProviderInstagram } from './collecting/indentity' const define: SocialNetworkUI.Definition = { ...instagramShared, @@ -22,6 +25,7 @@ const define: SocialNetworkUI.Definition = { }, collecting: { identityProvider: IdentityProviderInstagram, + currentVisitingIdentityProvider: CurrentVisitingIdentityProviderInstagram, postsProvider: PostProviderInstagram, }, configuration: { @@ -40,6 +44,8 @@ const define: SocialNetworkUI.Definition = { injection: { setupWizard: createTaskStartSetupGuideDefault(), postInspector: injectPostInspectorInstagram, + profileTab: injectProfileTabAtInstagram, + profileTabContent: injectProfileTabContentAtInstagram, newPostComposition: { start: newPostCompositionInstagram, supportedInputTypes: { text: true, image: true }, diff --git a/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts new file mode 100644 index 000000000000..3b5e346c6dcb --- /dev/null +++ b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts @@ -0,0 +1,41 @@ +import { LiveSelector } from '@dimensiondev/holoflows-kit' + +type E = HTMLElement + +const querySelector = (selector: string, singleMode = true) => { + const ls = new LiveSelector().querySelector(selector) + return (singleMode ? ls.enableSingleMode() : ls) as LiveSelector +} +const querySelectorAll = (selector: string) => { + return new LiveSelector().querySelectorAll(selector) +} + +export const searchProfileTabListLastChildSelector: () => LiveSelector = () => + querySelector('[id="react-root"] section main div[role="tablist"] > :last-child') + +export const searchProfileTabPageSelector: () => LiveSelector = () => + querySelector('[id="react-root"] section main > div > div:last-child') + +export const searchProfileTabPageSelector1: () => LiveSelector = () => + querySelector('[id="react-root"] section main > div > div:last-child > :last-child') + +export const searchProfileTabSelector: () => LiveSelector = () => + querySelector('[id="react-root"] section main div[role="tablist"] a[aria-selected="false"]') + +export const searchProfileActiveTabSelector: () => LiveSelector = () => + querySelector('[id="react-root"] section main div[role="tablist"] a[aria-selected="true"]') + +export const searchAvatarSelector: () => LiveSelector = () => + querySelector('[id="react-root"] section main header button img') + +export const bioDescriptionSelector = () => + querySelector('[id="react-root"] section main header section > div:last-child > :nth-child(3)') + +export const personalHomepageSelector = () => + querySelector('[id="react-root"] section main header section > div:last-child a') + +export const searchNickNameSelector = () => + querySelector('[id="react-root"] section main header section > div:last-child > span') + +export const searchUserIdSelector = () => + querySelector('[id="react-root"] section main header section h2') diff --git a/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts b/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts new file mode 100644 index 000000000000..41cd1402a809 --- /dev/null +++ b/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts @@ -0,0 +1,37 @@ +import { collectNodeText } from '../../../utils' +import { + bioDescriptionSelector, + personalHomepageSelector, + searchAvatarSelector, + searchNickNameSelector, + searchUserIdSelector, +} from './selector' + +export function getBioDescription() { + const bio = bioDescriptionSelector().evaluate() + console.log(bio) + return bio ? collectNodeText(bio) : '' +} + +export const getPersonalHomepage = () => { + const node = personalHomepageSelector().evaluate() + return node?.textContent || '' +} + +export const getNickname = () => { + const node = searchNickNameSelector().evaluate() + return node ? collectNodeText(node) : '' +} + +export const getUserId = () => { + const node = searchUserIdSelector().evaluate() + return node ? collectNodeText(node) : '' +} + +export const getAvatar = () => { + const node = searchAvatarSelector().evaluate() as HTMLImageElement + if (!node) return '' + + const imageURL = node.getAttribute('src') ?? '' + return imageURL.trim() +} diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/ProfileTab.tsx index a2a9f82deae3..3ebfb90446a1 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/ProfileTab.tsx @@ -37,7 +37,7 @@ const useStyles = makeStyles()((theme) => { const props = getStyleProps() return { - tab: { + root: { '&:hover': { backgroundColor: new Color(props.hover).alpha(0.1).toString(), cursor: 'pointer', From 8a6bcac9d4f81e2ee05f009717e87f9f8bd446c1 Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 14 Feb 2022 19:44:33 +0800 Subject: [PATCH 02/20] fix: reply review --- packages/icons/general/Web3Tab.tsx | 14 -------------- packages/icons/general/index.ts | 2 +- .../components/InjectedComponents/PageTabItem.tsx | 1 + .../instagram.com/injection/web3tab/ProfileTab.tsx | 10 ++++++---- .../instagram.com/utils/user.ts | 1 - 5 files changed, 8 insertions(+), 20 deletions(-) delete mode 100644 packages/icons/general/Web3Tab.tsx diff --git a/packages/icons/general/Web3Tab.tsx b/packages/icons/general/Web3Tab.tsx deleted file mode 100644 index e5a00bd13df2..000000000000 --- a/packages/icons/general/Web3Tab.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { createIcon } from '../utils' - -export const Web3TabIcon = createIcon( - 'Web3TabIcon', - - - , - '0 0 13 12', -) diff --git a/packages/icons/general/index.ts b/packages/icons/general/index.ts index efebc9d69736..cfc815a0194c 100644 --- a/packages/icons/general/index.ts +++ b/packages/icons/general/index.ts @@ -87,4 +87,4 @@ export * from './Pin' export * from './Selected' export * from './Cram' export * from './TriangleWarning' -export * from './Web3Tab' +export * from './Collectible' diff --git a/packages/mask/src/components/InjectedComponents/PageTabItem.tsx b/packages/mask/src/components/InjectedComponents/PageTabItem.tsx index 804ce01233b3..9c1bb0214e65 100644 --- a/packages/mask/src/components/InjectedComponents/PageTabItem.tsx +++ b/packages/mask/src/components/InjectedComponents/PageTabItem.tsx @@ -15,6 +15,7 @@ const useStyles = makeStyles()((theme) => ({ selected: { border: `1px solid ${theme.palette.primary.main} !important`, color: `${theme.palette.primary.main} !important`, + borderRadius: 9999, }, })) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index adeb83662c65..1c2727f9434b 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -1,5 +1,5 @@ import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' -import { Web3TabIcon } from '@masknet/icons' +import { CollectibleIcon } from '@masknet/icons' import { makeStyles } from '@masknet/theme' import { ProfileTab } from '../../../../components/InjectedComponents/ProfileTab' import { createReactRootShadowed, startWatch } from '../../../../utils' @@ -33,8 +33,9 @@ function getStyleProps() { const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE const activeTab = searchProfileActiveTabSelector().evaluate() as Element + console.log(activeTab) const activeStyle = activeTab ? window.getComputedStyle(activeTab) : EMPTY_STYLE - + console.log(activeStyle.color) return { color: style.color, font: style.font, @@ -68,12 +69,13 @@ const useStyles = makeStyles()((theme) => { display: 'flex', }, selected: { - borderTop: `1px solid ${props.line}`, + borderTop: `1px solid ${props.hover}`, color: props.hover, }, line: {}, icon: { fontSize: props.fontSize, + fill: props.color, color: props.color, paddingRight: 4, }, @@ -107,7 +109,7 @@ export function ProfileTabAtInstagram() { return ( } + icon={} classes={classes} reset={reset} clear={clear} diff --git a/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts b/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts index 41cd1402a809..2b614de281a6 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts @@ -9,7 +9,6 @@ import { export function getBioDescription() { const bio = bioDescriptionSelector().evaluate() - console.log(bio) return bio ? collectNodeText(bio) : '' } From ae758d429d3d5be1592e4e466c97eab524f1320d Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 14 Feb 2022 20:32:54 +0800 Subject: [PATCH 03/20] fix: reply review --- packages/icons/general/Collectible.tsx | 13 +++++++++++++ .../instagram.com/injection/web3tab/ProfileTab.tsx | 1 + 2 files changed, 14 insertions(+) create mode 100644 packages/icons/general/Collectible.tsx diff --git a/packages/icons/general/Collectible.tsx b/packages/icons/general/Collectible.tsx new file mode 100644 index 000000000000..d292e5b06161 --- /dev/null +++ b/packages/icons/general/Collectible.tsx @@ -0,0 +1,13 @@ +import { createIcon } from '../utils' + +export const CollectibleIcon = createIcon( + 'CollectibleIcon', + + + , + '0 0 13 12', +) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index 1c2727f9434b..002b5baf326e 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -67,6 +67,7 @@ const useStyles = makeStyles()((theme) => { justifyContent: 'center', alignItems: 'center', display: 'flex', + borderTop: '1px solid transparent', }, selected: { borderTop: `1px solid ${props.hover}`, From 16f3d678416edd1cd788cdf1b3a6f1dbd5014203 Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 14 Feb 2022 20:48:47 +0800 Subject: [PATCH 04/20] fix: typo --- .../instagram.com/collecting/{indentity.ts => identity.ts} | 0 .../src/social-network-adaptor/instagram.com/ui-provider.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/mask/src/social-network-adaptor/instagram.com/collecting/{indentity.ts => identity.ts} (100%) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/collecting/indentity.ts b/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts similarity index 100% rename from packages/mask/src/social-network-adaptor/instagram.com/collecting/indentity.ts rename to packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts diff --git a/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts index 91dbe3248230..ba62bb547563 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts @@ -10,7 +10,7 @@ import { newPostCompositionInstagram } from './injection/newPostComposition' import { InitAutonomousStateProfiles } from '../../social-network/defaults/state/InitProfiles' import { injectProfileTabAtInstagram } from './injection/web3tab/ProfileTab' import { injectProfileTabContentAtInstagram } from './injection/web3tab/ProfileTabContent' -import { CurrentVisitingIdentityProviderInstagram } from './collecting/indentity' +import { CurrentVisitingIdentityProviderInstagram } from './collecting/identity' const define: SocialNetworkUI.Definition = { ...instagramShared, From 4048dc3bfa3f03aa8f51a1132f831fbeafa7ca75 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Tue, 15 Feb 2022 11:51:50 +0800 Subject: [PATCH 05/20] refactor: remove logs --- .../instagram.com/injection/web3tab/ProfileTab.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index 002b5baf326e..370772ea0417 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -33,9 +33,7 @@ function getStyleProps() { const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE const activeTab = searchProfileActiveTabSelector().evaluate() as Element - console.log(activeTab) const activeStyle = activeTab ? window.getComputedStyle(activeTab) : EMPTY_STYLE - console.log(activeStyle.color) return { color: style.color, font: style.font, From ac1cac7322d36e89a8014c797f40ad67c3483980 Mon Sep 17 00:00:00 2001 From: lelenei Date: Tue, 15 Feb 2022 15:08:23 +0800 Subject: [PATCH 06/20] fix: dom selector --- .../InjectedComponents/ProfileTabContent.tsx | 10 ++-------- .../instagram.com/injection/web3tab/ProfileTab.tsx | 8 ++------ .../injection/web3tab/ProfileTabContent.tsx | 14 +++++++++++--- .../instagram.com/utils/selector.ts | 6 ++++++ .../twitter.com/injection/ProfileTabContent.tsx | 7 +++++++ 5 files changed, 28 insertions(+), 17 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx index e4737de245e9..ecad35c7ffe0 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx @@ -19,13 +19,7 @@ function getTabContent(tabId: string) { } const useStyles = makeStyles()((theme) => ({ - root: { - position: 'absolute', - top: 0, - left: 0, - right: 0, - zIndex: 1, - }, + root: {}, tags: { padding: theme.spacing(2), }, @@ -36,7 +30,7 @@ const useStyles = makeStyles()((theme) => ({ }, })) -export interface ProfileTabContentProps extends withClasses<'text' | 'button'> {} +export interface ProfileTabContentProps extends withClasses<'text' | 'button' | 'root'> {} export function ProfileTabContent(props: ProfileTabContentProps) { const { t } = useI18N() diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index 002b5baf326e..cce2478c9568 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -28,14 +28,10 @@ export function injectProfileTabAtInstagram(signal: AbortSignal) { function getStyleProps() { const EMPTY_STYLE = {} as CSSStyleDeclaration - const eleTab = searchProfileTabSelector().evaluate() as Element const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE - const activeTab = searchProfileActiveTabSelector().evaluate() as Element - console.log(activeTab) const activeStyle = activeTab ? window.getComputedStyle(activeTab) : EMPTY_STYLE - console.log(activeStyle.color) return { color: style.color, font: style.font, @@ -93,7 +89,7 @@ export function ProfileTabAtInstagram() { Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).map((v) => { const ele = v as HTMLDivElement - if (ele.tagName !== 'SPAN') ele.style.visibility = '' + if (ele.tagName !== 'SPAN') ele.style.display = '' }) } const clear = () => { @@ -104,7 +100,7 @@ export function ProfileTabAtInstagram() { Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).map((v) => { const ele = v as HTMLDivElement - if (ele.tagName !== 'SPAN') ele.style.visibility = 'hidden' + if (ele.tagName !== 'SPAN') ele.style.display = 'none' }) } return ( diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx index 6ad25930052e..be5ce4774386 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx @@ -2,21 +2,26 @@ import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' import { getMaskColor, makeStyles } from '@masknet/theme' import { ProfileTabContent } from '../../../../components/InjectedComponents/ProfileTabContent' import { createReactRootShadowed, startWatch } from '../../../../utils' -import { searchProfileActiveTabSelector, searchProfileTabPageSelector } from '../../utils/selector' +import { + searchProfileActiveTabSelector, + searchProfileTabArticlePageSelector, + searchProfileTabOtherArticlePageSelector, +} from '../../utils/selector' export function injectProfileTabContentAtInstagram(signal: AbortSignal) { injectProfileTabContentHaveArticle(signal) + injectProfileTabContentEmptyArticle(signal) } function injectProfileTabContentHaveArticle(signal: AbortSignal) { - const watcher = new MutationObserverWatcher(searchProfileTabPageSelector().querySelector('article')) + const watcher = new MutationObserverWatcher(searchProfileTabArticlePageSelector()) startWatch(watcher, signal) createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() } function injectProfileTabContentEmptyArticle(signal: AbortSignal) { - const watcher = new MutationObserverWatcher(searchProfileTabPageSelector().querySelector('div')) + const watcher = new MutationObserverWatcher(searchProfileTabOtherArticlePageSelector()) startWatch(watcher, signal) createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() } @@ -33,6 +38,9 @@ const useStyles = makeStyles()((theme) => { const props = getStyleProps() return { + root: { + position: 'relative', + }, text: { paddingTop: 29, paddingBottom: 29, diff --git a/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts index 3b5e346c6dcb..4776d905633e 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts @@ -39,3 +39,9 @@ export const searchNickNameSelector = () => export const searchUserIdSelector = () => querySelector('[id="react-root"] section main header section h2') + +export const searchProfileTabArticlePageSelector = () => + querySelector('[id="react-root"] section main > div > div:last-child > article') + +export const searchProfileTabOtherArticlePageSelector = () => + querySelector('[id="react-root"] section main > div > div:last-child > div') diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/ProfileTabContent.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/ProfileTabContent.tsx index a40a63a7ef19..69b29eb6b811 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/ProfileTabContent.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/ProfileTabContent.tsx @@ -39,6 +39,13 @@ const useStyles = makeStyles()((theme) => { const props = getStyleProps() return { + root: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + zIndex: 1, + }, text: { paddingTop: 29, paddingBottom: 29, From b7e0035eb8e6108c9db061485893996dbc03c13d Mon Sep 17 00:00:00 2001 From: lelenei Date: Tue, 15 Feb 2022 15:37:12 +0800 Subject: [PATCH 07/20] fix: reply review --- .../instagram.com/collecting/identity.ts | 8 ----- .../injection/web3tab/ProfileTab.tsx | 31 ++++++++++++------- .../instagram.com/utils/selector.ts | 25 +++++++-------- .../instagram.com/utils/user.ts | 2 +- 4 files changed, 31 insertions(+), 35 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts b/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts index 3467fbb41fd1..f99af6a420e3 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts @@ -1,7 +1,6 @@ import { LiveSelector, MutationObserverWatcher } from '@dimensiondev/holoflows-kit' import { ProfileIdentifier, delay } from '@masknet/shared-base' import { creator, SocialNetworkUI as Next } from '../../../social-network' -import Services from '../../../extension/service' import { instagramBase } from '../base' import { searchAvatarSelector } from '../utils/selector' import { getAvatar, getBioDescription, getNickname, getPersonalHomepage, getUserId } from '../utils/user' @@ -25,13 +24,6 @@ function resolveCurrentVisitingIdentityInner( avatar, bio, } - Services.Helper.resolveTCOLink(homepage).then((link) => { - if (cancel?.aborted || !link) return - ref.value = { - ...ref.value, - homepage: link, - } - }) } const createWatcher = (selector: LiveSelector) => { const watcher = new MutationObserverWatcher(selector) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index cce2478c9568..e8964b6bc9f6 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -1,36 +1,43 @@ import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' import { CollectibleIcon } from '@masknet/icons' +import { combineAbortSignal } from '@masknet/shared-base' import { makeStyles } from '@masknet/theme' import { ProfileTab } from '../../../../components/InjectedComponents/ProfileTab' import { createReactRootShadowed, startWatch } from '../../../../utils' import { searchProfileActiveTabSelector, - searchProfileTabListLastChildSelector, searchProfileTabPageSelector, searchProfileTabSelector, + searchProfileTabListLastChildSelector, } from '../../utils/selector' export function injectProfileTabAtInstagram(signal: AbortSignal) { let tabInjected = false - const contentWatcher = new MutationObserverWatcher(searchProfileTabPageSelector()).useForeach(() => { - const elePage = searchProfileTabPageSelector().evaluate() - if (elePage && !tabInjected) { - const watcher = new MutationObserverWatcher(searchProfileTabListLastChildSelector()) - startWatch(watcher, signal) - createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() - tabInjected = true - } - }) + const contentWatcher = new MutationObserverWatcher(searchProfileTabPageSelector()).useForeach( + (node, key, proxy) => { + const subController = new AbortController() + const subSignal = combineAbortSignal(signal, subController.signal) + const elePage = proxy.realCurrent + if (elePage && !tabInjected) { + const watcher = new MutationObserverWatcher(searchProfileTabListLastChildSelector()) + startWatch(watcher, subSignal) + createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() + tabInjected = true + } + + return () => subController.abort() + }, + ) startWatch(contentWatcher, signal) } function getStyleProps() { const EMPTY_STYLE = {} as CSSStyleDeclaration - const eleTab = searchProfileTabSelector().evaluate() as Element + const eleTab = searchProfileTabSelector().evaluate() const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE - const activeTab = searchProfileActiveTabSelector().evaluate() as Element + const activeTab = searchProfileActiveTabSelector().evaluate() const activeStyle = activeTab ? window.getComputedStyle(activeTab) : EMPTY_STYLE return { color: style.color, diff --git a/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts index 4776d905633e..70adb0e55b03 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts @@ -1,6 +1,6 @@ import { LiveSelector } from '@dimensiondev/holoflows-kit' -type E = HTMLElement +type E = HTMLDivElement const querySelector = (selector: string, singleMode = true) => { const ls = new LiveSelector().querySelector(selector) @@ -10,35 +10,32 @@ const querySelectorAll = (selector: string) => { return new LiveSelector().querySelectorAll(selector) } -export const searchProfileTabListLastChildSelector: () => LiveSelector = () => +export const searchProfileTabListLastChildSelector = () => querySelector('[id="react-root"] section main div[role="tablist"] > :last-child') -export const searchProfileTabPageSelector: () => LiveSelector = () => +export const searchProfileTabPageSelector = () => querySelector('[id="react-root"] section main > div > div:last-child') -export const searchProfileTabPageSelector1: () => LiveSelector = () => - querySelector('[id="react-root"] section main > div > div:last-child > :last-child') - -export const searchProfileTabSelector: () => LiveSelector = () => +export const searchProfileTabSelector = () => querySelector('[id="react-root"] section main div[role="tablist"] a[aria-selected="false"]') -export const searchProfileActiveTabSelector: () => LiveSelector = () => +export const searchProfileActiveTabSelector = () => querySelector('[id="react-root"] section main div[role="tablist"] a[aria-selected="true"]') -export const searchAvatarSelector: () => LiveSelector = () => - querySelector('[id="react-root"] section main header button img') +export const searchAvatarSelector = () => + querySelector('[id="react-root"] section main header button img') export const bioDescriptionSelector = () => - querySelector('[id="react-root"] section main header section > div:last-child > :nth-child(3)') + querySelector('[id="react-root"] section main header section > div:last-child > :nth-child(3)') export const personalHomepageSelector = () => - querySelector('[id="react-root"] section main header section > div:last-child a') + querySelector('[id="react-root"] section main header section > div:last-child a') export const searchNickNameSelector = () => - querySelector('[id="react-root"] section main header section > div:last-child > span') + querySelector('[id="react-root"] section main header section > div:last-child > span') export const searchUserIdSelector = () => - querySelector('[id="react-root"] section main header section h2') + querySelector('[id="react-root"] section main header section h2') export const searchProfileTabArticlePageSelector = () => querySelector('[id="react-root"] section main > div > div:last-child > article') diff --git a/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts b/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts index 2b614de281a6..81ebe30fcec9 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/utils/user.ts @@ -28,7 +28,7 @@ export const getUserId = () => { } export const getAvatar = () => { - const node = searchAvatarSelector().evaluate() as HTMLImageElement + const node = searchAvatarSelector().evaluate() if (!node) return '' const imageURL = node.getAttribute('src') ?? '' From d8a1150aa354c1f63f5a7c9e5febc663d535ef48 Mon Sep 17 00:00:00 2001 From: lelenei Date: Tue, 15 Feb 2022 15:50:53 +0800 Subject: [PATCH 08/20] fix: identity homepage --- .../social-network-adaptor/instagram.com/collecting/identity.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts b/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts index f99af6a420e3..707d5242f814 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/collecting/identity.ts @@ -23,6 +23,7 @@ function resolveCurrentVisitingIdentityInner( nickname, avatar, bio, + homepage, } } const createWatcher = (selector: LiveSelector) => { From 0d14c15495513d0d58f8cbede20940df95b19bd5 Mon Sep 17 00:00:00 2001 From: lelenei Date: Wed, 16 Feb 2022 15:50:16 +0800 Subject: [PATCH 09/20] fix: remove wallet at instagram --- packages/mask/src/plugins/NextID/base.ts | 4 ++-- .../instagram.com/injection/web3tab/ProfileTab.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/plugins/NextID/base.ts b/packages/mask/src/plugins/NextID/base.ts index 67b7ef3db4a5..f529fcc0f041 100644 --- a/packages/mask/src/plugins/NextID/base.ts +++ b/packages/mask/src/plugins/NextID/base.ts @@ -1,4 +1,4 @@ -import type { Plugin } from '@masknet/plugin-infra' +import { CurrentSNSNetwork, Plugin } from '@masknet/plugin-infra' import { PLUGIN_DESCRIPTION, PLUGIN_ID, PLUGIN_NAME } from './constants' import { languages } from './locales/languages' @@ -9,7 +9,7 @@ export const base: Plugin.Shared.Definition = { publisher: { name: { fallback: 'Mask Network' }, link: 'https://mask.io/' }, enableRequirement: { architecture: { app: false, web: true }, - networks: { type: 'opt-out', networks: {} }, + networks: { type: 'opt-out', networks: { [CurrentSNSNetwork.Instagram]: true } }, target: 'stable', }, experimentalMark: true, diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index e8964b6bc9f6..b14261a359e3 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -60,6 +60,7 @@ const useStyles = makeStyles()((theme) => { display: '-webkit-box', alignItems: 'center', justifyContent: 'center', + marginRight: 60, }, button: { color: props.color, From f03106b049c995fed72c0c7ab245103084eb602b Mon Sep 17 00:00:00 2001 From: lelenei Date: Thu, 17 Feb 2022 11:08:10 +0800 Subject: [PATCH 10/20] fix: css style --- .../instagram.com/injection/web3tab/ProfileTab.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index b14261a359e3..32fd79a4edc1 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -66,7 +66,6 @@ const useStyles = makeStyles()((theme) => { color: props.color, font: props.font, fontSize: props.fontSize, - marginLeft: 4, height: props.height, justifyContent: 'center', alignItems: 'center', From 6cfcc0a41c6080b0e8a9c6ef0c1cb73c5d82f20a Mon Sep 17 00:00:00 2001 From: lelenei Date: Thu, 17 Feb 2022 11:19:58 +0800 Subject: [PATCH 11/20] fix: code style --- .../injection/web3tab/ProfileTab.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index 32fd79a4edc1..d4a6be42c2c1 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -50,7 +50,7 @@ function getStyleProps() { } } -const useStyles = makeStyles()((theme) => { +const useStyles = makeStyles()(() => { const props = getStyleProps() return { root: { @@ -90,9 +90,11 @@ export function ProfileTabAtInstagram() { const { classes } = useStyles() const reset = () => { - const activeTab = searchProfileActiveTabSelector().evaluate() as HTMLDivElement - activeTab.style.borderTop = '' - activeTab.style.color = '' + const activeTab = searchProfileActiveTabSelector().evaluate() + if (activeTab?.style) { + activeTab.style.borderTop = '' + activeTab.style.color = '' + } Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).map((v) => { const ele = v as HTMLDivElement @@ -101,10 +103,11 @@ export function ProfileTabAtInstagram() { } const clear = () => { const style = getStyleProps() - const activeTab = searchProfileActiveTabSelector().evaluate() as HTMLDivElement - activeTab.style.borderTop = 'none' - activeTab.style.color = style.color - + const activeTab = searchProfileActiveTabSelector().evaluate() + if (activeTab?.style) { + activeTab.style.borderTop = 'none' + activeTab.style.color = style.color + } Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).map((v) => { const ele = v as HTMLDivElement if (ele.tagName !== 'SPAN') ele.style.display = 'none' From 26627b87128ad03e3c209c7eb1de35cd3ea22f2f Mon Sep 17 00:00:00 2001 From: lelenei Date: Thu, 17 Feb 2022 21:05:28 +0800 Subject: [PATCH 12/20] refactor: reply review --- packages/mask/src/plugins/NextID/base.ts | 9 ++++++++- .../instagram.com/injection/web3tab/ProfileTab.tsx | 4 ++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/mask/src/plugins/NextID/base.ts b/packages/mask/src/plugins/NextID/base.ts index f529fcc0f041..bfe101e4eb17 100644 --- a/packages/mask/src/plugins/NextID/base.ts +++ b/packages/mask/src/plugins/NextID/base.ts @@ -9,7 +9,14 @@ export const base: Plugin.Shared.Definition = { publisher: { name: { fallback: 'Mask Network' }, link: 'https://mask.io/' }, enableRequirement: { architecture: { app: false, web: true }, - networks: { type: 'opt-out', networks: { [CurrentSNSNetwork.Instagram]: true } }, + networks: { + type: 'opt-out', + networks: { + [CurrentSNSNetwork.Instagram]: true, + [CurrentSNSNetwork.Facebook]: true, + [CurrentSNSNetwork.Minds]: true, + }, + }, target: 'stable', }, experimentalMark: true, diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index d4a6be42c2c1..df859785ce26 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -96,7 +96,7 @@ export function ProfileTabAtInstagram() { activeTab.style.color = '' } - Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).map((v) => { + Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).forEach((v) => { const ele = v as HTMLDivElement if (ele.tagName !== 'SPAN') ele.style.display = '' }) @@ -108,7 +108,7 @@ export function ProfileTabAtInstagram() { activeTab.style.borderTop = 'none' activeTab.style.color = style.color } - Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).map((v) => { + Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).forEach((v) => { const ele = v as HTMLDivElement if (ele.tagName !== 'SPAN') ele.style.display = 'none' }) From fcf88f78e54ee33c09260b777b6a563dec35858e Mon Sep 17 00:00:00 2001 From: lelenei Date: Thu, 17 Feb 2022 21:41:26 +0800 Subject: [PATCH 13/20] fix: web3 tab active color --- .../instagram.com/injection/web3tab/ProfileTab.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index df859785ce26..cc12da6d65ac 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -3,12 +3,13 @@ import { CollectibleIcon } from '@masknet/icons' import { combineAbortSignal } from '@masknet/shared-base' import { makeStyles } from '@masknet/theme' import { ProfileTab } from '../../../../components/InjectedComponents/ProfileTab' -import { createReactRootShadowed, startWatch } from '../../../../utils' +import { createReactRootShadowed, startWatch, untilElementAvailable } from '../../../../utils' import { searchProfileActiveTabSelector, searchProfileTabPageSelector, searchProfileTabSelector, searchProfileTabListLastChildSelector, + searchUserIdSelector, } from '../../utils/selector' export function injectProfileTabAtInstagram(signal: AbortSignal) { @@ -37,7 +38,7 @@ function getStyleProps() { const EMPTY_STYLE = {} as CSSStyleDeclaration const eleTab = searchProfileTabSelector().evaluate() const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE - const activeTab = searchProfileActiveTabSelector().evaluate() + const activeTab = searchUserIdSelector().evaluate() const activeStyle = activeTab ? window.getComputedStyle(activeTab) : EMPTY_STYLE return { color: style.color, @@ -79,8 +80,6 @@ const useStyles = makeStyles()(() => { line: {}, icon: { fontSize: props.fontSize, - fill: props.color, - color: props.color, paddingRight: 4, }, } @@ -101,13 +100,16 @@ export function ProfileTabAtInstagram() { if (ele.tagName !== 'SPAN') ele.style.display = '' }) } - const clear = () => { + const clear = async () => { const style = getStyleProps() const activeTab = searchProfileActiveTabSelector().evaluate() if (activeTab?.style) { activeTab.style.borderTop = 'none' activeTab.style.color = style.color } + // hide the content page + await untilElementAvailable(searchProfileTabPageSelector()) + Array.from(searchProfileTabPageSelector().evaluate()?.childNodes ?? []).forEach((v) => { const ele = v as HTMLDivElement if (ele.tagName !== 'SPAN') ele.style.display = 'none' From 986af859532e4eadf20b07b1040d9abd8e257a9b Mon Sep 17 00:00:00 2001 From: lelenei Date: Fri, 18 Feb 2022 20:55:26 +0800 Subject: [PATCH 14/20] fix: selector --- .../social-network-adaptor/instagram.com/utils/selector.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts index 70adb0e55b03..b9711bcc8eca 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts @@ -26,7 +26,7 @@ export const searchAvatarSelector = () => querySelector('[id="react-root"] section main header button img') export const bioDescriptionSelector = () => - querySelector('[id="react-root"] section main header section > div:last-child > :nth-child(3)') + querySelector('[id="react-root"] section main header section > div:last-child div') export const personalHomepageSelector = () => querySelector('[id="react-root"] section main header section > div:last-child a') @@ -35,7 +35,7 @@ export const searchNickNameSelector = () => querySelector('[id="react-root"] section main header section > div:last-child > span') export const searchUserIdSelector = () => - querySelector('[id="react-root"] section main header section h2') + querySelector('[id="react-root"] section main header section > div:first-child > :first-child') export const searchProfileTabArticlePageSelector = () => querySelector('[id="react-root"] section main > div > div:last-child > article') From 05905710a09684deb8202a92502831ba242fc2bc Mon Sep 17 00:00:00 2001 From: lelenei Date: Sat, 19 Feb 2022 13:55:22 +0800 Subject: [PATCH 15/20] fix: cannot inject web3 tab after going back --- .../injection/web3tab/ProfileTab.tsx | 26 +++++++------------ .../instagram.com/ui-provider.ts | 7 +++-- 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index cc12da6d65ac..2b7e9dbaf044 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -1,6 +1,5 @@ import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' import { CollectibleIcon } from '@masknet/icons' -import { combineAbortSignal } from '@masknet/shared-base' import { makeStyles } from '@masknet/theme' import { ProfileTab } from '../../../../components/InjectedComponents/ProfileTab' import { createReactRootShadowed, startWatch, untilElementAvailable } from '../../../../utils' @@ -14,22 +13,15 @@ import { export function injectProfileTabAtInstagram(signal: AbortSignal) { let tabInjected = false - - const contentWatcher = new MutationObserverWatcher(searchProfileTabPageSelector()).useForeach( - (node, key, proxy) => { - const subController = new AbortController() - const subSignal = combineAbortSignal(signal, subController.signal) - const elePage = proxy.realCurrent - if (elePage && !tabInjected) { - const watcher = new MutationObserverWatcher(searchProfileTabListLastChildSelector()) - startWatch(watcher, subSignal) - createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() - tabInjected = true - } - - return () => subController.abort() - }, - ) + const contentWatcher = new MutationObserverWatcher(searchProfileTabPageSelector()).useForeach(() => { + const elePage = searchProfileTabPageSelector().evaluate() + if (elePage && !tabInjected) { + const watcher = new MutationObserverWatcher(searchProfileTabListLastChildSelector()) + startWatch(watcher, signal) + createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() + tabInjected = true + } + }) startWatch(contentWatcher, signal) } diff --git a/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts index ba62bb547563..8666bfecd69f 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts @@ -5,12 +5,11 @@ import { IdentityProviderInstagram } from './collecting/identity-provider' import { PostProviderInstagram } from './collecting/posts' import { createTaskStartSetupGuideDefault } from '../../social-network/defaults' import { pasteInstagram } from '@masknet/injected-script' -import { injectPostInspectorInstagram } from './injection/post-inspector' -import { newPostCompositionInstagram } from './injection/newPostComposition' import { InitAutonomousStateProfiles } from '../../social-network/defaults/state/InitProfiles' import { injectProfileTabAtInstagram } from './injection/web3tab/ProfileTab' import { injectProfileTabContentAtInstagram } from './injection/web3tab/ProfileTabContent' import { CurrentVisitingIdentityProviderInstagram } from './collecting/identity' +import { injectPostInspectorInstagram } from './injection/post-inspector' const define: SocialNetworkUI.Definition = { ...instagramShared, @@ -46,11 +45,11 @@ const define: SocialNetworkUI.Definition = { postInspector: injectPostInspectorInstagram, profileTab: injectProfileTabAtInstagram, profileTabContent: injectProfileTabContentAtInstagram, - newPostComposition: { + /* newPostComposition: { start: newPostCompositionInstagram, supportedInputTypes: { text: true, image: true }, supportedOutputTypes: { text: false, image: true }, - }, + },*/ }, } export default define From f6d4d4a6cee3bbea2a4cb0619cf783e5ef859065 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Sun, 20 Feb 2022 08:38:18 +0800 Subject: [PATCH 16/20] refactor: code style Co-authored-by: Jack Works --- .../instagram.com/injection/web3tab/ProfileTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index 2b7e9dbaf044..83d467d6ce69 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -27,7 +27,7 @@ export function injectProfileTabAtInstagram(signal: AbortSignal) { } function getStyleProps() { - const EMPTY_STYLE = {} as CSSStyleDeclaration + const EMPTY_STYLE: CSSStyleDeclaration = {} const eleTab = searchProfileTabSelector().evaluate() const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE const activeTab = searchUserIdSelector().evaluate() From 48f04bc8c61a396acd9632b22c49287fb2a5b337 Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 21 Feb 2022 16:22:40 +0800 Subject: [PATCH 17/20] fix: add hint --- .../mask/src/components/InjectedComponents/PageTab.tsx | 8 ++++++++ packages/mask/src/plugins/NextID/base.ts | 5 ++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/PageTab.tsx b/packages/mask/src/components/InjectedComponents/PageTab.tsx index fbfdb58ad268..ecf1f9806d53 100644 --- a/packages/mask/src/components/InjectedComponents/PageTab.tsx +++ b/packages/mask/src/components/InjectedComponents/PageTab.tsx @@ -1,6 +1,7 @@ import { makeStyles } from '@masknet/theme' import type { Plugin } from '@masknet/plugin-infra' import { PageTabItem } from './PageTabItem' +import { Typography } from '@mui/material' const useStyles = makeStyles()((theme) => ({ root: { @@ -20,6 +21,13 @@ export function PageTab(props: PageTabProps) { const { tabs, selectedTab, onChange } = props const { classes } = useStyles() + if (!tabs.length) { + return ( + + No address found + + ) + } return (
{tabs.map((x) => ( diff --git a/packages/mask/src/plugins/NextID/base.ts b/packages/mask/src/plugins/NextID/base.ts index bfe101e4eb17..1daef79df319 100644 --- a/packages/mask/src/plugins/NextID/base.ts +++ b/packages/mask/src/plugins/NextID/base.ts @@ -10,11 +10,10 @@ export const base: Plugin.Shared.Definition = { enableRequirement: { architecture: { app: false, web: true }, networks: { - type: 'opt-out', + type: 'opt-in', networks: { - [CurrentSNSNetwork.Instagram]: true, + [CurrentSNSNetwork.Twitter]: true, [CurrentSNSNetwork.Facebook]: true, - [CurrentSNSNetwork.Minds]: true, }, }, target: 'stable', From 2f7a5ae8c496d2c4fad843c78cf7ca8c709cad7b Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 21 Feb 2022 16:32:03 +0800 Subject: [PATCH 18/20] fix: tsc error --- .../instagram.com/injection/web3tab/ProfileTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx index 83d467d6ce69..2b7e9dbaf044 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx @@ -27,7 +27,7 @@ export function injectProfileTabAtInstagram(signal: AbortSignal) { } function getStyleProps() { - const EMPTY_STYLE: CSSStyleDeclaration = {} + const EMPTY_STYLE = {} as CSSStyleDeclaration const eleTab = searchProfileTabSelector().evaluate() const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE const activeTab = searchUserIdSelector().evaluate() From ab813a9293c4fe415281dcbb3f21accebb60954d Mon Sep 17 00:00:00 2001 From: lelenei Date: Mon, 21 Feb 2022 17:12:51 +0800 Subject: [PATCH 19/20] fix: reply review --- packages/mask/shared-ui/locales/en-US.json | 3 ++- .../mask/src/components/InjectedComponents/PageTab.tsx | 6 ++++-- .../instagram.com/injection/{web3tab => }/ProfileTab.tsx | 8 ++++---- .../injection/{web3tab => }/ProfileTabContent.tsx | 6 +++--- .../social-network-adaptor/instagram.com/ui-provider.ts | 4 ++-- 5 files changed, 15 insertions(+), 12 deletions(-) rename packages/mask/src/social-network-adaptor/instagram.com/injection/{web3tab => }/ProfileTab.tsx (96%) rename packages/mask/src/social-network-adaptor/instagram.com/injection/{web3tab => }/ProfileTabContent.tsx (91%) diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index d9e3f301a1fb..b5d77e7a5f3d 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -1005,5 +1005,6 @@ "nft_button_add_collectible": "Add Collectible", "nft_avatar": "NFT Avatar", "plugin_profile_no_wallets": "Connect your wallet here.
This section will be shown to your encrypted friends.
The display content includes digital art, donations, badges
and other public information on chain.", - "plugin_vcent_last_offer_at": "LATEST OFFER at" + "plugin_vcent_last_offer_at": "LATEST OFFER at", + "web3_tab_hint": "No address found." } diff --git a/packages/mask/src/components/InjectedComponents/PageTab.tsx b/packages/mask/src/components/InjectedComponents/PageTab.tsx index ecf1f9806d53..99314220ce0c 100644 --- a/packages/mask/src/components/InjectedComponents/PageTab.tsx +++ b/packages/mask/src/components/InjectedComponents/PageTab.tsx @@ -2,6 +2,7 @@ import { makeStyles } from '@masknet/theme' import type { Plugin } from '@masknet/plugin-infra' import { PageTabItem } from './PageTabItem' import { Typography } from '@mui/material' +import { useI18N } from '../../utils' const useStyles = makeStyles()((theme) => ({ root: { @@ -20,11 +21,12 @@ export interface PageTabProps { export function PageTab(props: PageTabProps) { const { tabs, selectedTab, onChange } = props const { classes } = useStyles() + const { t } = useI18N() if (!tabs.length) { return ( - - No address found + + {t('web3_tab_hint')} ) } diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/ProfileTab.tsx similarity index 96% rename from packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx rename to packages/mask/src/social-network-adaptor/instagram.com/injection/ProfileTab.tsx index 2b7e9dbaf044..1ad518cb2b0d 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTab.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/ProfileTab.tsx @@ -1,15 +1,15 @@ import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' import { CollectibleIcon } from '@masknet/icons' import { makeStyles } from '@masknet/theme' -import { ProfileTab } from '../../../../components/InjectedComponents/ProfileTab' -import { createReactRootShadowed, startWatch, untilElementAvailable } from '../../../../utils' +import { ProfileTab } from '../../../components/InjectedComponents/ProfileTab' +import { createReactRootShadowed, startWatch, untilElementAvailable } from '../../../utils' import { searchProfileActiveTabSelector, + searchProfileTabListLastChildSelector, searchProfileTabPageSelector, searchProfileTabSelector, - searchProfileTabListLastChildSelector, searchUserIdSelector, -} from '../../utils/selector' +} from '../utils/selector' export function injectProfileTabAtInstagram(signal: AbortSignal) { let tabInjected = false diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/ProfileTabContent.tsx similarity index 91% rename from packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx rename to packages/mask/src/social-network-adaptor/instagram.com/injection/ProfileTabContent.tsx index be5ce4774386..4240830d2ce6 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/web3tab/ProfileTabContent.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/ProfileTabContent.tsx @@ -1,12 +1,12 @@ import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' import { getMaskColor, makeStyles } from '@masknet/theme' -import { ProfileTabContent } from '../../../../components/InjectedComponents/ProfileTabContent' -import { createReactRootShadowed, startWatch } from '../../../../utils' +import { ProfileTabContent } from '../../../components/InjectedComponents/ProfileTabContent' +import { createReactRootShadowed, startWatch } from '../../../utils' import { searchProfileActiveTabSelector, searchProfileTabArticlePageSelector, searchProfileTabOtherArticlePageSelector, -} from '../../utils/selector' +} from '../utils/selector' export function injectProfileTabContentAtInstagram(signal: AbortSignal) { injectProfileTabContentHaveArticle(signal) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts index 8666bfecd69f..23e6c5e3412a 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/ui-provider.ts @@ -6,10 +6,10 @@ import { PostProviderInstagram } from './collecting/posts' import { createTaskStartSetupGuideDefault } from '../../social-network/defaults' import { pasteInstagram } from '@masknet/injected-script' import { InitAutonomousStateProfiles } from '../../social-network/defaults/state/InitProfiles' -import { injectProfileTabAtInstagram } from './injection/web3tab/ProfileTab' -import { injectProfileTabContentAtInstagram } from './injection/web3tab/ProfileTabContent' import { CurrentVisitingIdentityProviderInstagram } from './collecting/identity' import { injectPostInspectorInstagram } from './injection/post-inspector' +import { injectProfileTabAtInstagram } from './injection/ProfileTab' +import { injectProfileTabContentAtInstagram } from './injection/ProfileTabContent' const define: SocialNetworkUI.Definition = { ...instagramShared, From dc4df2d849b6edef927b5ea69e05a4ebc6028c87 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Tue, 22 Feb 2022 14:28:46 +0800 Subject: [PATCH 20/20] chore: reply review --- .../instagram.com/utils/selector.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts index b9711bcc8eca..1a5ed38db3cf 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts +++ b/packages/mask/src/social-network-adaptor/instagram.com/utils/selector.ts @@ -1,6 +1,6 @@ import { LiveSelector } from '@dimensiondev/holoflows-kit' -type E = HTMLDivElement +type E = HTMLElement const querySelector = (selector: string, singleMode = true) => { const ls = new LiveSelector().querySelector(selector) @@ -17,19 +17,19 @@ export const searchProfileTabPageSelector = () => querySelector('[id="react-root"] section main > div > div:last-child') export const searchProfileTabSelector = () => - querySelector('[id="react-root"] section main div[role="tablist"] a[aria-selected="false"]') + querySelector('[id="react-root"] section main div[role="tablist"] a[aria-selected="false"]') export const searchProfileActiveTabSelector = () => querySelector('[id="react-root"] section main div[role="tablist"] a[aria-selected="true"]') export const searchAvatarSelector = () => - querySelector('[id="react-root"] section main header button img') + querySelector('[id="react-root"] section main header button img') export const bioDescriptionSelector = () => querySelector('[id="react-root"] section main header section > div:last-child div') export const personalHomepageSelector = () => - querySelector('[id="react-root"] section main header section > div:last-child a') + querySelector('[id="react-root"] section main header section > div:last-child a') export const searchNickNameSelector = () => querySelector('[id="react-root"] section main header section > div:last-child > span')