From 7bbddace2bb2fe996f56f8b4df7135dbf888b135 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Tue, 29 Mar 2022 21:18:06 +0800 Subject: [PATCH 1/4] chore: path --- packages/mask/src/components/InjectedComponents/ProfileTab.tsx | 3 +-- .../src/components/InjectedComponents/ProfileTabContent.tsx | 3 +-- .../facebook.com/injection/NFT/NFTAvatarEditProfile.tsx | 3 +-- .../instagram.com/injection/NFT/ProfileNFTAvatar.tsx | 3 +-- .../twitter.com/injection/NFT/NFTAvatarEditProfile.tsx | 3 +-- .../twitter.com/injection/Tip/ProfileTipButton.tsx | 3 +-- packages/mask/src/utils/hooks/index.ts | 1 + 7 files changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/ProfileTab.tsx b/packages/mask/src/components/InjectedComponents/ProfileTab.tsx index 5fd1d7fe5acb..f7d55dd68df2 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTab.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTab.tsx @@ -1,8 +1,7 @@ import { ReactElement, useCallback, useState } from 'react' import classnames from 'classnames' import { Typography } from '@mui/material' -import { MaskMessages, useMatchXS } from '../../utils' -import { useLocationChange } from '../../utils/hooks/useLocationChange' +import { MaskMessages, useMatchXS, useLocationChange } from '../../utils' export interface ProfileTabProps extends withClasses<'tab' | 'button' | 'selected'> { clear(): void diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx index f5e1e51182cf..53966a9a2460 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx @@ -7,8 +7,7 @@ import { makeStyles, useStylesExtends } from '@masknet/theme' import { useAddressNames } from '@masknet/web3-shared-evm' import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor, Plugin, PluginId } from '@masknet/plugin-infra' import { PageTab } from '../InjectedComponents/PageTab' -import { useLocationChange } from '../../utils/hooks/useLocationChange' -import { MaskMessages, useI18N } from '../../utils' +import { MaskMessages, useI18N, useLocationChange } from '../../utils' import { useCurrentVisitingIdentity, useLastRecognizedIdentity } from '../DataSource/useActivatedUI' import { useNextIDBoundByPlatform } from '../DataSource/useNextID' import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus' diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/NFTAvatarEditProfile.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/NFTAvatarEditProfile.tsx index 1280efe19771..fc0caf2bf5c7 100644 --- a/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/NFTAvatarEditProfile.tsx +++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/NFTAvatarEditProfile.tsx @@ -1,8 +1,7 @@ import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' import { searchFacebookEditProfileSelector, searchFacebookProfileSettingButtonSelector } from '../../utils/selector' -import { createReactRootShadowed, startWatch } from '../../../../utils' +import { createReactRootShadowed, startWatch, useLocationChange } from '../../../../utils' import { useLayoutEffect, useState } from 'react' -import { useLocationChange } from '../../../../utils/hooks/useLocationChange' import { NFTAvatarButton } from '../../../../plugins/Avatar/SNSAdaptor/NFTAvatarButton' import { makeStyles } from '@masknet/theme' diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/ProfileNFTAvatar.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/ProfileNFTAvatar.tsx index 5956adb2f5c8..4b3fd6fc0e95 100644 --- a/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/ProfileNFTAvatar.tsx +++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/ProfileNFTAvatar.tsx @@ -1,9 +1,8 @@ import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' import { searchInstagramAvatarListSelector } from '../../utils/selector' -import { createReactRootShadowed, MaskMessages, startWatch, useI18N } from '../../../../utils' +import { createReactRootShadowed, MaskMessages, startWatch, useI18N, useLocationChange } from '../../../../utils' import { makeStyles } from '@masknet/theme' import { useCallback, useLayoutEffect, useState } from 'react' -import { useLocationChange } from '../../../../utils/hooks/useLocationChange' import { useLocation } from 'react-use' export async function injectProfileNFTAvatarInInstagram(signal: AbortSignal) { diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarEditProfile.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarEditProfile.tsx index 086e8df6b830..6f701edbf04b 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarEditProfile.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarEditProfile.tsx @@ -2,8 +2,7 @@ import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit' import { makeStyles } from '@masknet/theme' import { useState, useEffect } from 'react' import { NFTAvatarButton } from '../../../../plugins/Avatar/SNSAdaptor/NFTAvatarButton' -import { startWatch, createReactRootShadowed } from '../../../../utils' -import { useLocationChange } from '../../../../utils/hooks/useLocationChange' +import { startWatch, createReactRootShadowed, useLocationChange } from '../../../../utils' import { searchEditProfileSelector } from '../../utils/selector' export function injectOpenNFTAvatarEditProfileButton(signal: AbortSignal) { diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/Tip/ProfileTipButton.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/Tip/ProfileTipButton.tsx index 625e3b3a6297..b23b444d28a9 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/Tip/ProfileTipButton.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/Tip/ProfileTipButton.tsx @@ -3,8 +3,7 @@ import { makeStyles } from '@masknet/theme' import { useEffect, useState } from 'react' import { useCurrentVisitingIdentity } from '../../../../components/DataSource/useActivatedUI' import { TipButton } from '../../../../plugins/NextID/components/Tip/TipButton' -import { createReactRootShadowed, startWatch } from '../../../../utils' -import { useLocationChange } from '../../../../utils/hooks/useLocationChange' +import { createReactRootShadowed, startWatch, useLocationChange } from '../../../../utils' import { profileFollowButtonSelector as selector, profileMenuButtonSelector as menuButtonSelector, diff --git a/packages/mask/src/utils/hooks/index.ts b/packages/mask/src/utils/hooks/index.ts index 5d302e13ece0..924c4887e5d5 100644 --- a/packages/mask/src/utils/hooks/index.ts +++ b/packages/mask/src/utils/hooks/index.ts @@ -4,3 +4,4 @@ export * from './useMenu' export * from './useQueryNavigatorPermission' export * from './useSettingSwitcher' export * from './useSuspense' +export * from './useLocationChange' From 14df26f2f2c5419dc314dd2bfc72772cf92036d8 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 30 Mar 2022 13:00:12 +0800 Subject: [PATCH 2/4] fix: url change proxy --- packages/injected-script/main/locationChange.ts | 13 +++++++++++-- .../components/InjectedComponents/ProfileTab.tsx | 1 + 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/injected-script/main/locationChange.ts b/packages/injected-script/main/locationChange.ts index 4f1e05d0b8bd..26ed22e27521 100644 --- a/packages/injected-script/main/locationChange.ts +++ b/packages/injected-script/main/locationChange.ts @@ -1,12 +1,16 @@ import { apply, dispatchEvent, no_xray_Event, no_xray_Proxy } from './intrinsic' function setupChromium() { + let currentLocationHref = window.location.href // Learn more about this hack from https://stackoverflow.com/a/52809105/1986338 window.history.pushState = new no_xray_Proxy(history.pushState, { apply(target, thisArg, params: any) { const val = apply(target, thisArg, params) apply(dispatchEvent, window, [new no_xray_Event('pushstate')]) - apply(dispatchEvent, window, [new no_xray_Event('locationchange')]) + if (currentLocationHref !== window.location.href) { + currentLocationHref = window.location.href + apply(dispatchEvent, window, [new no_xray_Event('locationchange')]) + } return val }, }) @@ -14,12 +18,17 @@ function setupChromium() { apply(target, thisArg, params: any) { const val = apply(target, thisArg, params) apply(dispatchEvent, window, [new no_xray_Event('replacestate')]) - apply(dispatchEvent, window, [new no_xray_Event('locationchange')]) + if (currentLocationHref !== window.location.href) { + currentLocationHref = window.location.href + apply(dispatchEvent, window, [new no_xray_Event('locationchange')]) + } return val }, }) window.addEventListener('popstate', () => { + if (currentLocationHref === window.location.href) return + currentLocationHref = window.location.href apply(dispatchEvent, window, [new no_xray_Event('locationchange')]) }) } diff --git a/packages/mask/src/components/InjectedComponents/ProfileTab.tsx b/packages/mask/src/components/InjectedComponents/ProfileTab.tsx index f7d55dd68df2..ae2d54a051ee 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTab.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTab.tsx @@ -19,6 +19,7 @@ export function ProfileTab(props: ProfileTabProps) { const isMobile = useMatchXS() const onClick = useCallback(() => { + location.assign('#') MaskMessages.events.profileTabUpdated.sendToLocal({ show: true }) setActive(true) clear() From e63d3c2566cb2e39740c21d6c83efb3748026278 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 30 Mar 2022 13:05:29 +0800 Subject: [PATCH 3/4] chore: add comment --- packages/mask/src/components/InjectedComponents/ProfileTab.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mask/src/components/InjectedComponents/ProfileTab.tsx b/packages/mask/src/components/InjectedComponents/ProfileTab.tsx index ae2d54a051ee..b21522a26434 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTab.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTab.tsx @@ -19,6 +19,7 @@ export function ProfileTab(props: ProfileTabProps) { const isMobile = useMatchXS() const onClick = useCallback(() => { + // Change the url slightly to trigger `locationchange` event from e.g. 'hostname/medias# => hostname/medias' location.assign('#') MaskMessages.events.profileTabUpdated.sendToLocal({ show: true }) setActive(true) From c4e02e3ab2475bedb2568e58b0c3a9acb354831f Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 30 Mar 2022 15:24:31 +0800 Subject: [PATCH 4/4] chore: little fix --- .../mask/src/components/InjectedComponents/ProfileTab.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/ProfileTab.tsx b/packages/mask/src/components/InjectedComponents/ProfileTab.tsx index b21522a26434..8a45f7620a25 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTab.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTab.tsx @@ -19,8 +19,8 @@ export function ProfileTab(props: ProfileTabProps) { const isMobile = useMatchXS() const onClick = useCallback(() => { - // Change the url slightly to trigger `locationchange` event from e.g. 'hostname/medias# => hostname/medias' - location.assign('#') + // Change the url hashtag to trigger `locationchange` event from e.g. 'hostname/medias#web3 => hostname/medias' + location.assign('#web3') MaskMessages.events.profileTabUpdated.sendToLocal({ show: true }) setActive(true) clear()