Merge branch 'main' of github.com:getlantern/broflake

Author: noahlevenson

.gitignore

@@ -18,5 +18,4 @@ ui/yarn-error.log*
 ui/.env
 ui/extension/dist
 ui/extension/packages
-ui/extension/node_modules
 ui/extension/.env

README.md

@@ -162,9 +162,9 @@ Links:
 
 3. Install the dependencies: `yarn`
 
-4. To start in developer mode with hot-refresh server (degraded performance): run `yarn start` and visit [http://localhost:3000](http://localhost:3000)
+4. To start in developer mode with hot-refresh server (degraded performance): run `yarn dev:web` and visit [http://localhost:3000](http://localhost:3000)
 
-5. To build optimized for best performance run: `yarn build`
+5. To build optimized for best performance run: `yarn build:web`
 
 6. To serve a build:
    1. Install a simple server e.g. `npm install -g serve` (or your lightweight http server of choice)
@@ -176,19 +176,18 @@ Links:
 
 #### Browser extension quickstart for devs
 
-1. Work from the ui/extension dir: `cd ui/extension`
+1. Work from the ui dir: `cd ui`
 
 2. Install the dependencies: `yarn`
 
-3. Configure your .env file: `cp .env.example .env`
-   1. Set `POPUP_URL` to your intended hosted popup page. If you are serving it from `ui` in [step #6](#ui-quickstart-for-devs), use [http://localhost:3000/popup](http://localhost:3000/popup). To use prod, set to [https://embed.lantern.io/popup](https://embed.lantern.io/popup).
-   2. Set `OFFSCREEN_URL` to your intended hosted offscreen page. If you are serving it from `ui` in [step #6](#ui-quickstart-for-devs), use [http://localhost:3000/offscreen](http://localhost:3000/offscreen). To use prod, set to [https://embed.lantern.io/offscreen](https://embed.lantern.io/offscreen).
+3. Configure your .env file: `cd extension && cp .env.example .env`
+   1. Set `EXTENSION_POPUP_URL` to your intended hosted popup page. If you are serving it from `ui` in [step #6](#ui-quickstart-for-devs), use [http://localhost:3000/popup](http://localhost:3000/popup). To use prod, set to [https://embed.lantern.io/popup](https://embed.lantern.io/popup).
+   2. Set `EXTENSION_OFFSCREEN_URL` to your intended hosted offscreen page. If you are serving it from `ui` in [step #6](#ui-quickstart-for-devs), use [http://localhost:3000/offscreen](http://localhost:3000/offscreen). To use prod, set to [https://embed.lantern.io/offscreen](https://embed.lantern.io/offscreen).
 
 3. To start in developer mode with hot-refresh server:
 ```
-yarn dev chrome
-yarn dev firefox 
-yarn dev edge
+yarn dev:ext chrome
+yarn dev:ext firefox 
 ```
 
 This will compile the extension and output to the `ui/extension/dist` dir. You can then load the unpacked extension in your browser of choice. 
@@ -198,9 +197,8 @@ This will compile the extension and output to the `ui/extension/dist` dir. You c
 
 4. To build for production:
 ```
-yarn build chrome
-yarn build firefox 
-yarn build edge
+yarn build:ext chrome
+yarn build:ext firefox 
 ```
 
 This will compile the extension and output a compressed build to the `ui/extension/packages` dir. 

ui/.env.example

@@ -20,4 +20,4 @@ REACT_APP_GEO_LOOKUP_URL=https://geo.getiantem.org/lookup
 # use https://embed.lantern.io/storage.html for github pages production builds
 # use /storage.html for local for devel
 # use /storage.html for local production builds
-REACT_APP_STORAGE_URL=https://embed.lantern.io/storage.html
+REACT_APP_STORAGE_URL=https://embed.lantern.io/storage.html

ui/extension/.env.example

@@ -1,4 +1,9 @@
-# POPUP_URL=https://embed.lantern.io/popup
-POPUP_URL=http://localhost:3000/popup
-# OFFSCREEN_URL=https://embed.lantern.io/offscreen
-OFFSCREEN_URL=http://localhost:3000/offscreen
+# set `EXTENSION_POPUP_URL` to your intended hosted popup page
+# if you are serving it from `ui` use http://localhost:3000/popup
+# to use prod, set to https://embed.lantern.io/popup
+EXTENSION_POPUP_URL=https://embed.lantern.io/popup
+
+# set `EXTENSION_OFFSCREEN_URL` to your intended hosted offscreen page
+# if you are serving it from `ui` use http://localhost:3000/offscreen
+# to use prod, set to https://embed.lantern.io/offscreen
+EXTENSION_OFFSCREEN_URL=https://embed.lantern.io/offscreen

ui/extension/app/scripts/offscreen.ts

@@ -1,17 +1,17 @@
-import {POPUP, SIGNATURE} from '../../../src/constants'
-// @todo fixup webpack config to use es6 imports
-const messageCheck = (message: MessageEvent['data']) => (typeof message === 'object' && message !== null && message.hasOwnProperty(SIGNATURE))
-const app = () => {
+import {POPUP} from '../../../src/constants'
+import {messageCheck} from '../../../src/utils/messages'
+
+const offscreenApp = () => {
 	const state = {
 		popupOpen: false // maintain state of popup open/close to prevent sending messages to closed popup
 	}
 	const iframe = document.createElement('iframe')
-	iframe.src = process.env.OFFSCREEN_URL
+	iframe.src = process.env.EXTENSION_OFFSCREEN_URL!
 	document.body.appendChild(iframe)
 	bindOffscreen(iframe, state)
 }
 
-const bindOffscreen = (iframe, state) => {
+const bindOffscreen = (iframe: HTMLIFrameElement, state: {popupOpen: boolean }) => {
 	// subscribe to close events from popup to update state
 	chrome.runtime.onConnect.addListener((port) => {
 		if (port.name === POPUP) port.onDisconnect.addListener(() => {
@@ -21,12 +21,12 @@ const bindOffscreen = (iframe, state) => {
 	})
 
 	// subscribe to messages from popup to forward to offscreen iframe
-	chrome.runtime.onMessage.addListener((message) => {
+	chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 		if (messageCheck(message)) {
 			// if message is that popupOpened, update state
 			if (message.type === 'popupOpened') return state.popupOpen = true
 			// console.log('message from chrome, forwarding to iframe: ', message)
-			iframe.contentWindow.postMessage(message, '*')
+			iframe.contentWindow!.postMessage(message, '*')
 			return false
 		}
 	})
@@ -41,4 +41,4 @@ const bindOffscreen = (iframe, state) => {
 	})
 }
 
-window.addEventListener('load', app)
+window.addEventListener('load', offscreenApp)

ui/extension/app/scripts/popup.ts

@@ -1,7 +1,7 @@
 import {MessageTypes, SIGNATURE, Themes, POPUP} from '../../../src/constants'
-// @todo fixup webpack config to use es6 imports
-const _messageCheck = (message: MessageEvent['data']) => (typeof message === 'object' && message !== null && message.hasOwnProperty(SIGNATURE))
-const app = () => {
+import {messageCheck} from '../../../src/utils/messages'
+
+const popupApp = async () => {
 	const theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? Themes.DARK : Themes.LIGHT
 	const backgroundColor = theme === Themes.DARK ? '#1B1C1D' : '#F8FAFB'
 	// set body styles based on user theme
@@ -10,25 +10,25 @@ const app = () => {
 		`background-color: ${backgroundColor}; margin: 0; padding: 0; width: 320px; height: 584px; overflow: hidden;` // hide scrollbar on popup, inherit iframe scroll only
 	)
 	const iframe = document.createElement('iframe')
-	iframe.src = process.env.POPUP_URL
+	iframe.src = process.env.EXTENSION_POPUP_URL!
 	// set iframe styles based on user theme
 	iframe.setAttribute(
 		'style',
 		`background-color: ${backgroundColor}; width: 320px; height: 584px; border: none; margin: 0; padding: 0;`
 	)
 	document.body.appendChild(iframe)
-	bindPopup(iframe)
+	await bindPopup(iframe)
 }
 
-const bindPopup = (iframe) => {
+const bindPopup = async (iframe: HTMLIFrameElement) => {
 	// connect to port so that offscreen can subscribe to close events
 	chrome.runtime.connect({'name': POPUP})
 
 	// subscribe to messages from offscreen to forward to popup iframe
 	chrome.runtime.onMessage.addListener((message) => {
-		if (_messageCheck(message)) {
+		if (messageCheck(message)) {
 			// console.log('message from chrome, forwarding to iframe: ', message)
-			iframe.contentWindow.postMessage(message, '*')
+			iframe.contentWindow!.postMessage(message, '*')
 			iconToggleSubscribe(message) // @todo maybe move to service worker
 			return false
 		}
@@ -44,15 +44,15 @@ const bindPopup = (iframe) => {
 	// subscribe to messages from popup iframe to forward to offscreen
 	window.addEventListener('message', event => {
 		const message = event.data
-		if (_messageCheck(message)) {
+		if (messageCheck(message)) {
 			// console.log('message from iframe, forwarding to chrome: ', message)
 			chrome.runtime.sendMessage(message)
 		}
 	})
 }
 
 // toggle icon based on sharing status messages from offscreen
-const iconToggleSubscribe = (message) => {
+const iconToggleSubscribe = (message: MessageEvent) => {
 	if (message.type === MessageTypes.STATE_UPDATE && message.data.emitter === 'sharingEmitter') {
 		const state = message.data.value ? 'on' : 'off'
 		// @ts-ignore
@@ -68,4 +68,4 @@ const iconToggleSubscribe = (message) => {
 	}
 }
 
-window.addEventListener('load', app)
+window.addEventListener('load', popupApp)

ui/extension/app/scripts/serviceWorker.ts

@@ -1,4 +1,4 @@
-try {
+const launchOffscreen = () => {
   chrome.offscreen.createDocument({
       url: chrome.runtime.getURL('pages/offscreen.html'),
       // @ts-ignore
@@ -7,6 +7,7 @@ try {
     },
     () => null
   )
-} catch (e) {
-  console.error(e)
-}
+}
+
+chrome.runtime.onInstalled.addListener(launchOffscreen)
+chrome.runtime.onStartup.addListener(launchOffscreen)

ui/extension/package.json

@@ -6,14 +6,5 @@
   "scripts": {
     "dev": "webextension-toolbox dev",
     "build": "webextension-toolbox build"
-  },
-  "dependencies": {
-    "@types/chrome": "^0.0.216",
-    "@webextension-toolbox/webextension-toolbox": "^5.2.2",
-    "dotenv": "^16.0.3",
-    "ts-loader": "^9.4.2",
-    "typescript": "^4.9.5",
-    "webpack": "^5.75.0",
-    "webpack-watched-glob-entries-plugin": "^2.2.6"
   }
-}
+}

ui/extension/tsconfig.json

@@ -10,25 +10,25 @@ module.exports = {
         const entries = [
             resolve(src, "*.{js,mjs,jsx,ts,tsx}"),
             resolve(src, "?(scripts)/*.{js,mjs,jsx,ts,tsx}"),
-        ];
+        ]
         return ({
             ...config,
             entry: GlobEntriesPlugin.getEntries(entries),
             resolve: {
                 ...config.resolve,
-                extensions: [...config.resolve.extensions, ".ts", ".tsx"],
+                extensions: [...config.resolve.extensions, ".ts"],
             },
             module: {
                 ...config.module,
-                rules: [...config.module.rules, {test: /\.tsx?$/, loader: "ts-loader"}]
+                rules: [...config.module.rules, {test: /\.ts?$/, loader: "ts-loader"}]
             },
             plugins: [
                 ...config.plugins,
                 new webpack.DefinePlugin({
                     'process.env': JSON.stringify(dotenv.parsed),
                     'process.env.NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production'),
                 }),
-            ].filter(Boolean)
+            ]
         })
     },
 }