[Tutorial] Post‐Login - GoogleChromeLabs/cros-sample-telemetry-extension GitHub Wiki

Prerequisites

  1. Clone the repo here: https://github.com/GoogleChromeLabs/cros-sample-telemetry-extension
  2. Put the device must be in developer mode, follow instructions here
  3. The device must be logged in to any account
  4. The device root file system must have write permission enabled (Run /usr/share/vboot/bin/make_dev_ssd.sh --remove_rootfs_verification on your DUT)

Notation: (shell) - run in the shell of your linux machine (DUT) - run in the Chromebook DUT

Set up Environment on DUT

  1. Append these line to the file /etc/chrome_dev.conf on your DUT:
(DUT) 
$ vim /etc/chrome_dev.conf

...
################################################################################
# This file should only be modified by hand by developers on their local
# dev-mode devices; do not check in changes to it or write code that modifies
# it. Permanent changes to Chrome's configuration, including conditionally-set
# flags, should be made in session_manager (see chrome_setup.h).
#
# To edit this file rootfs write protection must be removed:
# https://chromium.googlesource.com/chromiumos/docs/+/HEAD/developer_mode.md#disable-verity
################################################################################
--telemetry-extension-pwa-origin-override-for-testing=*://localhost/*
--telemetry-extension-skip-manufacturer-check-for-testing
  1. run restart ui for the change to take effect
(DUT) 
$ restart ui
  1. Log in to your account

Create CA Certificate to enable HTTPS on DUT

Note: The below tutorial is copied from here

  1. Create a certificate by running the following commands in the DUT terminal

    a. You need to set an arbitrary passphrase, e.g. password, for PEM pass phrase when running openssl genrsa

    b. You can use default values for all fields when running openssl req and openssl x509

(DUT) 
$ mkdir /home/chronos/user/MyFiles/Downloads/ca && cd $_
$ openssl genrsa -out CA.key -des3 2048
$ openssl req -x509 -sha256 -new -nodes -days 3650 -key CA.key -out CA.pem
$ cat > localhost.ext << EOF
authorityKeyIdentifier = keyid,issuer
basicConstraints = CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost
IP.1 = 127.0.0.1
EOF
$ openssl genrsa -out localhost.key -des3 2048
$ openssl req -new -key localhost.key -out localhost.csr
$ openssl x509 -req -in localhost.csr -CA CA.pem -CAkey CA.key -CAcreateserial -days 3650 -sha256 -extfile localhost.ext -out localhost.crt
$ openssl rsa -in localhost.key -out localhost.decrypted.key

You will get the following files under /home/chronos/user/MyFiles/Downloads/ca after running the above commands.

(DUT) 
$ ls /home/chronos/user/MyFiles/Downloads/ca

CA.key  CA.pem  CA.srl  localhost.crt  localhost.csr  localhost.decrypted.key  localhost.ext  localhost.key

  1. Install CA Certificate in ChromeOS

    a. Open chrome://settings on your DUT browser

    b. Navigate to Settings>Privacy and security>Security>Manage certificates

    c. Select Authorities, click Import, select the CA.pem file from Downloads/ca and toggle on all Trust settings in Certificate Authority

Build and Install the Extension

  1. Enter the diagnostics-extension subdirectory in cros-sample-telemetry-extension repo:
(shell)
$ cd diagnostics-extension
  1. Modify permission and externally_connectable attribute in public/manifest.json to match the PWA URL. Alternatively, you can copy paste the below file content:
(shell)
$ vim public/manifest.json

{
  "name": "Chrome OS Diagnostics Companion Extension for PWA",
  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAt2CwI94nqAQzLTBHSIwtkMlkoRyhu27rmkDsBneMprscOzl4524Y0bEA+0RSjNZB+kZgP6M8QAZQJHCpAzULXa49MooDDIdzzmqQswswguAALm2FS7XP2N0p2UYQneQce4Wehq/C5Yr65mxasAgjXgDWlYBwV3mgiISDPXI/5WG94TM2Z3PDQePJ91msDAjN08jdBme3hAN976yH3Q44M7cP1r+OWRkZGwMA6TSQjeESEuBbkimaLgPIyzlJp2k6jwuorG5ujmbAGFiTQoSDFBFCjwPEtywUMLKcZjH4fD76pcIQIdkuuzRQCVyuImsGzm1cmGosJ/Z4iyb80c1ytwIDAQAB",
  "version": "1.9.0",
  "description": "The companion extension for the ChromeOS Diagnostics App.",
  "manifest_version": 3,
  "chromeos_system_extension": {},
  "icons": {
    "16": "images/favicon-16x16.png",
    "32": "images/favicon-32x32.png",
    "48": "images/favicon-48x48.png",
    "128": "images/favicon-120x120.png",
    "192": "images/favicon-192x192.png"
  },
  "permissions": [
    "os.attached_device_info",
    "os.diagnostics",
    "os.diagnostics.network_info_mlab",
    "os.events",
    "os.telemetry",
    "os.telemetry.serial_number",
    "os.telemetry.network_info"
  ],
  "background": {
    "service_worker": "sw.js"
  },
  "externally_connectable": {
    "matches": [
      "*://localhost/*"
    ]
  }
}
  1. Build the extension files:
(shell)
$ npm ci
$ npm run build
  1. Deploy the extension build files to DUT
(shell)
$ export DUT="Your-DUT-hostname"
$ scp -r build $DUT:/home/chronos/user/MyFiles/Downloads
$ ssh $DUT chmod -R 777 /home/chronos/user/MyFiles/Downloads  # Make sure the file is visible

  1. 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 in cros-sample-telemetry-extension repo:
(shell)
$ cd diagnostics-app
  1. Build app by running the following commands:
(shell)
$ npm ci
$ npm run build_pwa

You should see the folder dist/diagnostics-app, which contains all the resources to be served in your web app

(shell)
$ ls dist
diagnostics-app  iwa  out-tsc
  1. Deploy the app files to DUT
(shell)
$ export DUT="Your-DUT-hostname"
$ scp -r dist/diagnostics-app $DUT:/home/chronos/user/MyFiles/Downloads
$ ssh $DUT chmod -R 777 /home/chronos/user/MyFiles/Downloads  # Make sure the file is visible
  1. Create the python script for serving HTTPS
(DUT)
$ cd /home/chronos/user/MyFiles/Downloads
$ cat > server.py << EOF
import http.server
import ssl
import os

# Configuration (Update if needed)
HOST_NAME = 'localhost'
PORT_NUMBER = 4443
DOWNLOADS_DIRECTORY = '/home/chronos/user/MyFiles/Downloads'
WEB_DIRECTORY = DOWNLOADS_DIRECTORY + '/diagnostics-app'
CA_DIRECTORY = DOWNLOADS_DIRECTORY + '/ca'

# Change to the directory containing your certificates
os.chdir(CA_DIRECTORY)

# HTTPS context - Updated file names
ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
ssl_context.load_cert_chain('localhost.crt', 'localhost.decrypted.key')

# Change to the directory containing your built files
os.chdir(WEB_DIRECTORY)

# HTTP server setup
httpd = http.server.HTTPServer((HOST_NAME, PORT_NUMBER), http.server.SimpleHTTPRequestHandler)
httpd.socket = ssl_context.wrap_socket(httpd.socket, server_side=True)

print(f"Serving HTTPS on https://{HOST_NAME}:{PORT_NUMBER}")
httpd.serve_forever()
EOF
  1. Start running the server on DUT
(DUT)
$ python server.py
  1. Open localhost:4443 on your browser and check the app

Develop the app from local shell

Here we outline an approach to make it simpler and faster to develop your app. We take advantage of the built-in hot reload development server for Angular and use SSH reverse-proxy to access the frontend from the DUT.

  1. Use SCP to retrieve the SSL certificates created above
(shell) 
# scp -r $DUT_IP:/home/chronos/user/MyFiles/Downloads/ca /tmp/ca
  1. Run ng serve with the correct SSL certificates
(shell) 
# cd diagnostics-app
# ng serve --ssl true --ssl-key /tmp/ca/localhost.decrypted.key --ssl-cert /tmp/ca/localhost.crt
  1. Use SSH reverse-tunneling to forward SSH server
(shell) # ssh -R 4443:localhost:4200 DUT_IP
  1. Open localhost:4443 on your DUT browser and check the app works correctly