[Tutorial] Local Development

Prerequisites

1. Clone the repo here: https://github.com/GoogleChromeLabs/cros-sample-telemetry-extension
2. Have a Chrome Browser

Build and Install the Extension

1. Enter the diagnostics-extension subdirectory:

cd diagnostics-extension

2. Replace public/manifest.json with the below file content:

$ vim public/manifest.json

{
  "name": "Chrome OS Diagnostics Companion Extension",
  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAuyCxGIU0wFFseHCQGv1Me0X0QEz7xbMASwdwBis6eVIy85GufS6n0WdQKLjVIMKK/qupvokhUuaSU5+bN0wbkEriA8wo+APFm0Be4BH/4Xn3bFomLyZNSQsVo9d1uHkWLLlbd6XZLhoXyK4WeZdxQfr3r//gLtkGgUN1EP+Vpjny6tFJeqMtu8Jy+jQowogkTn2uiKrITFh1l44WoFCU32Brf2iUTifOnOmyvgzkgswm7Bg5XSs+sQuOH/00qT17mGGqitNMsUrAH/9Oc+qUzqAr3JNwyJ0y+Klq+1avpvQV+VP5sapGYjQJSeOszPm/Dpjv9AQu2x6anTdA0QRWWwIDAQAB",
  "version": "1.9.0",
  "description": "The companion extension for the ChromeOS Diagnostics App.",
  "manifest_version": 3,
  "icons": {},
  "permissions": [],
  "background": {
    "service_worker": "sw.js"
  },
  "externally_connectable": {
    "matches": [
      "*://localhost/*",
      "isolated-app://pt2jysa7yu326m2cbu5mce4rrajvguagronrsqwn5dhbaris6eaaaaic/*"
    ]
  }
}```

3. Build the extension files:
```bash
$ npm ci
$ npm run build

4. Install the unpacked extension

   a. Open chrome://extensions page

   b. Open developer mode on top right

   c. Click “Load Unpacked”

   d. Select build folder

You should now see an extension named Chrome OS Diagnostics Companion Extension in your chrome://extensions page with extension ID of gogonhoemckpdpadfnjnpgbjpbjnodgc

Build, Install and Serve the app

1. Build app by running the following commands:

$ cd diagnostics-app
$ npm ci
$ npm run start