[Tutorial] Local Development - GoogleChromeLabs/cros-sample-telemetry-extension GitHub Wiki
Prerequisites
- Clone the repo here: https://github.com/GoogleChromeLabs/cros-sample-telemetry-extension
- Have a Chrome Browser
Build and Install the Extension
- Enter the
diagnostics-extension
subdirectory:
$ cd diagnostics-extension
- Replace
public/manifest.dev.json
with the below file content:
$ vim public/manifest.dev.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": {
"service_worker": "sw.js"
},
"externally_connectable": {
"matches": [
"*://localhost/*",
"isolated-app://pt2jysa7yu326m2cbu5mce4rrajvguagronrsqwn5dhbaris6eaaaaic/*"
]
}
}
- Build the extension files with the dev config:
$ npm ci
$ npm run dev
-
Install the unpacked extension
a. Open
chrome://extensions
pageb. Toggle on developer mode on top right
c. Click
Load Unpacked
d. Select
build
folder fromDownloads
and clickOpen
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
- Enter the
diagnostics-app
subdirectory:
$ cd diagnostics-app
- Update the environment to using the development extension ID (
gogonhoemckpdpadfnjnpgbjpbjnodgc
):
$ vim src/environments/environment.ts
export const environment = {
production: false,
extensionId: 'gogonhoemckpdpadfnjnpgbjpbjnodgc',
serviceWorker: false,
};
- Build app by running the following commands:
$ npm ci
- Serve the app locally with fake data:
$ npm run start