Merge branch 'release/1.3.0' into released

Author: Jack-Works

Diff for: .circleci/config.yml

@@ -14,7 +14,7 @@ jobs:
                   name: Clone @holoflows/kit
                   command: |
                       cd ..
-                      git clone -q --depth=1 https://github.com/project-holoflows/holoflows-kit
+                      git clone -q --depth=1 https://github.com/DimensionDev/holoflows-kit
             - restore_cache:
                   keys:
                       - v1-holoflows-{{ checksum "~/holoflows-kit/yarn.lock" }}
@@ -83,8 +83,14 @@ jobs:
                       set -o nounset
                       ghr -t ${GITHUB_TOKEN} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} -b "✔ No breaking changes. / ⚠ Has breaking changes!
 
+                      🆕 New Feature
+
+                      🔐 Security
+
                       🎨 UI Improvements
 
+                      🐛 Bug Fixes
+
                       👩‍💻 Miscellaneous" -replace -draft -prerelease $(git describe HEAD) ~/repo/Maskbook.zip
                   # -b BODY \         # Set text describing the contents of the release
                   # -delete \         # Delete release and its git tag in advance if it exists (same as -recreate)

Diff for: .gitignore

@@ -1,6 +1,9 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.vscode/launch.json
+.vscode/tasks.json
 /.awcache
 /.tscache
+public/polyfill
 # dependencies
 /node_modules
 /.pnp

Diff for: .storybook/webpack.config.js

@@ -5,9 +5,6 @@ module.exports = ({ config }) => {
             {
                 loader: require.resolve('awesome-typescript-loader'),
             },
-            {
-                loader: require.resolve('react-docgen-typescript-loader'),
-            },
         ],
     })
     config.resolve.extensions.push('.ts', '.tsx')

Diff for: .vscode/launch.json

@@ -1,6 +1,5 @@
 # Maskbook · ![GitHub license](https://img.shields.io/badge/license-AGPL-blue.svg?style=flat-square) ![Ciecle CI](https://img.shields.io/circleci/project/github/DimensionDev/Maskbook.svg?style=flat-square&logo=circleci) [![Join the chat at https://gitter.im/Maskbook/community](https://badges.gitter.im/Maskbook/community.svg)](https://gitter.im/Maskbook/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ![Chrome Web Store](https://img.shields.io/chrome-web-store/v/jkoeaghipilijlahjplgbfiocjhldnap.svg?logo=Maskbook&logoColor=%231c68f3&style=flat-square)
 
-
 Encrypt your posts & chats on You-Know-Where. Allow only your friends to decrypt.
 
 For general introductions, see https://Maskbook.io/
@@ -28,7 +27,7 @@ After `Maskbook` and `@holoflows/kit` gets stable, we will directly add `@holofl
 #### Prepare for library @holoflows/kit
 
 -   `cd ..`
--   `git clone https://github.com/project-holoflows/Holoflows-kit.git`
+-   `git clone https://github.com/DimensionDev/holoflows-kit.git`
 -   `cd Holoflows-kit`
 -   `yarn install`
 -   `yarn build`

Diff for: README.md

@@ -1,43 +1,60 @@
 const path = require('path')
 
-process.env.NODE_ENV = 'development'
-const env = process.env.NODE_ENV
-process.env.GENERATE_SOURCEMAP = (env === 'development') + ''
+process.env.BROWSER = 'none'
 module.exports = function override(/** @type{import("webpack").Configuration} */ config, env) {
+    // CSP bans eval
+    // And non-inline source-map not working
     if (env === 'development') config.devtool = 'inline-source-map'
     config.entry = {
         app: path.join(__dirname, './src/index.tsx'),
         contentscript: path.join(__dirname, './src/content-script.ts'),
         backgroundservice: path.join(__dirname, './src/background-service.ts'),
         injectedscript: path.join(__dirname, './src/extension/injected-script/index.ts'),
     }
-    config.output.filename = 'static/js/[name].js'
-    config.output.chunkFilename = 'static/js/[name].chunk.js'
+    config.output.filename = 'js/[name].js'
+    config.output.chunkFilename = 'js/[name].chunk.js'
+
+    // Leads a loading failure in background service
     config.optimization.runtimeChunk = false
     config.optimization.splitChunks = undefined
 
+    // Dismiss warning for gun.js
     config.module.wrappedContextCritical = false
     config.module.exprContextCritical = false
     config.module.unknownContextCritical = false
 
-    // @ts-ignore
     config.plugins.push(
         new (require('write-file-webpack-plugin'))({
-            test: /(static\/.*|.+\.png|index\.html|manifest\.json)/,
+            test: /(webp|jpg|png|shim|polyfill|js\/.*|index\.html|manifest\.json)/,
         }),
     )
     // Write files to /public
-    config.plugins.push(
-        new (require('copy-webpack-plugin'))(
-            [
-                {
-                    from: path.join(__dirname, './public'),
-                    to: path.join(__dirname, './dist'),
-                },
-            ],
-            { ignore: ['*.html'] },
-        ),
-    )
+    const polyfills = [
+        'node_modules/construct-style-sheets-polyfill/adoptedStyleSheets.js',
+        'node_modules/webextension-polyfill/dist/browser-polyfill.min.js',
+        'node_modules/webextension-polyfill/dist/browser-polyfill.min.js.map',
+        'node_modules/webcrypto-liner/dist/webcrypto-liner.shim.js',
+    ]
+    const public = path.join(__dirname, './public')
+    const publicPolyfill = path.join(__dirname, './public/polyfill')
+    const dist = path.join(__dirname, './dist')
+    if (env === 'development') {
+        config.plugins.push(
+            new (require('copy-webpack-plugin'))(
+                [...polyfills.map(from => ({ from, to: publicPolyfill })), { from: public, to: dist }],
+                { ignore: ['*.html'] },
+            ),
+        )
+    } else {
+        const fs = require('fs')
+        if (!fs.existsSync(publicPolyfill)) fs.mkdirSync(publicPolyfill)
+        polyfills.map(x =>
+            fs.copyFile(x, path.join(publicPolyfill, path.basename(x)), err => {
+                if (err) throw err
+            }),
+        )
+    }
+    // Let webpack build to es2017 instead of es5
     for (const x of config.module.rules) {
         if (!x.oneOf) continue
         for (const rule of x.oneOf) {
@@ -61,6 +78,8 @@ module.exports = function override(/** @type{import("webpack").Configuration} */
     })
     // Disable the eslint linter. We have tslint.
     config.module.rules = config.module.rules.filter(x => x.enforce !== 'pre')
+    // write-file-webpack-plugin conflict with this
+    // ! Don't upgrade webpack to 5 until they fix this
     config.output.futureEmitAssets = false
     return config
 }

Diff for: config-overrides.js

@@ -1,11 +1,10 @@
 {
   "name": "maskbook",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
-    "@types/chrome": "^0.0.83",
     "@types/classnames": "^2.2.7",
     "@types/gun": "^0.9.1",
     "@types/jest": "^24.0.6",
@@ -14,9 +13,10 @@
     "@types/react": "16.8.14",
     "@types/react-dom": "16.8.4",
     "@types/react-jss": "^8.6.3",
+    "@types/react-router-dom": "^4.3.2",
     "@types/tiny-secp256k1": "^1.0.0",
     "classnames": "^2.2.6",
-    "construct-style-sheets-polyfill": "^1.0.3",
+    "construct-style-sheets-polyfill": "^2.0.1",
     "copy-webpack-plugin": "^5.0.0",
     "elliptic": "^6.4.1",
     "gun": "0.2019.422",
@@ -28,6 +28,7 @@
     "react-app-rewired": "^2.1.0",
     "react-dom": "^16.8.3",
     "react-jss": "^8.6.1",
+    "react-router-dom": "^5.0.0",
     "react-scripts": "3.0.0",
     "reflect-metadata": "^0.1.13",
     "storybook-addon-material-ui": "0.9.0-alpha.18",
@@ -36,7 +37,9 @@
     "tslint": "^5.16.0",
     "typed-db": "^1.0.1-1",
     "typescript": "^3.4.4",
+    "web-ext-types": "^3.1.0",
     "webcrypto-liner": "0.1.38",
+    "webextension-polyfill": "^0.4.0",
     "write-file-webpack-plugin": "^4.5.0"
   },
   "scripts": {
@@ -68,7 +71,6 @@
     "@types/storybook__addon-knobs": "^5.0.0",
     "@types/storybook__addon-links": "^3.3.4",
     "@types/storybook__react": "^4.0.1",
-    "awesome-typescript-loader": "^5.2.1",
-    "react-docgen-typescript-loader": "^3.1.0"
+    "awesome-typescript-loader": "^5.2.1"
   }
 }

Diff for: package.json

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
+        <script src="polyfill/browser-polyfill.min.js"></script>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
         <style>
@@ -17,5 +18,6 @@
     </head>
     <body>
         <div id="root"></div>
+        <script src="polyfill/adoptedStyleSheets.js"></script>
     </body>
 </html>

Diff for: public/index.html

@@ -1,37 +1,30 @@
 {
     "$schema": "http://json.schemastore.org/chrome-manifest",
     "name": "Maskbook",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "manifest_version": 2,
     "content_scripts": [
         {
             "matches": ["https://www.facebook.com/*"],
-            "js": ["/static/js/contentscript.js"],
+            "js": ["polyfill/adoptedStyleSheets.js", "polyfill/browser-polyfill.min.js", "js/contentscript.js"],
             "run_at": "document_idle",
             "all_frames": true
-        },
-        {
-            "matches": ["https://www.facebook.com/*"],
-            "js": ["/static/js/injectedscript.js"],
-            "run_at": "document_start",
-            "all_frames": true
         }
     ],
     "web_accessible_resources": ["*.css", "*.js", "*.jpg", "*.png"],
-    "permissions": ["https://*.facebook.com/*", "storage", "downloads", "background"],
+    "permissions": ["https://www.facebook.com/*", "storage", "downloads", "background", "webNavigation"],
     "background": {
-        "scripts": ["/static/js/backgroundservice.js"]
+        "scripts": ["polyfill/webcrypto-liner.shim.js", "polyfill/browser-polyfill.min.js", "js/backgroundservice.js"]
     },
     "options_ui": {
-        "page": "/index.html",
-        "open_in_tab": true,
-        "chrome_style": true
+        "page": "index.html",
+        "open_in_tab": true
     },
     "icons": {
-        "16": "/16x16.png",
-        "48": "/48x48.png",
-        "128": "/128x128.png",
-        "256": "/256x256.png"
+        "16": "16x16.png",
+        "48": "48x48.png",
+        "128": "128x128.png",
+        "256": "256x256.png"
     },
     "homepage_url": "https://maskbook.io",
     "description": "Encrypt your posts & chats on You-Know-Where. Allow only your friends to decrypt."

Diff for: public/manifest.json

@@ -1,8 +1,30 @@
-export default undefined
-if (
-    location.href === 'http://localhost:3000/' ||
-    (location.protocol === 'chrome-extension:' && location.pathname === '/index.html')
-) {
-} else {
-    require('./extension/background-script')
+import './extension/service'
+import { backgroundSetup } from './setup'
+import { GetContext } from '@holoflows/kit/es'
+backgroundSetup()
+
+if (GetContext() === 'background') {
+    const 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) {
+                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 for: src/background-service.ts

@@ -2,16 +2,16 @@ import React from 'react'
 import { Person } from '../../extension/background-script/PeopleService'
 import { ValueRef } from '@holoflows/kit/es'
 import { MessageCenter } from '../../utils/messages'
-import { PeopleService } from '../../extension/content-script/rpc'
+import Services from '../../extension/service'
 
 const ref = new ValueRef<Person[]>([])
-PeopleService.queryPeople().then(p => (ref.value = p))
+Services.People.queryPeople().then(p => (ref.value = p))
 MessageCenter.on('newPerson', p => {
     const old = ref.value.filter(x => x.username !== p.username)
     ref.value = [...old, p]
 })
 export function usePeople() {
     const [people, setPeople] = React.useState<Person[]>(ref.value)
-    React.useEffect(() => ref.addListener(val => setPeople(val)), [])
-    return people.filter(x => x.username !== '$self')
+    React.useEffect(() => ref.addListener(val => setPeople(val.filter(x => x.username !== '$self'))), [])
+    return people
 }

Diff for: src/components/DataSource/PeopleRef.ts

@@ -1,7 +1,7 @@
 import React from 'react'
 import AsyncComponent from '../../utils/components/AsyncComponent'
 import { AdditionalContent } from './AdditionalPostContent'
-import { CryptoService } from '../../extension/content-script/rpc'
+import Services from '../../extension/service'
 
 interface Props {
     provePost: string
@@ -10,7 +10,7 @@ interface Props {
 export function AddToKeyStore({ provePost, postBy }: Props) {
     return (
         <AsyncComponent
-            promise={async () => CryptoService.verifyOthersProve(provePost, postBy)}
+            promise={async () => Services.Crypto.verifyOthersProve(provePost, postBy)}
             dependencies={[provePost, postBy]}
             awaitingComponent={AddToKeyStoreUI.awaiting}
             completeComponent={() => AddToKeyStoreUI.success}