Пишем расширение-читалку для Habr12.02.2021 09:17

{
  "manifest_version": 2,
  "name": "Habr Reader",
  "description": "Расширение позволяет воспроизводить текст на странице со статьей на Хабре с возможностью изменения языка и скорости воспроизведения",
  "version": "1.01",
  "developer": {
    "name": "Enji Rouz",
    "url": "https://github.com/EnjiRouz/Habr-Reader-Extension"
  },

  "icons": {
    "16": "res/icon16.png",
    "48": "res/icon48.png",
    "128": "res/icon128.png"
  },

  "permissions": [
    "storage",
    "http://*/*",
    "https://*/*",
    "tabs",
    "contextMenus"
  ],

  "background": {
    "scripts": ["js/content.js"],
    "persistent": true
  },

  "browser_action": {
    "default_icon": "res/icon128.png",
    "default_popup": "popup.html",
    "icon_128": "res/icon128.png"
  },

  "content_scripts": [{
    "matches": [""],
    "js": ["js/content.js"]
  }],

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
}

 
 
 
     
     
     
     
 
 
 
    
 
        
 
            ▶️ 
        
 
        
 
            ⏸️ 
        
 
        
 
            ⏹️ 
        
 
        
 
            Speed 
             
        
     
        
 
            ru-RU 
        
 
        
 
            en-US 
        
 
    
 
 











 

body{
    width:180px;
    height:60px;
    font-family: arial, serif;
    font-size: 12px;
}

.tool-bar{
    display: block;
    width: 180px;
    height: 60px;
    line-height: 30px;
    background-color: #242424;
}

.tool-bar ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.tool-bar ul li{
    display: inline-block;
    margin: 0;
    padding: 0;
}
button{
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.tool-bar ul li button, label{
    padding: 0 4px;
    text-decoration: none;
    color: #FFFFFF;
}

.tool-bar ul li button:hover{
    text-decoration: underline;
}

input {
    width:30px;
    padding: 6px 0 4px 10px;
    border: 1px solid #9e9e9e;
    background: #242424;
    border-radius: 4px;
    color: #FFFFFF;
}

// определение кнопок
const playButton = document.getElementById("play-button");
const pauseButton = document.getElementById("pause-button");
const stopButton = document.getElementById("stop-button");

// определение полей ввода
const speed = document.getElementById("speed");

// назначение действий на соответствующие кнопки/поля
if(playButton)
    playButton.addEventListener("click", play);

if(pauseButton)
    pauseButton.addEventListener("click", pause);

if(stopButton)
    stopButton.addEventListener("click", stop);

if(speed)
    speed.addEventListener("input", changeSpeed);

// применение настроек на странице происходит при помощи их передачи в сообщении,
// предназначенном для background скрипта

function play(){
    // определение выбранного языка воспроизведения
    let language = document.querySelector('input[name="speech-language"]:checked').value;

    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {todo: "play", newSpeed: speed.value, lang: language});
    });
}

function pause(){
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {todo: "pause"});
    });
}

function stop(){
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {todo: "stop"});
    });
}

function changeSpeed(){
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {todo: "changeSpeed", newSpeed: speed.value});
    });
}

// создание средства синтеза речи и получение списка голосов
const synthesis = window.speechSynthesis;
const voices = synthesis.getVoices();
const utterance = new SpeechSynthesisUtterance();

// текущий символ, который синтезируется в данный момент времени
let currentCharacter;

// назначение события на момент, когда речь перестанет проигрываться
utterance.addEventListener("end", () => {
    currentCharacter = null;
});

// получение символа, который синтезируется в данный момент
utterance.addEventListener("boundary", event => {
    currentCharacter = event.charIndex;
});

// переменные: язык речи, скорость проигрывания аудио, воспроизводимый текст
let speechLanguage = "ru-RU";
let playerSpeed = 1;
let textToPlay = "Открой статью, а потом уже нажимай сюда";

/**
 * Рекурсивно прибавляет текстовое содержимое дочерних элементов для формирования текста поста
 * @param elementForSearchingIn - родительский элемент, в котором будет осуществляться поиск текстовых нодов
 */
function joinTextNodes(elementForSearchingIn) {
    if (elementForSearchingIn.hasChildNodes()) {
        elementForSearchingIn.childNodes.forEach(function (node) {
            joinTextNodes(node)
        });
    } else if (elementForSearchingIn.nodeType === Text.TEXT_NODE) {
        textToPlay += " " + elementForSearchingIn.textContent;
    }
}

/**
 * Поиск голоса для заданного языка речи
 * @param lang - заданный язык речи
 * @returns {null|SpeechSynthesisVoice}
 */
function findVoice(lang) {
    for (let i = 0; i < voices.length; i++) {
        if (voices[i].lang === lang)
            return voices[i];
    }
    return null;
}

/**
 * Проигрывание синтезированного высказывания
 */
function playTextToSpeech() {

    // если проигрывание речи было поставлено на паузу - происходит продолжение проигрывания
    if (synthesis.paused && synthesis.speaking)
        return synthesis.resume();

    if (synthesis.speaking) return;

    // определение параметров синтезируемой речи
    utterance.text = textToPlay;
    utterance.rate = playerSpeed || 1;
    utterance.lang = speechLanguage;
    utterance.voice = findVoice(utterance.lang);

    // проигрывание речи
    synthesis.speak(utterance);
}

/**
 * Установка проигрывания синтезированной речи на паузу
 */
function pauseTextToSpeech() {
    if (synthesis.speaking)
        synthesis.pause();
}

/**
 * Остановка (прекращение) проигрывания синтезированной речи
 */
function stopTextToSpeech() {
    synthesis.resume();
    synthesis.cancel();
}

/**
 * Изменение скорости речи в режиме реального времени
 */
function changeSpeed() {
    if (synthesis.paused && synthesis.speaking) return;
    if (currentCharacter === null) return;

    stopTextToSpeech();
    playTextToSpeech(utterance.text.substring(currentCharacter));
}

/**
 * Осуществление взаимодействия pop-up формы с background скриптом при помощи отправки-получения сообщений
 * в активной вкладке с передачей в них необходимых для работы параметров.
 * Переданные параметры перезаписывают предыдущие настройки
 */
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    switch (request.todo) {
        case "play":
            playerSpeed = request.newSpeed;
            speechLanguage = request.lang;
            playTextToSpeech();
            break;
        case "changeSpeed":
            playerSpeed = request.newSpeed;
            changeSpeed();
            break;
        case "pause":
            pauseTextToSpeech();
            break;
        case "stop":
            stopTextToSpeech();
            break;
    }
    sendResponse({
        response: "Message received"
    });
});

// подготовка текста поста к чтению
window.onload = function () {
    let contentBody = document.getElementById("post-content-body");
    if (contentBody) {
        textToPlay = "";
        joinTextNodes(contentBody);
        alert("Текст поста готов к чтению")
    }
};