В этом руководстве предполагается, что вы имеете базовое представление о расширениях Chrome и связанных с ними файлах конфигурации. Если нет, то вы можете обратиться к этой статье, в которой настраиваются файлы для этого руководства.
Настройка разрешений на запись с микрофона в расширении Chrome - это серая область. Официально документированного способа сделать это не существует, и разработчики вынуждены использовать «взлом», чтобы получить разрешения микрофона для своего расширения Chrome.
В этой короткой статье мы используем страницу options.html для получения разрешений микрофона и используем популярную annyang.js библиотеку для обнаружения речи пользователя.
1. Создание сценария и страницы триггера разрешений.
Чтобы обойти ограничения Chrome, мы используем веб-страницу из нашего расширения, например options.html иpopup.html, чтобы получить разрешения микрофона для всего расширения.
Во-первых, нам нужно создать файл JavaScript, чтобы получить разрешения микрофона на веб-странице. Я создал минимальный файл, который запрашивает разрешение на использование микрофона из Chrome.
Если вы не являетесь поклонником использования JQuery, вы можете встроить этот код JS в конец файла HTML-страницы, который вы собираетесь использовать в качестве триггера разрешения.
Для нашего расширения TalkToMe мы использовали options.html в качестве страницы запуска разрешений.
2. Автоматическое открытие страницы триггера.
Всплывающее окно разрешения микрофона будет открыто только в том случае, если страница триггера была открыта в текущем сеансе браузера. Когда пользователь каждый раз открывает его вручную, это плохой UX. Мы создали фоновый скрипт, чтобы обойти это.
Он пытается получить доступ к микрофону каждые 100 мс и открывает страницу срабатывания разрешения, если запрос отклонен Chrome.
Чтобы скрипт заработал, вам нужно добавить его в свой manifest.json вместе с другими фоновыми скриптами.
3. Подключение Annyang к распознаванию речи.
Annyang предоставляет универсальную библиотеку для распознавания речи, и ее можно использовать совершенно бесплатно.
Он работает по структуре, основанной на командах, в том смысле, что он вызывает функции на основе речи пользователя. Эта функция идеально подходит для TalkToMe.
Вы можете добавить код annyang.js в фоновый скрипт и начать его использовать. Здесь я показываю вам пример Hello World из документации.
И да-да, вот так же вы повторили наши часы поиска в StackOverflow для добавления разрешений микрофона к вашему расширению Chrome.
Если бы это руководство помогло вам, мы бы действительно ❤️ могли бы высказать свое мнение о нашем расширении TalkToMe, даже если вы не являетесь пользователем с ослабленным зрением.
