Создание расширения для браузера TurboReader

До сих пор у нас было хорошее сочетание различных элементов. В этой статье я расскажу вам о том, как я создал расширение для браузера turboReader.

Для тех, кто не знаком с турбочтением, это концепция, при которой вы изменяете слова так, чтобы они были частично выделены жирным шрифтом для увеличения скорости чтения. Эта концепция называется бионическим чтением.

Подробнее о бионическом чтении.

В этой статье я не буду использовать API bionic, а вместо этого воспользуюсь своей скриптовой версией вывода.

Результатом будет это фантастическое расширение, которое может работать на любой веб-странице.

Настройка проекта

Давайте начнем с настройки проекта. Наше расширение будет включаться нажатием кнопки options.
Поэтому нам понадобятся только манифест и фоновый рабочий.

Мы начнем с создания новой папки и перехода в нее.

mkdir turboReader && cd turboReader
Вход в полноэкранный режим Выйти из полноэкранного режима

Попав внутрь, откройте проект и начните с добавления файла manifest.json.

{
  "manifest_version": 3,
  "version": "1.0",
  "name": "TurboReader",
  "description": "Become a faster reader with TurboReader",
  "action": {},
  "icons": {
    "48": "icons/icon-48.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [ "activeTab", "scripting"]
}
Войти в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, мы используем манифест версии 3.
Затем мы также определяем пустой объект action, который необходим для прикрепления обработчиков к иконке действия.
И мы устанавливаем наш рабочий фон в файл под названием background.js.
Наконец, нам понадобятся разрешения для внедрения сценариев на активной вкладке.

Давайте продолжим и создадим файл background.js.
Сначала нам нужно добавить действие, которое срабатывает при нажатии на кнопку опций.

chrome.action.onClicked.addListener(async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: turboMode,
  });
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Здесь мы получаем активную вкладку и вводим функцию turboMode.

Теперь перейдите к созданию функции turboMode.

const turboMode = () => {
  // Our function
};
Вход в полноэкранный режим Выход из полноэкранного режима

Создание функции турбо-режима чтения

Чтобы создать эту функцию, нам сначала нужно получить все абзацы на странице.

const paragraphs = document.getElementsByTagName('p');
Вход в полноэкранный режим Выйти из полноэкранного режима

Затем мы хотим убедиться, что мы еще не находимся в турбо-режиме чтения. Мы сделаем это, проверив, добавлен ли определенный класс в тело страницы.

const isTurboMode = document.body.classList.contains('trms');
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем мы можем перебрать все абзацы и сделать что-то с каждым из них.

for (const paragraph of paragraphs) {
  if (isTurboMode) {
    // Turbo mode is one
  } else {
    // Turbo mode is off
  }
}
Войти в полноэкранный режим Выход из полноэкранного режима

Если включен турбо-режим, мы должны вернуть абзацам их первоначальный вид.
Мы сделаем это, заменив innerText на его не-html версию.

paragraph.innerText = paragraph.innerText;
Войти в полноэкранный режим Выход из полноэкранного режима

Примечание: побочный эффект может привести к тому, что существующая жирная/жирная разметка будет удалена. 😅

Если мы не находимся в турбо-режиме, мы должны взять текст для каждого абзаца и разделить его по словам.
Затем мы сопоставим каждое слово и вернем их с пробелом между ними.

paragraph.innerHTML = paragraph.innerText
  .split(' ')
  .map((word) => {
    // Each word
  })
  .join(' ');
Войти в полноэкранный режим Выход из полноэкранного режима

Теперь наступает самая интересная часть. Мы должны определить, какую часть слова мы хотим выделить жирным шрифтом.

Я думаю, что мы можем примерно сделать половину слова жирным шрифтом.
Чтобы добиться этого, сначала нужно определить длину слова.

const length = word.replace(/[^a-zA-Z0-9]+$/, '').length;
Войти в полноэкранный режим Выйдите из полноэкранного режима

Затем мы можем получить длину части слова, которую мы сделаем полужирной. Если слово состоит из одной буквы, оно всегда должно быть выделено жирным. В противном случае мы выделим половину длины.

const boldLength = length === 1 ? 1 : Math.floor(length / 2);
Войти в полноэкранный режим Выход из полноэкранного режима

Затем мы возвращаем слово, но с первой половиной, выделенной жирным шрифтом.

return `<strong>${word.substring(0, boldLength)}</strong>${word.substring(
  boldLength
)}`;
Войти в полноэкранный режим Выход из полноэкранного режима

Последняя часть вне цикла — добавление класса тела, определяющего, находимся ли мы в турбо-режиме или нет.

isTurboMode
  ? document.body.classList.remove('trms')
  : document.body.classList.add('trms');
Вход в полноэкранный режим Выход из полноэкранного режима

Вот и все. Теперь наша полная функция будет выглядеть следующим образом:

const turboMode = () => {
  const paragraphs = document.getElementsByTagName('p');
  const isTurboMode = document.body.classList.contains('trms');
  for (const paragraph of paragraphs) {
    if (isTurboMode) {
      paragraph.innerText = paragraph.innerText;
    } else {
      paragraph.innerHTML = paragraph.innerText
        .split(' ')
        .map((word) => {
          const length = word.replace(/[^a-zA-Z0-9]+$/, '').length;
          const boldLength = length === 1 ? 1 : Math.floor(length / 2);
          return `<strong>${word.substring(
            0,
            boldLength
          )}</strong>${word.substring(boldLength)}`;
        })
        .join(' ');
    }
  }

  isTurboMode
    ? document.body.classList.remove('trms')
    : document.body.classList.add('trms');
};
Вход в полноэкранный режим Выход из полноэкранного режима

Вы также можете найти готовый код в этом репозитории GitHub.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и общаться на Facebook или Twitter.

Оцените статью
devanswers.ru
Добавить комментарий