如何从 chrome 控制台访问 whatsapp web 中的反应组件纤程？

Question

我正在尝试开发一个 chrome 扩展程序来访问 WhatsApp Web 的对话。我正在努力访问 Conversation 组件状态（我可以使用 React 开发人员工具看到的组件）

当我尝试时

document.querySelector("#main")['__reactFiber$lwbvlqgcvdi']

我得到了这样的东西

alternate: zu {tag: 5, key: null, elementType: 'div', type: 'div', stateNode: div#main._1fqrG, …}
child: zu {tag: 0, key: '33619488273-1490436851@g.us', stateNode: null, elementType: ƒ, type: ƒ, …}
childLanes: 1
dependencies: null
elementType: "div"
firstEffect: zu {tag: 5, key: null, elementType: 'div', type: 'div', stateNode: div._26lC3, …}
flags: 0
index: 0
key: null
lanes: 0
lastEffect: zu {tag: 1, key: null, stateNode: t, elementType: ƒ, type: ƒ, …}
memoizedProps: {id: 'main', className: '_1fqrG', style: {…}, children: {…}}
memoizedState: null
mode: 0
nextEffect: null
pendingProps: {id: 'main', className: '_1fqrG', style: {…}, children: {…}}
ref: e=> {…}
return: zu {tag: 10, key: null, elementType: {…}, type: {…}, stateNode: null, …}
sibling: zu {tag: 5, key: null, elementType: 'div', type: 'div', stateNode: div, …}
stateNode: div#main._1fqrG
tag: 5
type: "div"
updateQueue: null
[[Prototype]]: Object

而不是我在使用 React 开发人员工具 $r 变量时得到的以下结果

context: {}
props: {setInterval: ƒ, clearInterval: ƒ, setTimeout: ƒ, clearTimeout: ƒ, requestAnimationFrame: ƒ, …}
refs: {}
state: {chat: g, msgCollection: u, focusCtx: {…}, showConversationPreview: false, animate: false, …}
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
_handleCloseChat: e=> {…}
_handleOpenChat: (e,t,a)=> {…}
_handleOpenChatId: 1
_msgCollectionChanged: (e,t,a,s)=> {…}
_newChatScrollInfo: (e,t)=> {…}
_openedChatInfo: {chat: g, renderedMsgsInfo: {…}, visibleMsgOrder: Array(11), clientHeight: 572}
_reactInternals: zu {tag: 1, key: null, stateNode: y, elementType: ƒ, type: ƒ, …}
_refContainer: {current: t.default}
_windowGainedFocus: ()=> {…}
_windowLostFocus: ()=> {…}
[[Prototype]]: m

document.querySelector("#main")['__reactFiber$lwbvlqgcvdi'].stateNodereturns 与 document.querySelector("#main")['__reactFiber$lwbvlqgcvdi']

相同的元素

document.querySelector("#main")['__reactFiber$lwbvlqgcvdi'].return 给我包装组件的上下文提供程序

return.stateNode returns 空

我错过了什么？

Answer 1

我终于明白了。它是#main 元素的曾曾曾曾祖父母。（Element React 开发人员工具将我作为 Conversation 组件的匹配 DOM 元素）

现在我知道 React 开发者工具可以为不同的组件提供相同的匹配 DOM 元素 ^^'

更新

为了访问我正在寻找的状态，我使用了以下代码：

  document.querySelector("#main")['__reactFiber$lwbvlqgcvdi'].return.return.return.return.return.return.stateNode.state

出于无聊/绝望/好奇，我爬上 object 的图表时，我真的很不走运 ^^'

如何从 chrome 控制台访问 whatsapp web 中的反应组件纤程？

How to access a react component fiber in whatsapp web from chrome console?

javascript

reactjs

google-chrome-extension

whatsapp