Move polyfills out. (Partly) Test with Firefox #25

DimensionDev · Apr 28, 2019 · a3799d0 · a3799d0
1 parent eaded48
commit a3799d0
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 /.awcache
 /.tscache
+public/polyfill
 # dependencies
 /node_modules
 /.pnp

diff --git a/config-overrides.js b/config-overrides.js
@@ -11,8 +11,8 @@ module.exports = function override(/** @type{import("webpack").Configuration} */
         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'
 
     // No split
     config.optimization.runtimeChunk = false
@@ -25,13 +25,20 @@ module.exports = function override(/** @type{import("webpack").Configuration} */
 
     config.plugins.push(
         new (require('write-file-webpack-plugin'))({
-            test: /(static\/.*|.+\.png|index\.html|manifest\.json)/,
+            test: /(shim|polyfill|js\/.*|.+\.png|index\.html|manifest\.json)/,
         }),
     )
     // Write files to /public
+    const polyfills = [
+        'node_modules/construct-style-sheets-polyfill/adoptedStyleSheets.min.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',
+    ].map(x => ({ from: x, to: path.join(__dirname, './public/polyfill/') }))
     config.plugins.push(
         new (require('copy-webpack-plugin'))(
             [
+                ...polyfills,
                 {
                     from: path.join(__dirname, './public'),
                     to: path.join(__dirname, './dist'),

diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
+        <script src="polyfill/adoptedStyleSheets.min.js"></script>
+        <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>

diff --git a/public/manifest.json b/public/manifest.json
@@ -6,32 +6,32 @@
     "content_scripts": [
         {
             "matches": ["https://www.facebook.com/*"],
-            "js": ["/static/js/contentscript.js"],
+            "js": ["polyfill/adoptedStyleSheets.min.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"],
+            "js": ["polyfill/browser-polyfill.min.js", "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"],
     "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",
+        "page": "index.html",
         "open_in_tab": true,
         "chrome_style": 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 --git a/src/extension/content-script/index.tsx b/src/extension/content-script/index.tsx
@@ -1,12 +1,9 @@
-import 'construct-style-sheets-polyfill'
 import './injections/Welcome' // ? Inject welcome
 import './injections/PostBox' // ? Inject postbox
 import './injections/Posts' // ? Inject all posts
 import './injections/ProfilePage' // ? Inject to ProfilePage
 import './tasks' // ? AutomatedTabTask Run tasks when invoked by background page
 
-import * as hk from '@holoflows/kit'
-Object.assign(window, hk)
 navigator.clipboard.writeText = async (data: string) => {
     const textArea = document.createElement('textarea')
     textArea.value = data

diff --git a/src/extension/content-script/injections/LiveSelectors.ts b/src/extension/content-script/injections/LiveSelectors.ts
@@ -10,6 +10,8 @@ export function getUsername(link?: HTMLAnchorElement | null) {
     const url = link.href
     const after = url.split('https://www.facebook.com/')[1]
     if (!after) return undefined
-    if (after.match('profile.php')) return after.match(/id=(?<id>\d+)/)!.groups!.id
+    // Firefox doesn't support it
+    // if (after.match('profile.php')) return after.match(/id=(?<id>\d+)/)!.groups!.id
+    if (after.match('profile.php')) return after.match(/id=(\d+)/)![1]
     else return after.split('?')[0]
 }
diff --git a/src/extension/content-script/injections/Posts.tsx b/src/extension/content-script/injections/Posts.tsx
@@ -72,11 +72,15 @@ const watcher = new MutationObserverWatcher(posts)
         let postId = ''
         try {
             const postIdInHref = location.href.match(
-                /plugins.+(perma.+story_fbid%3D|posts%2F)((?<id>\d+)%26).+(&width=500)?/,
+                // Firefox doesnot support it.
+                // /plugins.+(perma.+story_fbid%3D|posts%2F)((?<id>\d+)%26).+(&width=500)?/,
+                /plugins.+(perma.+story_fbid%3D|posts%2F)((\d+)%26).+(&width=500)?/,
             )
             postId =
                 // In single url
-                (postIdInHref && postIdInHref.groups!.id) ||
+                // Firefox doesnot support it.
+                // (postIdInHref && postIdInHref.groups!.id) ||
+                (postIdInHref && postIdInHref[3]) ||
                 // In timeline
                 node.current.parentElement!.querySelector('div[id^=feed]')!.id.split(';')[2]
         } catch {}

diff --git a/src/extension/service.ts b/src/extension/service.ts
@@ -32,8 +32,8 @@ async function register<T extends Service>(service: () => Promise<T>, name: keyo
         const loaded = await service()
         Object.assign(Services, { [name]: loaded })
         AsyncCall(loaded, { key: name })
-    } else if (GetContext() === 'content' || location.hostname === 'localhost') {
-        console.log(`Service ${name} registered in Content script`)
+    } else if (GetContext() === 'content' || GetContext() === 'options' || location.hostname === 'localhost') {
+        console.log(`Service ${name} registered in Content script & Options page`)
         Object.assign(Services, { [name]: AsyncCall({}, { key: name }) })
         if (location.hostname === 'localhost') {
             // ? -> UI developing

diff --git a/src/setup.ts b/src/setup.ts
@@ -1,7 +1,5 @@
 export function backgroundSetup() {
-    require('webcrypto-liner/dist/webcrypto-liner.shim')
     Object.assign(window, {
-        browser: require('webextension-polyfill'),
         elliptic: require('elliptic'),
     })
     if (!('__reduceLog__' in window)) {
@@ -21,8 +19,6 @@ export function backgroundSetup() {
 }
 export function uiSetup() {
     Object.assign(window, {
-        browser: require('webextension-polyfill'),
-        React: require('react'),
         // See: https://material-ui.com/style/typography/#migration-to-typography-v2
         __MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__: true,
     })