Try to support Firefox related #25

Signed-off-by: Jack Works <[email protected]>
DimensionDev · May 13, 2019 · 92fd916 · 92fd916
1 parent 0879aa6
commit 92fd916
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/src/background-service.ts b/src/background-service.ts
@@ -5,19 +5,24 @@ backgroundSetup()
 
 if (GetContext() === 'background') {
     const script = `{
-const script = document.createElement('script')
-script.src = "${browser.runtime.getURL('js/injectedscript.js')}"
-document.documentElement.appendChild(script)
-}`
+        const script = document.createElement('script')
+        script.src = "${browser.runtime.getURL('js/injectedscript.js')}"
+        document.documentElement.appendChild(script)
+        }`
     browser.webNavigation.onCommitted.addListener(
         async arg => {
             try {
                 await browser.tabs.executeScript(arg.tabId, {
                     runAt: 'document_start',
+                    frameId: arg.frameId,
                     code: script,
                 })
             } catch (e) {
-                console.error('Inject error', e, arg, browser.runtime.getURL('js/injectedscript.js'))
+                if (e.message.match('non-structured-clonable data')) {
+                    // It's okay we don't need the result, happened on Firefox
+                } else if (e.message.match('Frame not found, or missing host permission')) {
+                    // It's maybe okay, happened on Firefox
+                } else console.error('Inject error', e, arg, browser.runtime.getURL('js/injectedscript.js'))
             }
         },
         { url: [{ hostEquals: 'www.facebook.com' }] },

diff --git a/src/utils/jss/JSS-internal.d.ts b/src/utils/jss/JSS-internal.d.ts
@@ -77,4 +77,6 @@ interface ConstructableStyleSheets {
     adoptedStyleSheets: ReadonlyArray<StyleSheet>
 }
 interface Document extends ConstructableStyleSheets {}
-interface ShadowRoot extends ConstructableStyleSheets {}
+interface ShadowRoot extends ConstructableStyleSheets {
+    __polyfilled_root_: HTMLElement
+}
diff --git a/src/utils/jss/renderInShadowRoot.tsx b/src/utils/jss/renderInShadowRoot.tsx
@@ -7,6 +7,9 @@ import React from 'react'
 import { useMaskbookTheme } from '../theme'
 import ConstructableStylesheetsRendererGenerator from './ConstructableStylesheetsRenderer'
 
+const isPolyfilled = CSSStyleSheet.name !== 'CSSStyleSheet'
+if (isPolyfilled) console.warn('Browser does not support Constructable Stylesheets. Using polyfill.')
+
 const createJSS = memoize((shadow: ShadowRoot) => {
     const jss = create({ ...jssPreset() })
     ;(jss as any).options.Renderer = ConstructableStylesheetsRendererGenerator(shadow)
@@ -20,11 +23,30 @@ const generateClassName = createGenerateClassName()
  */
 export function renderInShadowRoot(node: React.ReactNode, shadow: ShadowRoot) {
     const jss = createJSS(shadow)
-    ReactDOM.render(
+    const jsx = (
         <JssProvider jss={jss} generateClassName={generateClassName}>
             {useMaskbookTheme(node)}
-        </JssProvider>,
-        shadow as any,
+        </JssProvider>
     )
-    return () => ReactDOM.unmountComponentAtNode(shadow as any)
+    const Component = class extends React.Component {
+        state: { error?: Error } = { error: undefined }
+        render() {
+            if (this.state.error) return this.state.error.message
+            return jsx
+        }
+        componentDidCatch(error: Error, errorInfo: any) {
+            console.error(error, errorInfo)
+            this.setState({ error })
+        }
+    }
+    if (isPolyfilled) {
+        const hostRoot = shadow.__polyfilled_root_ || document.createElement('host')
+        shadow.__polyfilled_root_ = hostRoot
+        shadow.appendChild(hostRoot)
+        ReactDOM.render(<Component />, hostRoot)
+        return () => ReactDOM.unmountComponentAtNode(hostRoot)
+    } else {
+        ReactDOM.render(<Component />, shadow as any)
+        return () => ReactDOM.unmountComponentAtNode(shadow as any)
+    }
 }