[Tutorial] Post‐Login

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

Set up Environment

1. In your DUT, Append these line to the file /etc/chrome_dev.conf:

$ 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

2. run restart ui for the change to take effect

$ restart ui

3. Log in to your account

Create CA Certificate to enable HTTPS

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

$ mkdir /home/chronos/user/Downloads/MyFiles/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 CA.key, CA.pem, CA.srl, localhost.crt, localhost.csr, localhost.decrypted.key, localhost.ext and localhost.key in /home/chronos/user/Downloads/MyFiles/ca after running the above commands.

2. Install CA Certificate in Chrome OS

   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:

cd diagnostics-extension

2. Modify permission and externally_connectable attribute of public/manifest.json to match the PWA URL. Alternatively, you can copy paste the below file content:

$ 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.telemetry",
    "os.attached_device_info",
    "os.diagnostics",
    "os.events",
    "os.telemetry.serial_number",
    "os.telemetry.network_info"
  ],
  "background": {
    "service_worker": "sw.js"
  },
  "externally_connectable": {
    "matches": [
      "*://localhost/*"
    ]
  }
}

3. Build the extension files:

$ npm ci
$ npm run build

4. Deploy the extension build files to DUT

$ scp -r diagnostics-extension/build $DUT:/home/chronos/user/Downloads
# Make sure the file is visible
$ ssh $DUT chmod -R 777 /home/chronos/user/Downloads

5. Install the unpacked extension

   a. Open chrome://extensions page

   b. Open developer mode on top right

   c. Click “Load Unpacked”

   d. Select build folder from Downloads

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 build_pwa

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

2. Deploy the app files to DUT

$ scp -r diagnostics-app/dist/diagnostics-app  $DUT:/home/chronos/user/Downloads
# Make sure the file is visible
$ ssh $DUT chmod -R 777 /home/chronos/user/Downloads

3. Create the python script for serving HTTPS

$ cd /home/chronos/user/Downloads
$ cat > server.py << EOF
import http.server
import ssl
import os

# Configuration (Update if needed)
HOST_NAME = 'localhost'
PORT_NUMBER = 4443
WEB_DIRECTORY = '/home/chronos/user/Downloads/diagnostics-app'
CA_DIRECTORY = '/home/chronos/user/Downloads/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

4. Start running the server

$ python server.py