feat: add encrypted comment shipped

src/components/InjectedComponents/CommentBox.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react'
+import { styled } from '@material-ui/core/styles'
+import { useCapturedInput } from '../../utils/hooks/useCapturedEvents'
+
+const Input = styled('input')({
+    background: '#f2f3f5',
+    border: '1px solid #ccd0d5',
+    width: '100%',
+    height: 34,
+    borderRadius: 20,
+    padding: '2px 1em',
+    boxSizing: 'border-box',
+    marginTop: 6,
+})
+export function CommentBox(props: { onSubmit(newVal: string): void; display: boolean }) {
+    const ref = React.createRef<HTMLInputElement>()
+    const binder = useCapturedInput(ref, () => {})
+    useEffect(
+        binder(['keypress'], e => {
+            if (!ref.current) return
+            if (e.key === 'Enter') {
+                props.onSubmit(ref.current.value)
+                ref.current.value = ''
+            }
+        }),
+    )
+    if (!props.display) return null
+    return <Input ref={ref} placeholder="Maskbook!" />
+}

src/components/InjectedComponents/PostComments.tsx

@@ -25,15 +25,16 @@ interface Props {
     postIV: string
     postContent: string
     comment: string
+    needZip(): void
 }
-export function PostComment({ comment, postContent, postIV }: Props) {
+export function PostComment({ comment, postContent, postIV, needZip }: Props) {
     return (
         <AsyncComponent
             promise={() => Services.Crypto.decryptComment(postIV, postContent, comment)}
             dependencies={[postIV, postContent, comment]}
             awaitingComponent={null}
             completeComponent={result =>
-                result.data ? <PostCommentDecrypted>{result.data}</PostCommentDecrypted> : null
+                result.data ? (needZip(), <PostCommentDecrypted>{result.data}</PostCommentDecrypted>) : null
             }
             failedComponent={null}
         />

src/crypto/crypto-alpha-40.ts

@@ -333,11 +333,15 @@ export async function decryptComment(
     const payload = extractCommentPayload(encryptComment)
     if (!payload) return
     const key = await getCommentKey(postIV, postContent)
-    const x = await decryptWithAES({
-        aesKey: key,
-        iv: decodeArrayBuffer(postIV),
-        encrypted: payload,
-    })
-    return decodeText(x)
+    try {
+        const x = await decryptWithAES({
+            aesKey: key,
+            iv: decodeArrayBuffer(postIV),
+            encrypted: payload,
+        })
+        return decodeText(x)
+    } catch {
+        return undefined
+    }
 }
 //#endregion

src/extension/content-script/injections/Posts.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { LiveSelector, MutationObserverWatcher, DomProxy, ValueRef } from '@holoflows/kit'
 import { getPersonIdentifierAtFacebook } from './MyUsername'
 import { renderInShadowRoot } from '../../../utils/jss/renderInShadowRoot'
@@ -8,6 +8,9 @@ import { isMobile } from '../../../social-network/facebook.com/isMobile'
 import { PostCommentDecrypted, PostComment } from '../../../components/InjectedComponents/PostComments'
 import { useValueRef } from '../../../utils/hooks/useValueRef'
 import { PostInspector } from './Posts/PostInspector'
+import { CommentBox } from '../../../components/InjectedComponents/CommentBox'
+import { selectElementContents, dispatchCustomEvents, sleep } from '../../../utils/utils'
+import Services from '../../service'
 
 const posts = new LiveSelector().querySelectorAll<HTMLDivElement>(
     isMobile ? '.story_body_container ' : '.userContent, .userContent+*+div>div>div>div>div',
@@ -17,6 +20,7 @@ type InspectedPostInfo = {
     postBy: ValueRef<PersonIdentifier>
     postID: ValueRef<string | null>
     postContent: ValueRef<string>
+    postPayload: ValueRef<ReturnType<typeof deconstructPayload> | null>
     comments: Set<HTMLElement>
     decryptedPostContent: ValueRef<string>
 }
@@ -30,39 +34,45 @@ new MutationObserverWatcher(posts)
             postBy: new ValueRef(PersonIdentifier.unknown),
             postContent: new ValueRef(''),
             postID: new ValueRef(''),
+            postPayload: new ValueRef(null),
         }
         inspectedPosts.add(info)
 
         function collectPostInfo() {
             info.postContent.value = node.current.innerText
-            info.postBy.value = getPostBy(node, deconstructPayload(info.postContent.value) !== null)
+            info.postPayload.value = deconstructPayload(info.postContent.value)
+            info.postBy.value = getPostBy(node, info.postPayload.value !== null)
             info.postID.value = getPostID(node)
         }
         collectPostInfo()
+        clickSeeMore(node)
 
         const root = new LiveSelector().replace(() => [node.current]).closest('.userContentWrapper')
+        // ? inject after comments
         const commentSelector = root
             .clone()
             .querySelectorAll('[role=article]')
             .querySelectorAll('a+span')
-            .closest<HTMLElement>(3)
-        console.log(inspectedPosts)
+            .closest<HTMLElement>(2)
         const commentWatcher = new MutationObserverWatcher(commentSelector, root.evaluateOnce()[0])
             .useForeach(commentNode => {
                 const commentRef = new ValueRef(commentNode.current.innerText)
-                const UI = () => {
+                const CommentUI = () => {
                     const postContent = useValueRef(info.decryptedPostContent)
-                    const postIV = useValueRef(info.postContent)
                     const comment = useValueRef(commentRef)
                     return (
                         <PostComment
+                            needZip={useCallback(() => {
+                                commentNode.current.style.whiteSpace = 'nowrap'
+                                commentNode.current.style.overflow = 'hidden'
+                            }, [])}
                             comment={comment}
                             postContent={postContent}
-                            postIV={(deconstructPayload(postIV) || { iv: '' }).iv}
+                            postIV={info.postPayload.value ? info.postPayload.value.iv : ''}
                         />
                     )
                 }
-                const unmount = renderInShadowRoot(<UI />, commentNode.afterShadow)
+                const unmount = renderInShadowRoot(<CommentUI />, commentNode.afterShadow)
                 return {
                     onNodeMutation() {
                         commentRef.value = commentNode.current.innerText
@@ -75,15 +85,45 @@ new MutationObserverWatcher(posts)
                     },
                 }
             })
+            .setDomProxyOption({ afterShadowRootInit: { mode: 'closed' } })
             .startWatch()
 
-        clickSeeMore(node)
+        // ? inject comment text field
+        const commentBoxSelector = root
+            .clone()
+            .querySelector<HTMLFormElement>('form form')
+            .enableSingleMode()
+        const commentBoxWatcher = new MutationObserverWatcher(commentBoxSelector, root.evaluateOnce()[0])
+            .setDomProxyOption({ afterShadowRootInit: { mode: 'closed' } })
+            .enableSingleMode()
+            .startWatch()
+        const CommentBoxUI = () => {
+            const payload = useValueRef(info.postPayload)
+            const decrypted = useValueRef(info.decryptedPostContent)
+            return (
+                <CommentBox
+                    display={!!(payload && decrypted)}
+                    onSubmit={async content => {
+                        const encryptedComment = await Services.Crypto.encryptComment(payload!.iv, decrypted, content)
+                        const _root = root.evaluateOnce()[0] as HTMLDivElement
+                        selectElementContents(_root.querySelector('[contenteditable]')!)
+                        dispatchCustomEvents('paste', encryptedComment)
+                        await sleep(200)
+                        if (_root.innerText.match(encryptedComment)) console.log('Okay')
+                        else prompt('Please paste it into the comment box!', encryptedComment)
+                    }}
+                />
+            )
+        }
+        const unmountCommentBox = renderInShadowRoot(<CommentBoxUI />, commentBoxWatcher.firstVirtualNode.afterShadow)
+
+        // ? inject after posts
         const zipPost = () => {
             zipEncryptedPostContent(node)
             zipPostLinkPreview(node)
         }
         const onDecrypted = (val: string) => (info.decryptedPostContent.value = val)
-        const UI = () => {
+        const PostDecryptUI = () => {
             const id = useValueRef(info.postID)
             const by = useValueRef(info.postBy)
             const content = useValueRef(info.postContent)
@@ -98,18 +138,19 @@ new MutationObserverWatcher(posts)
             )
         }
         // Render it
-        const unmount = renderInShadowRoot(<UI />, node.afterShadow)
+        const unmountPostInspector = renderInShadowRoot(<PostDecryptUI />, node.afterShadow)
         return {
             onNodeMutation: collectPostInfo,
             onTargetChanged: collectPostInfo,
             onRemove() {
-                unmount()
+                unmountPostInspector()
+                unmountCommentBox()
                 commentWatcher.stopWatch()
+                commentBoxWatcher.stopWatch()
             },
         }
     })
     .setDomProxyOption({ afterShadowRootInit: { mode: 'closed' } })
-    .omitWarningForRepeatedKeys()
     .startWatch()
 
 function zipPostLinkPreview(node: DomProxy) {

src/utils/hooks/useCapturedEvents.ts

@@ -4,12 +4,12 @@ import { useEffect, useCallback } from 'react'
  * ! Call this hook inside Shadow Root!
  */
 export function useCapturedInput(
-    ref: React.MutableRefObject<HTMLInputElement | undefined>,
+    ref: React.MutableRefObject<HTMLInputElement | undefined | null>,
     onChange: (newVal: string) => void,
 ) {
     const stop = useCallback((e: Event) => e.stopPropagation(), [])
     const use = useCallback((e: Event) => onChange((e.currentTarget as HTMLInputElement).value), [onChange])
-    function binder(keys: (keyof HTMLElementEventMap)[], fn: (e: Event) => void) {
+    function binder<T extends keyof HTMLElementEventMap>(keys: T[], fn: (e: HTMLElementEventMap[T]) => void) {
         return () => {
             if (!ref.current) return
             keys.forEach(k => ref.current!.addEventListener(k, fn, true))
@@ -19,7 +19,7 @@ export function useCapturedInput(
             }
         }
     }
-    useEffect(binder(['keydown', 'keyup', 'keypress', 'change'], use), [ref.current])
+    useEffect(binder(['change'], use), [ref.current])
     useEffect(
         binder(
             [
@@ -41,4 +41,5 @@ export function useCapturedInput(
         ),
         [ref.current],
     )
+    return binder
 }

src/utils/jss/renderInShadowRoot.tsx

@@ -15,6 +15,7 @@ const jss = create({ ...jssPreset(), Renderer: ConstructableStyleSheetsRenderer
  * @param shadow ShadowRoot that want to inject to
  */
 export function renderInShadowRoot(node: React.ReactNode, shadow: ShadowRoot) {
+    if (shadow.mode === 'open') console.warn('Do not render with open ShadowRoot!')
     ReactDOM.render(<RenderInShadowRootWrapper children={node} />, shadow as any)
     livingShadowRoots.add(shadow)
     applyAdoptedStyleSheets()

src/utils/utils.ts

@@ -22,6 +22,7 @@ export function getUrl(path: string, fallback: string = '') {
 export function dispatchCustomEvents<T extends keyof CustomEvents>(event: T, ...x: CustomEvents[T]) {
     document.dispatchEvent(new CustomEvent(CustomEventId, { detail: [event, x] }))
 }
+Object.assign(window, { dispatchCustomEvents })
 /**
  * Select all text in a node
  * @param el Element