[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": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAt2CwI94nqAQzLTBHSIwtkMlkoRyhu27rmkDsBneMprscOzl4524Y0bEA+0RSjNZB+kZgP6M8QAZQJHCpAzULXa49MooDDIdzzmqQswswguAALm2FS7XP2N0p2UYQneQce4Wehq/C5Yr65mxasAgjXgDWlYBwV3mgiISDPXI/5WG94TM2Z3PDQePJ91msDAjN08jdBme3hAN976yH3Q44M7cP1r+OWRkZGwMA6TSQjeESEuBbkimaLgPIyzlJp2k6jwuorG5ujmbAGFiTQoSDFBFCjwPEtywUMLKcZjH4fD76pcIQIdkuuzRQCVyuImsGzm1cmGosJ/Z4iyb80c1ytwIDAQAB",
  "version": "1.9.0",
  "description": "The companion extension for the ChromeOS Diagnostics App.",
  "manifest_version": 3,
  "icons": {},
  "permissions": [],
  "background": {},
  "externally_connectable": {
    "matches": [
      "*://localhost/*",
      "isolated-app://pt2jysa7yu326m2cbu5mce4rrajvguagronrsqwn5dhbaris6eaaaaic/*"
    ]
  }
}

3. Build the extension files:

$ npm ci
$ npm run build

4. Install the unpacked extension

   a. Open chrome://extensions page

   b. Toggle on developer mode on top right

   c. Click Load Unpacked

   d. Select build folder from Downloads and click Open

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. Enter the diagnostics-app subdirectory:

$ cd diagnostics-app

2. Update the environment to using the development extension ID (gogonhoemckpdpadfnjnpgbjpbjnodgc):

$ vim src/environments/environment.ts

export const environment = {
  production: false,
  extensionId: 'gogonhoemckpdpadfnjnpgbjpbjnodgc',
  serviceWorker: false,
};

3. Build app by running the following commands:

$ npm ci

4. Serve the app locally with fake data:

$ npm run start