Let’s Build a Chrome Extension for Openpilot

Shop for cars knowing which ones are supported by Openpilot.

I am a big fan of what Comma.ai is doing in the self-driving space. Installing a device in your car that runs an open-source driving assistance software called Openpilot is a dream for a tinkerer like me.

While browsing for cars on autotrader.ca, I thought it would be nice if these websites could show whether Openpilot supports a vehicle. So why not build a chrome extension for it. It would be a fun weekend project.

Screenshot by the author.

Screenshot by the author.

Tech stack

This Chrome extension is written in TypeScript. It uses Webpack, React, and Jest.

User flow

After installing the chrome extension, users should be able to:

• Browse a car marketplace website like autotrader.ca, e.g.,https://www.autotrader.ca/new/hatchback,suv/?srt=1&make=Honda,Hyundai,Toyota
• While on the browse page, click the “Show compatible cars” button on the chrome extension popup.
• Show a badge with a popover that displays the car’s compatibility details.

High-level sequence and structure

High-level sequence diagram of how it will work.

Sequence diagram by the author.

I’m using a standard chrome extension structure for thesource code. I used the GitHub templatechrome-extension-typescript-starter.

High-level diagram by the author.

• I will go through the details of the colored boxes.
• The other boxes are self-explanatory, and some of them are your standard components in any chrome plugin. “Components” here can refer to a source code’s file, module, or class.

compatible_cars— data source

src/compatible_cars

Supported cars data is fromOpenpilot’s README.

Comma.ai has anAPIthat returns supported vehicle compatibility data. However, it’s not as up-to-date as Openpilot’s README.

Markdown table screenshot from the openpilot README.

I usedtableconvert.comto convert this markdown table from Openpilot’s README into JSON. Then I use the JSON output from tableconvert.com in the following files:

• src/compatible_cars/community.ts
• src/compatible_cars/supported.ts

import { Compatibility } from '../interface';

const cars = [ 
  { 
    "Make": "Acura", 
    "Model (US Market Reference)": "ILX 2016-19", 
    "Supported Package": "AcuraWatch Plus", 
    "ACC": "openpilot", 
    "No ACC accel below": "25mph<sup>1</sup>", 
    "No ALC below": "25mph" 
  }, 
  { 
    "Make": "Acura", 
    "Model (US Market Reference)": "RDX 2016-18", 
    "Supported Package": "AcuraWatch Plus", 
    "ACC": "openpilot", 
    "No ACC accel below": "25mph<sup>1</sup>", 
    "No ALC below": "12mph" 
  },
  //.......... 
];

export const supportedCars = cars.map(car => { 
  return { 
    ...car, 
    Compatibility: Compatibility.Supported 
  }
});

Data import diagram by the author.

This manual step is not glamorous. However, I could readily assign comma’s API response to thecompatibleCarsconstant if ever I decide to use it in the future.

websites— supported websites

src/websites/

The extension supportsautotrader.caand`