Давайте создадим расширение Chrome для Openpilot

Покупайте автомобили, зная, какие из них поддерживаются Openpilot.

Я большой поклонник того, что Comma.ai делает в сфере самоуправления. Установить в автомобиле устройство с открытым исходным кодом для помощи при вождении под названием Openpilot - мечта такого мастера, как я.

Просматривая автомобили на autotrader.ca, я подумал, что было бы неплохо, если бы эти веб-сайты могли показать, поддерживает ли Openpilot автомобиль. Так почему бы не создать для него хромированное расширение. Это был бы веселый проект на выходных.

Стек технологий

Это расширение Chrome написано на TypeScript. Он использует Webpack, React и Jest.

Поток пользователей

После установки расширения Chrome пользователи должны иметь возможность:

• Просмотрите веб-сайт автомобильной торговой площадки, например autotrader.ca, например https://www.autotrader.ca/new/hatchback,suv/?srt=1&make=Honda,Hyundai,Toyota.
• Находясь на странице обзора, нажмите кнопку «Показать совместимые автомобили» во всплывающем окне расширения Chrome.
• Покажите значок во всплывающем окне, в котором отображаются сведения о совместимости автомобиля.

Последовательность и структура высокого уровня

Схема последовательности высокого уровня того, как это будет работать.

Я использую стандартную структуру расширения Chrome для исходного кода. Я использовал шаблон GitHub chrome-extension-typescript-starter.

• Я подробно расскажу о цветных коробках.
• Остальные поля говорят сами за себя, и некоторые из них являются вашими стандартными компонентами в любом плагине Chrome. «Компоненты» здесь могут относиться к файлу, модулю или классу исходного кода.

Compati_cars— источник данных

src/compatible_cars

Данные о поддерживаемых автомобилях взяты из Openpilot’s README.

Comma.ai имеет API, который возвращает данные о совместимости поддерживаемых автомобилей. Однако он не так актуален, как README от Openpilot.

Я использовал tableconvert.com, чтобы преобразовать эту таблицу уценки из README Openpilot в JSON. Затем я использую вывод JSON с tableconvert.com в следующих файлах:

• src/compatible_cars/community.ts
• src/compatible_cars/supported.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 }
});

Этот ручной шаг не гламурен. Однако я мог бы легко назначить запятую ответ API константе compatibleCars, если когда-нибудь решу использовать ее в будущем.

веб-сайты - поддерживаемые веб-сайты

src/websites/

Расширение поддерживаетautotrader.ca и curbie.ca. Файлы websites обрабатывают эти поддерживаемые веб-сайты.

• src/websites/autotrader_ca.ts
• src/websites/curbie_ca.ts

AutotraderCa и CurbieCa реализуют Website интерфейс.

Поддержка нового веб-сайта

Если вы хотите поддержать новый веб-сайт, например carmarketplace.com. Вам нужно будет добавить новый класс CarmarketPlaceCom, реализующий интерфейс Website. Вы можете обратиться к существующим реализациям интерфейса веб-сайта для получения подробной информации.

export interface Website {
    getModelInfo(modelInfoElt: any): string;
    getElementsToUpdate(): Array<any>;
    updatePage(commaBtn: any): void;
    getMakeModelElement(supportedModelElt: any): any;
    getTargetNode(): Element | Document;
    mutations(mutations: []): boolean;
}

неожиданно возникнуть

src/popup.tsx

Этот файл обрабатывает всплывающее окно, которое появляется, когда вы щелкаете значок Openpilot на панели инструментов Chrome. Он отправляет событие в content_script, когда пользователь нажимает основную кнопку.

content_script

src/content_script.tsx

content_script выполняет большую часть оркестровки. Он начинается с анализа информации об автомобиле с веб-сайта. Получив информацию, он попытается найти совместимые автомобили. И, наконец, добавьте значок и всплывающий элемент на веб-сайт авторынка.

ModelParser

src/model_parser.ts

Класс ModalParser содержит методы, которые анализируют модель и год автомобилей.

car_support

src/car_support.ts

Содержит общие функции для определения поддерживаемых автомобилей.

Местное развитие

npm run смотреть

Вы можете запустить часы в фоновом режиме во время работы с репозиторием.

npm run watch

Тестирование изменений локального расширения Chrome

Приведенная выше команда автоматически скомпилирует файлы расширений в папке dist. Вы можете использовать эту dist папку для тестирования расширения в своем браузере.

Чтобы протестировать расширение в вашем браузере:

1. Открыть chrome://extensions/
2. Включите переключатель «Режим разработчика».
3. Нажмите «Загрузить распакованный» и выберите папкуdist/.
4. Для последующих обновлений, когда ваш источник расширения Chrome указывает на вашу папку dist, вы можете нажать кнопку «Обновить».

Чтобы запустить модульные тесты:

npm run test

Вы можете проверить код в GitHub и установить расширение из Интернет-магазина Chrome.

Источник GitHub:

Установить из Интернет-магазина Chrome:

Больше контента на plainenglish.io