From 460963bc9695a02f321a9d55e92b424306f97205 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 29 Oct 2024 10:04:45 -0700 Subject: [PATCH 1/4] add package manager and engine --- package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package.json b/package.json index 2178cf92..d81f1d24 100644 --- a/package.json +++ b/package.json @@ -144,5 +144,9 @@ "buildResources": "build", "output": "dist/bin/" } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e", + "engines": { + "node": ">=12" } } From 82725823cbc75988ed969c3ab90d852ed87bb3c1 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 29 Oct 2024 10:57:03 -0700 Subject: [PATCH 2/4] update readme --- README.md | 77 ++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 53 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index ca50d6db..020aa8c8 100644 --- a/README.md +++ b/README.md @@ -18,56 +18,85 @@ Downloads for the desktop are are available on the [GitHub Releases page](https: The extension makes use of the Chrome debugging protocol to capture and save network traffic, and extends the [ReplayWeb.page](https://github.com/webrecorder/replayweb.page) UI and the [wabac.js](https://github.com/webrecorder/wabac.js) service worker system for replay and storage. -The codebase for the extension and Electron app is shared, but they can both be deployed in different ways. +## Development -## Building for Development +The Chromium extension and Electron app is built from the same source code for ease of development. -To develop ArchiveWeb.page, install Node 12+ and Yarn. +### Prerequisites -### Install the Development Extension +- Node >=12 +- Yarn Classic (v1) -For development, the extension can be built locally and loaded as an unpacked extension. If you want to make changes to the extension, do the following: +### Installation -1. Clone this repo. Run `yarn install; yarn build-dev`. (You can also run `yarn build` to build the production version but it may be harder to debug). +To build the extension or Electron app locally for development, do the following: -2. Open the Chrome Extensions page ([chrome://extensions](chrome://extensions)). +1. Clone this repo: + ```sh + git clone https://github.com/webrecorder/archiveweb.page.git + ``` +2. Change the working directory: + ```sh + cd archiveweb.page + ``` +3. Install dependencies: + ```sh + yarn install + ``` +4. Make development build: + ```sh + yarn build-dev + ``` -3. Choose 'Load Unpacked Extension' and point to the `./dist/ext` directory in your local copy of this repo. +The development build can now be used to develop the extension or Electron app. -4. Click the extension icon to show the extension popup, start archiving, etc... +### Developing the Chromium extension -### Development Workflow (Extension) +To install the extension locally, load the development build as an unpacked extension: -For development, it is recommended to use the dev build of the extension: +1. Open the Chrome Extensions page ([chrome://extensions](chrome://extensions)). -1. Run `yarn install` and then `yarn run build-dev` +2. Choose 'Load Unpacked Extension' and point to the `./dist/ext` directory in your local copy of this repo. -2. Run `yarn run start-ext` -- this will ensure the `dist/ext` directory is rebuilt after any changes to the source. +3. Click the extension icon to show the extension popup, start archiving, etc... -3. After making changes, the extension still needs to be reloaded in the browser. From the Chrome extensions page, click the reload button to load the latest version. +#### Update extension on code changes -4. Click the extension icon to show the extension popup, start recording, etc... The dev build of the extension will be grey to differntiate from the production version. +To watch source code files and recompile the development build on change, run: -### Using the Electron App +```sh +yarn run start-ext +``` -To run the Electron app development build: +Now, saving changes to source will automatically rebuild the `dist/ext` directory. -1. Clone this repo. +After making changes, the extension still needs to be reloaded in the browser. -2. Run `yarn install` and then `yarn run build-dev` +1. From the Chrome extensions page, click the reload button to load the latest version. -3. Run `yarn run start-electron` to start the app. +2. Click the extension icon to show the extension popup, start recording, etc... The dev build of the extension will be grey to differntiate from the production version. -The Electron App version will open recording in a new window. It is is designed to support Flash, better support for IPFS sharing. +### Developing the Electron app -### Development workflow (Electron App) +To start the Electron app using development build: +```sh +yarn run start-electron +``` -After making changes, rerun `yarn run build-dev` and `yarn run start-electron` to load the app. +The Electron app will open recording in a new window. It is is designed to support Flash, better support for IPFS sharing. + +#### Update app on change + +Currently, the dev workflow for the Electron app does not support automatically rebuilding on file changes. + +After making changes, rerun `yarn run build-dev` and `yarn run start-electron` to view your changes in the app. ## Standalone Build To create a platform-specific binary, run: -`yarn run pack` +```sh +yarn run pack +``` The standalone app will then be available in the `./dist/` directory. From 523e711bc8aceb0f4fdeea0e26f9814d5a4a0e60 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 29 Oct 2024 16:17:42 -0700 Subject: [PATCH 3/4] Update README.md Co-authored-by: Henry Wilkinson --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 020aa8c8..283b4505 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ The extension makes use of the Chrome debugging protocol to capture and save net ## Development -The Chromium extension and Electron app is built from the same source code for ease of development. +The Chromium extension and Electron app are built from the same source code for ease of development. ### Prerequisites From 62e84d0748446ff7e131e2fff0dbd715fcc81338 Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Tue, 29 Oct 2024 22:00:20 -0700 Subject: [PATCH 4/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 283b4505..b1fa26a0 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ After making changes, the extension still needs to be reloaded in the browser. 1. From the Chrome extensions page, click the reload button to load the latest version. -2. Click the extension icon to show the extension popup, start recording, etc... The dev build of the extension will be grey to differntiate from the production version. +2. Click the extension icon to show the extension popup, start recording, etc... The dev build of the extension will be a different color from the production version. ### Developing the Electron app