Интерактивный парсер web страниц
Всем привет. Меня зовут Влад и по профессии я Java Backend.
Для начала вкратце введу в курс дела. 3 года назад ко мне в голову закралась навязчивая мысль написать интерактивный словарь-помощник для чтения на английском языке. И с тех пор начались мои приключения в мире расширений для браузеров на ядре Chrome’а.
Идея была такова. Вот у нас есть страница. Что если её всю спарить и отрисовать каждое слово на ней как интерактивный элемент. Кликаешь на него и слово летит в Wordbook (Аля личный словарь). Это слово сразу на всей странице окрашивается в какой-то цвет, в зависимости от уровня.
Для простоты пусть это будут цвета — [Красны / Оранжевый / Жёлтый / Зелёный]. Синим отмечались сами интерактивные слова, не добавленные в словарь.
Ты можешь по этому слову кликать. Открывается меню и ты можешь поменять уровень знания слова.
Путём множества проб и ошибок, пробираясь через тернии непонятных багов, зависающих страниц, оптимизаций алгоритма, я эту штуку написал. Сейчас, конечно переписываю ибо не дело парсить с ходу всю страницу, но всё же…
В контексте английского раньше часто пользовался. Основную проблему я таким образом решил (Маленький словарный запас, стал приемлемым). Отмечу что читал на английском я и до этого много, а плагин лишь стал костылём на турбо тяге.
Если хотите попробовать. Можете вбить в расширениях Reckue-Languages, если хотите. Найдёте без проблем.
Плагин буквально пересоберёт Web страницу с нуля. А также реагируют на все изменения, которые с ней происходят.
Появился новый блок? Спарсим, не пропустим.
Single Page Application? Без проблем и её перерисуем.
И работает довольно шустро, на перерисовку Документации ES6 у плагина уходит 3 секунды (на моём железе).
Но проблем тоже масса. Плагин жрёт много ресурсов. И не все машинки с этим справляются.
Все слова он хранит в тайном хромовском сторе, который к слову ограничен. Из-за чего пришлось даже вводит систему разделения хранилища на страницы. Из-за этого ни о каком использовании на разных устройствах и речи не идёт.
А про то что ссылки постоянно прячутся среди интерактивных блоков, которые тоже по факту ссылки…
Несовместимость модульного и стандартного js кода, привела меня к использованию webpack.
И так далее. На каждую из сотни проблем можно написать свою отдельную статейку, начиная от работы Chrome API, заканчивая тем как и почему я от определённых решений отказывался и приходил к другим решениям.
Решил поделиться болью в ряде статей. Показать и объяснить некоторые из принятых решений и тп. Проект полностью в открытом доступе, историю изменений, без моих пояснений можно глянуть хоть сейчас:
Reckue/reckue-langs: It’s your vocabulary-book built-in any pages you visit. (github.com)
Следующая статья будет про решение, которое я пишу прямо сейчас, с кодом и пояснениями. При клике на слово, вычистятся его позиция внутри блока. На вход мы принимаем event, а на выходе выдаём слово.
const parser = new Parser(event);
const word = parser.getWord();Там вычисляется масса параметров, чтобы найти сначала блок внутри текста, потом посчитать index символа, на котором у нас курсор и распарсить само слово.
Может быть это можно было сделать проще, но я таких решений не знаю, а гуглёжка привела меня лишь на пару статей отсюда, где люди своими силами вычленяли блоки.
Справедливости ради гуглил я не долго.
Вот одна из статей из которой я в начале подтырил код: Определение размеров текста / Хабр (habr.com)
