docs: add guidlines on how to update the extension (#1753)

* docs: add guidlines on how to update the extension Co-authored-by: Ben Freshwater <[email protected]> --------- Co-authored-by: Ben Freshwater <[email protected]>
Financial-Times · Jul 22, 2024 · 9004ec1 · 9004ec1
1 parent d4700fc
commit 9004ec1
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/tools/o3-chrome-extension/README.md b/tools/o3-chrome-extension/README.md
@@ -57,12 +57,21 @@ For quick intro to Chrome extension components, see [Chrome Extension Tutorials]
 
 1. Clone repo
 2. `npm install`
-3. run `npm run dev` to start the dev server that constantly watches for changes and build files in build folder. For one time build run `npm run build-once`. Both of these commands will build the extension in the dist folder.
+3. run `npm run dev` to start the dev server that constantly watches for changes and build files in build folder. For production build run `npm run build-prod`. Both of these commands will build the extension in the dist folder.
 4. (Optional) install [Extensions Reloader](https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid) for automatic reloading of Chrome extensions in dev mode
 5. Open Chrome and navigate to extensions (chrome://extensions/)
 6. Select 'Load unpacked extension...' and select the dist folder from o3-chrome-extension folder
 7. Any file changes made in src should update the extension. File changes in public folder will require a manual reload of the extension in Chrome.
 
+## Publishing extension
+
+You need to use origami shared email address to upload new extension. For more information about shared Email ask the Origami team.
+
+Follow the instructions above to build for production which should create a zip file (`o3-chrome-extension.zip`) that can then be uploaded by clicking Add new item. Complete the form and publish the extension with private permissions for FT users only. If needed, IT Service Desk can add the new extension to the FT catalog, using the extension ID. To find out more about updating the extension visit [update](https://developer.chrome.com/docs/webstore/update) section on chrome developer documentation.
+
+> [!NOTE]
+> Zip is generated in the dist folder after running `npm run build-prod` and uses mac native zip command. If you are using windows, you may need to install a zip command line tool.
+
 ## Troubleshooting
 
 If you are having trouble with changes not reflecting in the extension, try reloading the extension and then the page itself. More debugging tips can be found [at the official chrome developer](https://developer.chrome.com/docs/extensions/get-started/tutorial/debug)

diff --git a/tools/o3-chrome-extension/package.json b/tools/o3-chrome-extension/package.json
@@ -9,13 +9,14 @@
 	"private": true,
 	"scripts": {
 		"dev": "vite build --watch",
-		"build-once": "vite build"
+		"build-prod": "vite build && npm run zip",
+		"zip": "cd dist && zip -r o3-chrome-extension.zip ."
 	},
 	"devDependencies": {
-		"@types/chrome": "^0.0.268",
-		"vite": "^5.3.4",
-		"@financial-times/o3-foundation": "^1.2.0",
 		"@financial-times/o3-button": "^1.1.5",
-		"@financial-times/o3-typography": "^1.0.3"
+		"@financial-times/o3-foundation": "^1.2.0",
+		"@financial-times/o3-typography": "^1.0.3",
+		"@types/chrome": "^0.0.268",
+		"vite": "^5.3.4"
 	}
 }
diff --git a/tools/o3-chrome-extension/public/manifest.json b/tools/o3-chrome-extension/public/manifest.json
@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "Origami",
-	"description": "o3 component extension",
+	"description": "Origami o3 components helper extension",
 	"version": "1.0",
 	"action": {
 		"default_icon": "images/origami-logo.png",