Автор оригинала: FreeCodeCamp Community Member.
Палаш Таня
В этом руководстве предполагается, что у вас есть базовое понимание расширений Chrome и связанных файлов конфигурации. Если нет, то вы можете обратиться к Эта статья который устанавливает файлы для этого учебника.
Настройка разрешений для записи микрофона в расширении Chrome представляет собой серую область. Официально документированного способа сделать это, и разработчики вынуждены использовать «взломать», чтобы получить разрешения MIC для их хромированного расширения.
В этой короткой статье мы используем Опции .html страница для получения разрешений микрофона и использовать популярные annyang.js Библиотека для обнаружения речи от пользователя.
1. Создание скрипта и страницы разрешений
Чтобы обойти ограничения Chrome, мы используем веб-страницу от нашего расширения, как Опции .html и popup.html Чтобы получить разрешения MIC для всего расширения.
Во-первых, нам нужно создать файл JavaScript для получения разрешений MIC на веб-странице. Я создал минимальный файл, который запрашивает разрешение на использование микрофона из Chrome.
$(document).ready(function(){
navigator.mediaDevices.getUserMedia({audio: true})
});Если вы не поклонник использования jQuery, то вы можете встроить этот код JS в конце файла Page HTML, который вы намерены использовать в качестве триггера разрешений.
Для нашего расширения, Talktome, мы использовали Опции .html Как наша страница триггера разрешений.
2. Открытие страницы триггера автоматически
Всплывание разрешения MIC будет открыто только в том случае, если на текущем сеансе браузера открывается страница. Наличие пользователем вручную открыть его каждый раз, когда плохой UX. Мы создали фоновый скрипт, чтобы обойти это.
setTimeout(() => {
navigator.mediaDevices.getUserMedia({ audio: true })
.catch(function() {
chrome.tabs.create({
url: chrome.extension.getURL("options.html"),
selected: true
})
});
}, 100);Он пытается получить доступ к микрофону каждые 100 мс и открывает страницу с разрешениями, если запрос запрещен Chrome.
Для сценария для работы вам нужно добавить его на манифест .json с другими фоновыми сценариями.
...
"background": {
"scripts": [
..
"js/auto-trigger.js", // add the script here
..
],
"persistent": false
},
...3. Подключение Анняна для распознавания речи
Annyang предоставляет универсальную библиотеку для распознавания речи, и это на 100% бесплатно.
Он работает над командной структурой, в том, что она вызывает функции на основе речи пользователя. Эта функция сделала его идеальным подходящим для Talktome.
Вы можете добавить annyang.js код на фоновый скрипт и начните использовать его. Здесь я показываю вам привесок Hello World из документов.
if (annyang) {
// Let's define a command.
var commands = {
'hello': function() { alert('Hello world!'); }
};
// Add our commands to annyang
annyang.addCommands(commands);
// Start listening.
annyang.start();
}И TA-DA, так же, как вы реплицировали наши часы поиска Stackoverflow для добавления разрешений MIC в ваше расширение Chrome.
Если этот учебник помог вам, мы действительно ❤️, если бы вы могли отдать свои мысли о нашем расширении Talktome Даже если вы не можете быть визуально нарушенным пользователем.
Оригинал: “https://www.freecodecamp.org/news/handling-mic-input-permissions-and-speech-recognition-in-chrome-extensions-ff7e3ca84cb0/”