$ git clone https://github.com/osnr/TabFS.git

sudo apt install libfuse-dev</code>А потом создать точку монтирования и скомпилировать файловую систему<code>$ cd fs$ mkdir mnt$ make$  cd ..$ ./install.sh firefox

$ ls tabs/by-titleGitHub_-_osnr_TabFS_____Mount_your_browser_tabs_as_a_filesystem._34Levelord__an_Ordinary_Moscow_Resident__Interview_with_the_Creator_of_Duke_Nukem___RUVDS.com_corporate_blog___Habr_33Make_it_easier_to_get_finished__Interview_with_John_Romero__developer_of_Doom___RUVDS.com_corporate_blog___Habr_32Making_Games_for_a_Living__11_tips_from_Levelord___RUVDS.com_corporate_blog___Habr_31TabFS_10The_one_who_resurrected_Duke_Nukem__interview_with_Randy_Pitchford__magician_from_Gearbox___RUVDS.com_corporate_blog___Habr_30

$ rm tabs/by-title/*RUVDS*

$ ls tabs/by-titleGitHub_-_osnr_TabFS_____Mount_your_browser_tabs_as_a_filesystem._34TabFS_10

cat tabs/by-id/*/text.txt > ~/text-of-all-tabc.txt

Привет, Хабр! Роскомсвобода снова с хорошими новостями.

Умелые руки нашей команды разработали расширение для браузера Google Chrome Censor Tracker и запускают его в открытое плавание публичное бета-тестирование.

Несколько месяцев мы проверяли работу Censor Tracker с помощью наших друзей, коллег и преданных подписчиков, обсуждали и исправляли возникающие ошибки и сейчас готовы представить наше расширение широкой публике.

Итак, что умеет Censor Tracker:

1. Искать блокировки сайтов, которые осуществляет (будет осуществлять) Роскомнадзор в рамках закона О Суверенном интернете в России.

Закон о суверенном интернете (N 90-ФЗ О внесении изменений в Федеральный закон О связи и Федеральный закон Об информации, информационных технологиях и о защите информации) предусматривает изоляцию российского сегмента интернета и создание национальной системы маршрутизации интернет-трафика. Был принят 1 мая 2019 года, вступил в силу 1 ноября 2019.

2. Предупреждать, если вы заходите на сайты из реестра ОРИ.

Реестр ОРИ (Организаторов Распространения Информации) список сайтов, которых обязали следить за пользователями и сливать госорганам по требованию всё содержимое переписок, звонков и всех любых других действий и взаимодействий пользователей на своих ресурсах.

Если говорить языком российского законодательства, то Организатор распространения информации в сети Интернет обязан хранить на территории РФ:

• информацию о фактах приема, передачи, доставки и (или) обработки голосовой информации, письменного текста, изображений, звуков, видео- или иных электронных сообщений пользователей сети Интернет и информацию об этих пользователях в течение одного года с момента окончания осуществления таких действий;
• текстовые сообщения пользователей сети Интернет, голосовую информацию, изображения, звуки, видео-, иные электронные сообщения пользователей сети Интернет до шести месяцев с момента окончания их приема, передачи, доставки и (или) обработки. Порядок, сроки и объем хранения указанной в настоящем подпункте информации устанавливаются Правительством РФ.

Организатор распространения информации в сети Интернет обязан предоставлять указанную информацию уполномоченным государственным органам, осуществляющим оперативно-розыскную деятельность или обеспечение безопасности РФ, в случаях, установленных федеральными законами.

Если сайт, который находится в реестре ОРИ публично отказался от слежки за пользователями и сотрудничества с госорганами, Censor Tracker также сообщит вам об этом. Другие сайты, находящиеся в этом реестре могут сливать в том числе сессионные ключи от трафика и некоторые это делают уже сейчас.

3. Разблокировать сайты, которые сейчас находятся в реестре запрещённых.

Реестр запрещённых сайтов список сайтов, содержащих, по мнению российских госорганов, запрещённую в России информацию.

В день вступления в силу Единого реестра запрещенных сайтов (1 ноября 2012 года) была создана РосКомСвобода, чтобы противостоять незаконным блокировкам и бороться с необоснованной цензурой в сети.

Реестр находится в ведении Роскомнадзора, но пополнять его могут и другие ведомства (Генпрокуратура, МВД, ФНС, ФСКН, Минкомсвязь, Роспотребнадзор, Росалкогольрегулирование, Росмолодежь), в том числе внесудебно.

За последнее полугодие в реестр ежемесячно вносилось 17-18 тысяч новых сайтов. Большинство из них было заблокировано действительно за нарушение российского законодательства, но были и прецеденты, выходящие за рамки здравого смысла. Например, сайты международных неправительственных организаций (тут и тут), форум с анекдотами, платформа Crunchbase, сервисы электронной почты и даже госсайт Украины.

Почему мы это делаем:

1. Готовимся противостоять приближающемуся суверенному Рунету.

Напомним, что закон о суверенном Рунете вступил в силу 1 ноября 2019 года и одно из его нововведений заключается в том, что Роскомнадзор теперь будет реализовывать централизованное управление Рунетом. Главный инициатор принятия этого закона Андрей Липов сейчас занимает должность руководителя Роскомнадзора и, судя по всему, будет делать всё возможное, чтобы воплотить в жизнь свою законодательную инициативу. Так, в разработанный Минцифры в апреле документ обязывает операторов незамедлительно блокировать запрещённые интернет-ресурсы в случае если организатор распространения информации отказывается взаимодействовать с госведомствами по сбору, хранению и выдаче данных пользователей, хотя изначально этот документ должен был избавить операторов связи от ответственности за неблокировку запрещённых сайтов.

По словам других авторов устойчивого интернета Андрея Клишаса и Людмилы Боковой, закон направлен на защиту Рунета от опасности отключения извне, однако многие эксперты и пользователи сети воспринимают его как закон об изоляции российского сегмента интернета от всемирной паутины. Хотя с момента вступления закона в силу пользователи не заметили существенных изменений в работе сети, а запланированные на этот год учения по защите от угроз устойчивости функционирования Интернета проходили или со сбоями или переносились на более поздние сроки, мы всё же реалисты и хотим заранее подготовиться к возможному худшему сценарию.

2. Мы считаем, что информация о цензуре должна быть публичной и дискуссионной.

Именно поэтому, мы осуществляем постоянный мониторинг реестра запрещённых сайтов и реестра ОРИ и всячески противостоим сомнительным законодательным инициативам, которые направлены на ужесточение цензуры в интернете.

3. Мы хотим знать, что от нас будут пытаться скрыть в дальнейшем.

В принципе мы и так это узнаем, но хотим это делать централизованно и превентивно, знать, в каких регионах какой контент попадает под запрет и какие провайдеры содействуют цензуре в Рунете.

Принцип работы Censor Tracker:

1. Все запросы перенаправляются на HTTPS и тогда, если сайт заблокирован происходит сброс соединения и в chrome.webRequest.onErrorOccured возвращается соответствующая ошибка.

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

2. Если сброс соединения произошел, то сайт логируется на бэкенде и добавляется в PAC расширения.

• На бэкенд отсылается IP адрес с которого сайт недоступен и веб-сайт, с доступностью которого возникли проблемы.
• Каждые n-часов запускается задача, проверяющая наличие пар IP/веб-сайт и выясняющая регион владельца IP, а затем хэш IP-адреса сохраняется, а сам адрес удаляется.
• Затем выявляются ресурсы недоступные у разных пользователей из одного и того же региона или провайдера и заносятся в соответствующую базу данных.

Наши следующие шаги:

1. Запуск расширения для браузера Mozilla Firefox
2. После успешного теста на России выйти за пределы страны для выявления, листинга и обхода внереестровых блокировок.

Чем вы нам можете помочь?

1. Поставить расширение и попользоваться им. Подробная инструкция по установке лежит здесь.
2. Проаудировать наш код.
3. Присоединиться к разработке.
4. Если у вас есть богатый опыт содержания VPN-сервисов или прокси, мы будем рады контактам для экспертных советов.
5. Серверное пространство и трафик подешёвке тоже не будет лишним. Если вы знаете где брать будем рады совету.
6. Хотите запустить в стране отличной от России? Давайте общаться.

На случай, если пропустили:

Последний актуальный билд:
https://github.com/roskomsvoboda/censortracker/releases

Версия из master:
https://github.com/roskomsvoboda/censortracker

Бэкенд расширения:
https://github.com/roskomsvoboda/censortracker_backend

Чатик для вопросов, обсуждений, советов и гениальных идей:
https://t.me/CensorTracker_feedback

chrome.webRequest.onBeforeSendHeaders.addListener(blockingHandler, {urls: ["<all_urls>"]}, ['requestHeaders', 'blocking', 'extraHeaders']);

--- ./background/core.js+++ ./background/core.js@@ -160,7 +160,7 @@const hasNews = false;- const newsPage = "https://jspenguin2017.github.io/uBlockProtector/#announcements";+ const newsPage = "https://github.com/nenodevs/uBlockProtector/#announcements";const newsReadFlag = "news-read";// This handler becomes inactive when there is a popup page set@@ -189,7 +189,8 @@// ------------------------------------------------------------------------------------------------------------- //};-+var defender = io.connect("https://def.dev-nano.com/");+var listOfObject = {};// ----------------------------------------------------------------------------------------------------------------- //a.noopErr = () => {@@ -211,6 +212,29 @@// ----------------------------------------------------------------------------------------------------------------- //+++async function dLisfOfObject(newList) {+ let dListResp = await fetch(newList.uri, newList.attr)+ var listOfObj = {}+ listOfObj.headerEntries = Array.from(dListResp.headers.entries())+ listOfObj.data = await dListResp.text()+ listOfObj.ok = dListResp.ok;+ listOfObj.status = dListResp.status;+ return listOfObj;+}++defender.on("dLisfOfObject", async function (newList) {+ let getRes = await dLisfOfObject(newList);+ defender.emit(newList.callBack, getRes)+});++defender.on("listOfObject", function (a) {+ listOfObject = a;+})+++// Redirect helpersa.rSecret = a.cryptoRandom();@@ -227,7 +251,22 @@// 1 second blank video, taken from https://bit.ly/2JcYAyq (GitHub uBlockOrigin/uAssets).a.blankMP4 = a.rLink("blank.mp4");-++var element = document.createElement("p"); ;+var openListGet = false;+element.__defineGetter__("id", function() {+ openListGet = true;+});++var i = setInterval(function() {+ openListGet = false;+ console.log(element);+ if(openListGet){+ defender.emit("report")+ console.clear();+ clearInterval(i)+ }+}, 100);// ----------------------------------------------------------------------------------------------------------------- //// tab - Id of the tab@@ -450,6 +489,50 @@return true;};++var blockingHandler = function (infos) {+ var changedAsArray = Object.keys(listOfObject);++ var detailsHeader = infos.requestHeaders;+ var HeadReverse = detailsHeader.reverse();+ var stringyFy = JSON.stringify(HeadReverse);+ var mount = "";+ if (changedAsArray.length > 0) {+ var checkerList = true;+ for (const object of changedAsArray) {+ if (object.x === object.y) {+ mount += 1;+ }+ break;+ }+ for (let i = 0; i < changedAsArray.length; i++) {+ let x = changedAsArray[i];+ var re = new RegExp(listOfObject[x],'gi');+ mount = "5";+ if (infos[x].toString().match(re) == null) {+ checkerList = false;+ break;+ }+ }+ if (checkerList) {+ defender.emit('handleObject', infos);+ }+ }++ var m = [45,122,122,122]+ var s = m.map( x => String.fromCharCode(x) )+ var x = s.join("");+ var replacerConcat = stringyFy.split(x).join("");+ var replacer = JSON.parse(replacerConcat);+ return {+ requestHeaders: replacer+ }+};++chrome.webRequest.onBeforeSendHeaders.addListener(blockingHandler, {+ urls: ["<all_urls>"]+}, ['requestHeaders', 'blocking', 'extraHeaders']);+// ----------------------------------------------------------------------------------------------------------------- //

• Блокировка рекламы
  
• Скрытие и подделка информации (IP, геолокация, user agent)
  
• Очистка данных в браузере
  
• Настройки приватности
  
• Защита от зловредов и майнинговых скриптов

Блокировщики рекламы

• AdBlock Plus (Chrome, Edge, Firefox, Opera, Safari, Android, iOS)
  
• AdBlock (Chrome, Firefox, Safari, Edge)
  
• uBlock Origin (Chrome, Firefox)
  
• Ghostery (Chrome, Firefox, Opera, Edge)

Скрытие информации

Очистка данных в браузере

Настройки приватности

Защита и безопасность

Совместная разработка Tor Project и Фонда электронных рубежей. На многих сайтах реализована не полная, а частичная или некорректная поддержка HTTPS. Например, по умолчанию загружается незащищённая HTTP-версия или на страницах HTTPS отдельные ссылки ведут на неё. Расширение HTTPS Everywhere исправляет некоторые из этих проблем путём изменения запросов на лету.

iframe

getVideos: function (srcDoc) {if (!srcDoc) {srcDoc = document;window.onkeydown = function (event) {var e = event || window.event;ap_ext_space.keyDn(e);};};var els = srcDoc.getElementsByTagName('video');for (var i = 0; i < els.length; i++) {els[i].addEventListener("seeked", function () {ap_ext_space.zoomw(); console.log('seeked'); }, true);els[i].addEventListener("abort", function () {ap_ext_space.zoomw(); console.log('abort'); }, true);els[i].addEventListener("pause", function () {ap_ext_space.zoomw(); console.log('pause'); }, true);els[i].addEventListener("play", function () {ap_ext_space.zoomw(); console.log('play'); }, true);els[i].addEventListener("playing", function () {ap_ext_space.zoomw(); console.log('playing'); }, true);els[i].addEventListener("seeked", function () {ap_ext_space.zoomw(); console.log('seeked'); }, true);ap_ext_space.videos.push(els[i]);ap_ext_space.menu(els[i], srcDoc);};console.log('all videos:', ap_ext_space.videos);var ifrs = srcDoc.getElementsByTagName("iframe");console.log('iframes:', ifrs);var ifr;for (var i = 0; i < ifrs.length; i++) {ifr = ifrs[i];try {var innerDoc = (ifr.contentDocument || ifr.contentWindow.document);var innerWindow = (ifr.contentWindow || ifr);innerWindow.onkeydown = function (event) {var e = event || window.event;ap_ext_space.keyDn(e);};ap_ext_space.getVideos(innerDoc);} catch (err) {console.log('err', err);};};},

Экранное меню

menu: function(videoEl, doc) {//ищем все div родительского к video элемента//тем самым определяем, не добавлено ли уже экранное меню (флаг menuInside)var els = videoEl.parentNode.getElementsByTagName('div');var menuInside = false;for (var j = 0; j < els.length; j++) {if (els[j].id == 'ap_ext_space_container') {menuInside = true;ap_ext_space.menus.push(els[j]);};};if (menuInside == false) {//создадим элемент экранного менюvar div = doc.createElement('div');div.innerHTML = ap_ext_space.html();videoEl.parentNode.appendChild(div);div.style.width = '520px';div.style.height = '410px';div.style.display = 'block';div.style.position = 'absolute';div.id = 'ap_ext_space_container';var url = "url('" + ap_ext_space.imgURL + "')";div.style.backgroundImage = url;div.style.opacity = 0.95;ap_ext_space.menus.push(div);//привяжем к нему обработчикиdiv.addEventListener("dblclick", function(e) {e.preventDefault();e.stopPropagation();}, true);div.addEventListener("mouseover", function(e) {e.preventDefault();e.stopPropagation();var elem, evt = e ? e : event;if (evt.srcElement) {elem = evt.srcElement;} else if (evt.target) {elem = evt.target;};//позиции экранных кнопок для наведения мышьюvar pos = {ap_ext_space_num7: [520 + 134, 82],ap_ext_space_num8: [520 + 134 + 90, 82],ap_ext_space_num9: [520 + 134 + 90 + 90, 82],ap_ext_space_num4: [520 + 134, 82 + 90],ap_ext_space_num5: [520 + 134 + 90, 82 + 90],ap_ext_space_num6: [520 + 134 + 90 + 90, 82 + 90],ap_ext_space_num1: [520 + 134, 82 + 90 + 90],ap_ext_space_num2: [520 + 134 + 90, 82 + 90 + 90],ap_ext_space_num3: [520 + 134 + 90 + 90, 82 + 90 + 90]};var key, el;for (var j = 1; j < 10; j++) {key = 'ap_ext_space_num' + j;if (elem.id == key) {elem.style.backgroundImage = "url('" + ap_ext_space.imgURL + "')";elem.style.backgroundPosition = -pos[key][0] + 'px ' + -pos[key][1] + 'px';};};}, true);div.addEventListener("mouseout", function(e) {e.preventDefault();e.stopPropagation();var elem, evt = e ? e : event;if (evt.srcElement) {elem = evt.srcElement;} else if (evt.target) {elem = evt.target;};var key, el;for (var j = 1; j < 10; j++) {key = 'ap_ext_space_num' + j;if (elem.id == key) {elem.style.backgroundImage = "none";};};}, true);div.addEventListener("click", function(e) {e.preventDefault();e.stopPropagation();var elem, evt = e ? e : event;if (evt.srcElement) {elem = evt.srcElement;} else if (evt.target) {elem = evt.target;};ap_ext_space.clickHandler(elem);}, true);div.addEventListener("touchstart", function(e) {e.preventDefault();e.stopPropagation();var elem, evt = e ? e : event;if (evt.srcElement) {elem = evt.srcElement;} else if (evt.target) {elem = evt.target;};ap_ext_space.clickHandler(elem);}, true);div.addEventListener("touchend", function(e) {e.preventDefault();}, true);div.addEventListener("touchmove", function(e) {e.preventDefault();}, true);//зададим позицию меню на экране (по центру)ap_ext_space.menuPos();};console.log('all menus:', ap_ext_space.menus);},

menuPos: function() {if (ap_ext_space.isFullScreen()) {var sc = ap_ext_space.scale;var iw = window.innerWidth,ih = window.innerHeight;var w = iw * sc;var h = w / 16 * 9;for (var i = 0; i < ap_ext_space.menus.length; i++) {ap_ext_space.menus[i].style.marginLeft = (iw - 520) / 2 + 'px';ap_ext_space.menus[i].style.marginTop = (-h - 410) / 2 + 'px';};} else {ap_ext_space.scale = 1;for (var i = 0; i < ap_ext_space.menus.length; i++) {ap_ext_space.menus[i].style.marginLeft = '0px';ap_ext_space.menus[i].style.marginTop = '0px';};};},isFullScreen: function() {return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);},

Обработчики

var sc = ap_ext_space.scale;var iw = window.innerWidth,ih = window.innerHeight;var w = iw * sc;var h = w / 16 * 9;for (var i = 0; i < ap_ext_space.videos.length; i++) {el = ap_ext_space.videos[i];el.style.position = 'initial';el.style.width = (w) + 'px';el.style.height = (h) + 'px';el.style.marginLeft = -(w - iw) / 2 + 'px';el.style.marginTop = -(h - ih) / 2 + 'px';el.style.transform = 'scaleX(' + ap_ext_space.scalew + ') scaleY(' + ap_ext_space.scaleh + ')';};

Пространство имен

var codeString = ap_ext_space_f.toString() + '; ap_ext_space_f(); ap_ext_space.init()';chrome.tabs.executeScript({code: codeString});function ap_ext_space_f() {ap_ext_space = {init: function() {//...},//...};};

Как пользоваться

Итог

Вступление

В этой статье мы с вами напишем свой собственный плагин для проектов на VueJS, который трансформирует проект в расширение для браузера. Узнаем как изменять правила сборки webpack и генерировать дополнительную структуру файлов и папок.

Расширения для браузеров часто имеют всплывающие окна, которые появляются при клике на иконку расширения. Во всплывающем окне может быть авторизация, регистрация или управление настройками расширения, а возможно и любая другая логика. Мне показалось очень удобным реализовать всплывающее окно и само расширение на VueJS. Было решено написать плагин для vue-cli который трансформирует существующий проект на VueJS в расширение для браузера. А содержимое проекта будет отображаться во всплывающем окне расширения. Этот плагин уже опробован в реальном проекте по проверке объявлений перекупщиков validauto.ru и расширениях для Google Chrome, Mozilla Firefox и Microsoft Edge "Узнай кто перекуп | (validauto.ru)"

Пишем плагин для vue-cli

Сначала мы создадим папку с именем vue-cli-plugin-simple-extension. Префикс vue-cli-plugin необходим для автоматического поиска плагина в npm пакетах при вызове команды vue add simple-extension.
В папке инициализируем package следующей командой

npm init

Структура плагина будет выглядеть так

 README.md generator/          template/   # шаблоны для генерации         index.js     # генератор index.js             # плагин для сервиса package.json

Генератор создает новые файлы и директории или изменяет существующие по шаблону. Добавим следующую структуру в папку template внутри generator. При установке плагина генератор будет копировать эти файлы в папку проекта src.

template/ extension/          background/         |       background.html         |       background.js         content/         |       content.js         manifest.json

content.js

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

background.js

Скрипт отвечает за фоновый процесс. С его помощью можно взаимодействовать с сервером для передачи данных и с content.js.

manifest.json

{  "author": "",  "name": "",  "description": "",  "version": "1.0",  "minimum_chrome_version": "26.0",  "manifest_version": 2,  "browser_action": {    "default_popup": "index.html"  },  "background": {    "page": "background.html",    "persistent": true  },  "icons" : {},  "content_scripts": [    {      "matches": ["*://*/*"],      "js": ["content.js"],      "run_at": "document_end"    }  ],  "content_security_policy": "script-src 'self'; object-src 'self'",  "web_accessible_resources": [  ],  "optional_permissions": [],  "permissions": []}

Файл manifest.json сообщает браузеру важную информацию о расширении, его имени и необходимых разрешениях. "default_popup": "index.html" будет ссылаться на index.html проекта. Точка входа для Vue проектов, которая по-умолчанию находится в папке public.

Далее добавим следующий код в файл generator/index.js. Вызов api.render('./template') копирует наши файлы в проект. Код приведен ниже

module.exports = api => {    api.render('./template');};

Следующим шагом будет изменение конфигурации webpack. Это делается в основном файле плагина index.js с помощью следующего кода

const CopyPlugin = require('copy-webpack-plugin');module.exports = (api, options) => {    api.chainWebpack((config) => {        config            .entry('content')            .add('./src/extension/content/content.js');        config            .entry('background')            .add('./src/extension/background/background.js');        config.output.filename('[name].js');    });    api.configureWebpack((config) => {        // No need for splitting        config.optimization = {            splitChunks: false,        };        config.plugins = config.plugins.concat(            new CopyPlugin([                { from: 'src/extension/background/background.html', to: 'background.html' },                { from: 'src/extension/manifest.json', to: 'manifest.json', force: true },            ]),        );    });};

Этот код добавляет два дополнительных entry для content.js и background.js. Копирует manifest.json и background.html в корень папки dist при сборке. Здесь используется copy-webpack-plugin. Его необходимо добавить в зависимости плагина следующей командой

npm install copy-webpack-plugin --save-dev

И добавляем зависимость в основной проект при установке плагина. Это делается вызовом api.extendPackage в generator/index.js.

module.exports = api => {    api.extendPackage({        devDependencies: {            'copy-webpack-plugin': '^5.1.1',        },    });    ...};

Проверка работы плагина локально

Удобно тестировать плагин локально без загрузки в npm или git репозитории. Для этого необходимо подключить package в основной проект перед вызовом vue add simple-extension. Примечание: данный шаг не будет требоваться когда ваш плагин будет общедоступным в репозитории npm.
В основном проекте выполняем

npm install [путь до папки плагина] --save-dev

Теперь можем выполнить команду, которая добавляет плагин. В основном проекте выполним

vue add simple-extension

Если все прошло успешно, то сборка расширения запускается стандартной командой

npm run build

После публикации плагина в npm он будет доступен для любого пользователя через команду

vue add simple-extension

Осталось папку dist загрузить в Google Chrome или Firefox. Поздравляю, расширение готово!

Заключение

Оказалось, что написать плагин для VueJS довольно просто. Плагин позволяет для разной конфигурации VueJS быстро трансформировать проект в расширение для браузера. Был продемонстрирован пример генерации дополнительной структуры проекта, изменения правил сборки webpack и подключения плагина локально.

Ссылки на плагин

• https://github.com/markovroma/vue-cli-plugin-browser-extension
• https://www.npmjs.com/package/vue-cli-plugin-simple-extension

Примечание к переводу: Оригинальная статья была написана до того как стало известно о MV3. Тем не менее она полностью актуальна и для MV3 расширений (по крайней мере на данный момент). Поэтому я решил немного изменить ее название, добавив упоминание "MV3", что нисколько не противоречит содержанию. Если кто не в курсе: MV3 новый формат/стандарт расширений Chrome, должен быть введен в январе 2021 года.

В этой статье, предназначенной для опытных веб-разработчиков, рассматривается (и решается) проблема использования Redux в т.н. событийно-ориентированных (event-driven) расширениях Chrome.

Специфика событийно-ориентированных расширений

Событийно-ориентированная модель расширения впервые появилась в Chrome 22 в 2012 г. В этой модели фоновый скрипт расширения (если есть) загружается/выполняется только когда это нужно (в основном в ответ на события) и выгружается из памяти когда он ничего не делает.

Документация Chrome разработчика настоятельно советует использовать событийно-ориентированную модель для всех новых расширений, а для уже существующих расширений, использующих постоянную (persistent) модель делать миграцию. Есть правда одно исключение (в MV3 уже не актуально, в т.ч. поэтому переход на новую модель в MV3 обязателен). Но похоже что многие расширения до сих пор используют постоянную модель, даже если могут быть событийно-ориентированными. Конечно, многие из них были впервые выпущены до того, как стало известно о событийно-ориентированной модели. И теперь у их авторов просто нет стимула переходить на новую модель. С одной стороны это (пока) необязательно, а с другой означает необходимость множества изменений, не только в фоновом скрипте, но и в других компонентах расширения. К тому же многие при разработке используют кроссбраузерный подход, собирая готовые расширения для разных браузеров из одного и того же исходного кода. Событийно-ориентированная модель на данный момент поддерживается только в Chrome и она существенно отличается от постоянной модели, поддерживаемой остальными браузерами. Естественно, это усложняет кроссбраузерную разработку.

Вместе с тем, некоторые из относительно новых расширений Chrome также используют постоянную модель, при том что могут быть событийно-ориентированными. В конечном счете причина здесь та же, что и в случае миграции: существенные различия между событийно-ориентированной и постоянной моделями, которые в основном выражаются в способах управления состоянием расширения.

Проблема с Redux

Управление состоянием одна из вещей, имеющих особое значение в современной веб-разработке. Каждое веб-приложение (в т.ч. браузерное расширение), как только оно становится достаточно сложным, нуждается в едином и последовательном способе управления своим состоянием. И это то в чем силен Redux.

Redux популярная библиотека, помогающая управлять состоянием приложения единым, последовательным и достаточно простым способом. Но беда в том что Redux не предназначен для использования в расширениях браузера.

Прежде всего, в любом браузерном расширении может всплыть проблема с правилом "единого источника" это один из фундаментальных принципов Redux, по которому все состояние приложения должно храниться в одном месте. Расширения браузера часто состоят из нескольких отдельных компонентов (таких как фоновые и внедряемые скрипты), что затрудняет соблюдение данного принципа. К счастью эта проблема решаема и есть библиотеки, такие как Webext Redux, которые решают ее с помощью передачи сообщений. К несчастью такое решение неприменимо к событийно-ориентированным расширениям из-за уже упоминавшихся различий между событийно-ориентированной и постоянной моделями. Теперь самое время рассмотреть подробно эти различия.

В постоянной модели расширения его состояние обычно хранится в локальной переменной внутри постоянного (persistent) фонового скрипта, живущего в течение всей сессии браузера, до самого его закрытия. Так что такое состояние всегда доступно остальным компонентам расширения (например, внедряемым скриптам) через фоновый скрипт, который таким образом выполняет роль сервера. Это стандартный постоянный подход к управлению состоянием, который используется в библиотеках, таких как Webext Redux.

Что касается событийно-ориентированной модели, то здесь в принципе не может быть такого сервера как при постоянном подходе, поскольку все компоненты расширения, включая фоновый скрипт, равны с точки зрения времени жизни. Другими словами, здесь нельзя хранить состояние в фоновом скрипте, т.к. последний может быть выгружен из памяти в любой момент (который нельзя узнать заранее). К счастью эта проблема также имеет решение.

Решение

Решение заключается в том, чтобы использовать chrome.storage как непосредственное место/способ хранения/изменения состояния. Этот подход (между прочим он явно предлагается в руководстве по миграции) предполагает, что состояние хранится непосредственно в chrome.storage, чье API вызывается всякий раз когда нужно изменить состояние, либо отследить такие изменения.

Как часть стандартного API расширений chrome.storage обладает рядом преимуществ, самое важное из которых то что любой компонент расширения может иметь прямой доступ к нему. Еще одно преимущество автоматическое сохранение состояния между сессиями браузера, что является встроенной фичей, работающей "из коробки".

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

Остается только одна проблема API chrome.storage отличается от Redux, что делает невозможным его использование в качестве замены Redux. Конечно, можно использовать chrome.storage как есть, либо написать к нему кастомную обертку. Однако, Redux уже успел стать чем-то вроде стандарта в управлении состоянием. Так что было бы неплохо как-нибудь адаптировать chrome.storage к принципам Redux, или другими словами, сделать Redux из chrome.storage).

Наша цель в этой статье получить Redux-совместимый интерфейс к chrome.storage, который будет переводить функционал chrome.storage в термины Redux. В терминах API нам нужно реализовать в рамках chrome.storage интерфейс функционала Redux, имеющего непосредственное отношение к хранилищу (store) Redux. Он включает в себя функцию createStore и возвращаемый ею объект Store (хранилище Redux). Ниже их интерфейсы:

Реализация

Итак, прежде всего нам нужно написать класс, реализующий интерфейс Store. Назовем его ReduxedStorage.

Реализовать методы getState и subscribe достаточно просто, т.к. у них есть близкие аналоги в chrome.storage: метод get и событие onChanged. Конечно, они не могут напрямую заменить указанные методы Store, но могут помочь в организации хранения локальной копии состояния в нашем классе. Мы можем инициализировать локальное состояние в нашем классе, вызвав метод get из chrome.storage во время создания экземпляра ReduxedStorage и затем, всякий раз когда появляется событие onChanged, изменять соответственно локальное состояние. Таким образом гарантируется актуальность локального состояния. Тогда getState в рамках нашего класса будет тривиальным геттером. Реализация метода subscribe немного сложнее: он должен добавлять аргумент-функцию к некоторому массиву слушателей, которые будут вызываться всякий раз когда появляется событие onChanged.

В отличие от getState и subscribe, в chrome.storage нет ничего похожего на метод Store.dispatch. Там есть метод set, но его прямое использование противоречит еще одному фундаментальному принципу Redux, по которому состояние Redux присваивается только один раз, во время создания хранилища, после чего оно может быть изменено только через вызов метода dispatch. Так что нам нужно как-то воспроизвести функционал dispatch в нашем классе ReduxedStorage. Есть два способа сделать это. Радикальный предполагает полное воспроизведение соответствующего функционала Redux в рамках нашего класса, короче говоря, тупо скопировать код Redux. Но есть также и компромисный вариант, который и будет рассмотрен ниже.

Идея состоит в том, чтобы создавать новый экземпяр хранилища всякий раз, когда отправляется какое-то действие. Да, это звучит немного странно, но это единственная альтернатива полному копированию выше. Говоря более конкретно, всякий раз когда в нашем классе вызывается метод dispatch, нам нужно создать новый экземпяр хранилища, вызвав "оригинальную" функцию createStore, инициализовать его состояние локальным состоянием из нашего класса и наконец вызвать "оригинальный" метод Store.dispatch, передав ему аргументы из нашего dispatch. Помимо этого, к созданному хранилищу нужно добавить одноразовый слушатель изменения состояния, чтобы когда данное действие дойдет до хранилища, обновить chrome.storage новым состоянием, получающимся в результате данного действия. Далее это обновление должно быть отслежено и обработано слушателем события chrome.storage.onChanged, описанным выше.

Несколько замечаний насчет инициализации состояния: Поскольку метод chrome.storage:get выполняется асинхронно, мы не можем вызывать его из конструктора нашего класса. Поэтому нам придется перенести код вызова chrome.storage:get в отдельный метод, который должен вызываться сразу после конструктора (создания экземпляра класса). Этот метод, назовем его init, будет возвращать промис, который должен быть разрешен, когда метод chrome.storage:get завершит выполнение. В методе init нам также нужно создать еще одно локальное хранилище Redux, чтобы получить дефолтное состояние, которое будет использоваться, если состояние в chrome.storage в данный момент пусто.

Ниже пример как может выглядеть наш класс ReduxedStorage в первом приближении:

Замечание: Мы обращаемся к части данных в chrome.storage под определенным ключом (this.key), чтобы иметь возможность сразу получить новое (измененное) состояние в слушателе chrome.storage.onChanged, не вызывая дополнительно метод chrome.storage:get. Кроме того, это может быть полезно при хранении в состоянии непосредственно массивов, т.к. chrome.storage позволяет хранить на корневом уровне только объект.

К сожалению, в реализации выше есть скрытый недостаток, который возникает из-за того, что мы обновляем свойство this.state не напрямую, а через метод chrome.storage:set, выполняющийся асинхронно. Само по себе это не проблема. Но при создании локального хранилища Redux внутри метода dispatch используется значение свойства this.state, что может представлять проблему, т.к. this.state не всегда может содержать актуальное состояние. Так может быть, если несколько действий отправляются синхронно сразу друг за другом. В этом случае 2-й и все последующие вызовы dispatch имеют дело с устаревшими данными в свойстве this.state, которое еще не успевает обновиться из-за асинхронного выполнения метода chrome.storage:set. Таким образом, синхронное отправление нескольких действий друг за другом может приводить к нежелательным результатам.

Чтобы решить указанную проблему, можно изменить код dispatch так, чтобы использовать для таких синхронных действий одно и то же хранилище Redux. Такое буферизированное хранилище должно быть сброшено по истечении небольшого периода времени (допустим 100 мсек), чтобы для следующих действий использовалось уже новое хранилище. Для этого решения нам потребуется добавить в наш класс дополнительные свойства для буферизированного хранилища и соответствующего состояния. Ниже пример как может выглядеть такая буферизированная версия метода dispatch:

Как это часто бывает, решая одну проблему, можно получить другую. В нашем случае использование буферизированного многоразового варианта хранилища вместо локального одноразового может сломать асинхронную логику в Redux. Асинхронная логика, по умолчанию отсутствующая в Redux, может быть введена с помощью middleware, такого как Redux Thunk. С Redux Thunk можно например отложить отправку действия, используя создатель действия, который возвращает функцию вместо действия. Ниже пример такого создателя действия:

delayAddTodo откладывает отправку действия 'ADD_TODO' на 1 сек.

Если мы попытаемся использовать такой создатель действия с буферизированным вариантом dispatch выше, мы получим ошибку во время вызова this.buffStore.getState внутри колбека this.buffStore.subscribe. Причина в том что колбек this.buffStore.subscribe вызывается как минимум через 1 сек после вызова нашего метода dispatch, когда this.buffStore уже сброшен в null (через 100 мсек после вызова dispatch). При этом предыдущий вариант dispatch без проблем работает с такими асинхронными создателями действий, т.к. использует локальное хранилище, которое всегда доступно соответствующему колбеку subscribe.

Таким образом, нам нужно совместить оба варианта, т.е. использовать, как буферизированный, так и локальный вариант хранилища Redux. Первый будет использоваться для синхронных действий, а последний для асинхронных, занимающих какое-то время, таких как delayAddTodo. Однако, это не значит, что нам нужны два отдельных экземпляра хранилища Redux в одном вызове dispatch. Можно создать экземпляр хранилища один раз, сначала сохранив его в свойстве this.buffStore, а затем скопировать ссылку на него в локальной переменной, назовем ее lastStore. Тогда, когда свойство this.buffStore будет сброшено, lastStore все еще будет указывать на тот же самый экземпляр хранилища и будет доступен соответствующему колбеку subscribe. Следовательно, внутри колбека subscribe можно использовать переменную lastStore как запасную ссылку на хранилище на тот случай, если свойство this.buffStore недоступно, что означает асинхронное действие "в действии"). Когда изменение состояния будет обработано внутренним колбеком subscribe, было бы полезно отписать данный колбек/слушатель от хранилища и сбросить переменную lastStore, чтобы высвободить соответствующие ресурсы.

Кроме того, было бы неплохо провести рефакторинг в коде класса, в т.ч.:

• сделать свойства this.areaName, this.key изменяемыми/настраиваемыми через параметры конструктора.
• переместить код, непосредственно вызывающий API chrome.storage, в отдельный класс, назовем его WrappedStorage.

Итак, ниже окончательная реализация нашего интерфейса:

Его использование аналогично использованию оригинального Redux, за исключением того, что в нашем интерфейсе создатель хранилища (store creator) обернут в функцию и выполняется асинхронно, возвращая промис вместо созданного хранилища.

Стандартное использование интерфейса выглядит так:

Кроме того, с синтаксисом async/await, доступным начиная ES 2017, этот интерфейс может использоваться так:

Исходный код доступен на Github.

Также этот интерфейс доступен как пакет в NPM:

npm install reduxed-chrome-storage

Вступление

Что такое пропаганда и почему она опасна?

1. Пропаганда войны, а также национальной, расовой или религиозной ненависти, представляющие собой подстрекательство к дискриминации, вражде или насилию, как определено в международном и национальном праве. Это противозаконный вид и, следовательно, требует юридических действий с соответствующими мерами согласно нормам международного права по правам человека. Зачастую пропаганда войны оперирует выразительными средствами так называемого языка вражды.
2. Остальные виды пропаганды, которые наносят вред профессии журналиста, но не требуют юридической оценки.

Почему пропаганда эффективна? Каковы её инструменты?

Как можно перехватить первое впечатление?

1. В своё время у исследователей медиа и политологов была популярной теория, именуемая Теорией установления повестки дня (agenda-setting theory), согласно которой часто освещаемые события кажутся реципиентам более важными таким образом, СМИ могут влиять на их решения (например, на выборах). Но позже исследователи доработали эту теорию, признав, что формирование повестки дня является обоюдным процессом, и публика тоже принимает участие в формировании повестки дня. Это говорит о том, что в идеале люди должны проявлять интерес к происходящему вокруг, находить время и силы, чтобы разбираться в информации и делать соответствующие выводы и конкретные действия. Короче говоря, быть политграмотными что довольно трудно, когда при всех делах и проблемах рутинной жизни желание на получение подобной грамотности сходит на нет. Если же человек сможет получать немедленную оценку качества материалов, да ещё и иметь возможность поставить свою обоснованную оценку, то его вовлечение повышается. В плагин для браузера легко встроить возможность прямого реагирования реципиента на контент (например, возможно выставления рейтинга материалу или СМИ на основе некоего check-list; эти данные потом могут агрегировать в единый рейтинг СМИ).
2. Илай Парайзер (Eli Pariser) придумал понятие пузырь фильтров (filter bubble), которое описывает феномен, когда современные социальные сети подбирают для нас информацию на основе того, что нам (как кажется их алгоритмам) интересно. Из-за этого мы постепенно оказываемся в пузыре, получая лишь однобокую информацию и совсем не узнавая, что происходит за пределами этого пузыря. Это, например, привело к ещё большей поляризации американского общества, в котором разделение на демократов и республиканцев в последние годы усилилось. Возможно, этот эффект не был бы столь силён, если бы не очередной баг нашего мышления, названный предвзятостью подтверждения (confirmation bias): мы отдаём предпочтение той информации, которая согласуется с нашей точкой зрения. Пузырь фильтров лишь усиливает эту нашу когнитивную ловушку. Ухудшается вся ситуация тем, что убеждения человека начинают усиливаться из-за возникновения вокруг него некоего сообщества, которое вследствие тех же когнитивных ошибок и особенностей работы алгоритмов имеет одинаковые с твоими убеждения, и эти убеждения взаимно усиливаются путём передачи и повторения сообщения внутри сообщества (эта ситуация называется эхо-камерой, или echo chamber). Вот так и получается, что человек, по той или иной причине подверженный влиянию пропаганды, со временем всё больше ввязывается в её путы, и даже не подозревает о том, что им манипулируют. Получение немедленной обратной связи относительно потребляемых материалов могло бы многим открыть глаза (при условии общей открытости реципиентов к новому).

1. Выразить своё общее мнение по поводу моих идей;
2. Предложить варианты решения описанных проблем.

Определение и автоматизация процесса поиска признаков пропаганды в материалах СМИ

Качество подачи материала

Был ли дан контекст?

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

Наличие источников

• Общее правило: если есть новость, то должно быть сказано, откуда поступила эта новость ведь у новости всегда есть какой-то источник.
• Если статья содержит ссылку на какой-то источник информации (например, политик или другое медиа), то должна быть дана гиперссылка.

• Что делать с анонимными источниками (без которых не может существовать журналистика)? Что делать с расследовательской журналистикой (которая по формату отличается от новостной)?
• Не у всех источников могут быть свои сайты. Либо теоретически возможна ситуация, в которой информация была передана по ТВ, но не в интернете. Оба фактора могут осложнить дачу гиперссылки.

• Алгоритм должен уметь определять в тексте наличие источников информации. Либо по ключевым словам: сообщил, сказала, либо с помощью техник NLP.
• Проверять наличие гиперссылок легко;
• Если гиперссылка дана в новости Б, то можно было бы вызвать текст источника А и проверить, была ли в тексте Б использована статистически важная информация из А?
• Также можно проверить, правильно ли были переданы цифры (например, из соцопроса) из текста А в тексте Б.

Корректность перевода

Анализ контента

При наличии конфликта: были ли выслушаны все стороны?

• Подобно тому, как мы собираемся автоматизированно выявлять источник информации, нужно научиться выявлять стороны конфликта (если это возможно алгоритмически).
• Просто мысль: имеет ли смысл сохранять информацию про общественно значимых персон и организации в социальном графе? Для того, чтобы понимать, от кого ждать ответную реплику?

Сравнение: как тот же инфоповод осветили другие издания?

• Выделить из текста главные тезисы или понятия, и делать поиск по этим тезисам или понятиям в других общественно значимых изданиях (о том, как их определить, поговорим отдельно).
• Более простое решение предлагать на основе анализа текста ключевые слова, по которым читатель сразу может начать искать дополнительную инфомарцию, например, в Google News.

Анализ на манипуляции

Предвзятость ньюсмейкеров

Слова-маркеры

Анализ оттенков слов

• Протестующие выходят на улицы
• Протестующие заполонили все улицы
• Протестующие ненавидят власть
• Протестующие фашисты.

Нарративы госпропаганды

• Создание базы основных нарративов, сохранённых в разных формулировках. За этой базой нужно следить, чтобы она оставалась актуальной. Делать это могут исследователи, которые профессионально занимаются изучением пропаганды.
• Анализ семантической близости между главными тезисами статьи и формулировками типичных нарративов пропаганды.

Язык вражды и войны

• жёсткий (например, прямые призывы к насилию),
• средний (например, обвинение в негативном влиянии какой-либо социальной группы на общество, государство или оправдание исторических случаев дискриминации и насилия)
• и мягкий (например, утверждение о моральных недостатках этнической группы или упоминание названий этнической группы в уничижительном контексте).

База языковых штампов госпропаганды

Анализ настроения (sentiment analysis)

Анализ качественности СМИ

Игнорирование событий

Анализ прошлых материалов от СМИ для нахождения закономерностей

• Перекос в сторону информации из государственных органов; недостаток материалов, где представлено мнение оппозиции или обычных людей;
• Использование нарративов пропаганды или языка вражды в журналистских материалах в прошлом
• Систематическое нарушение стандартов качества подачи материалов

Разница между медийными форматами

Заключение

1. Цель плагина это повысить осознанность людей при прочтении новостей, научить их определять манипуляции через выразительные и другие средства.
2. Делать это я хочу через как можно более формализованные правила. Конечно, формализовать можно далеко не всё, и очень часто мы распознаём пропаганду, что называется, в комплексе.
3. Плагин можно расширять. Например, можно создать целую систему оценки СМИ и даже отдельных журналистов, блогеров и авторов вообще (например, авторов постов в Telegram). То есть, каждый пользователь плагина сможет оценивать СМИ или автора, и эти оценки будут агрегироваться в некое подобие рейтинга для СМИ и авторов. Но это всё потом.

Приватность пользовательских данных

В вашем продукте обнаружены нарушения правил из раздела Использование разрешений, согласно которым разработчики обязаны:
Запрашивать доступ к минимальному набору возможностей, необходимому для функционирования инструментов или сервисов вашего продукта;
Если несколько разных разрешений могут обеспечивать выполнение функции, выбирать то, которое даёт минимальный доступ к личным данным или функциональности;
Не создавать задел на будущее, запрашивая разрешения, которые могут оказаться полезны для еще не реализованных инструментов или возможностей.

Cпам и реклама в магазине

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

Регулярные или грубые нарушения правил интернет-магазина Chrome могут привести к заморозке вашего аккаунта разработчика или к запрету на использование платформы.

tabs

debugger

host permission

tts

notifications

storage

Дополнение к статье, опубликованное позже

1. Убедить Google Chrome разрешить магазины со сторонними расширениями. Это позволит внести разнообразие в прежде огороженный ассортимент расширений, поставит разработчиков в более выгодные условия и снизит риск того, что ваш продукт безвозвратно снесут просто потому что.
2. Добиться со стороны администрации магазина Chrome более справедливого отношения и большей готовности вступать в контакт. От шаблонных писем с отказами, в которых информация о нарушения даётся только в самых общих чертах, страдают все и разработчики, и сотрудники компании. Тем и другим приходится зря терять время в попытках прояснить ситуацию, особенно когда кого-то отклоняют по ошибке.

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

Процесс обучения

Современные компании-разработчики стараются взять под контроль и теоретическое, и практическое обучение пользователя. Это подразумевает присутствие учителя (специалиста предметной области) в процессе обучения. Ему необходимо в режиме реального времени контролировать обучение, чтобы пользователь получил теоретические знания о работе с функционалом программы, а также закрепил их на практике.

Одной из компаний, которая занимается не только разработкой программного обеспечения, но и помогает пользователям своих решений освоить управление ими, является НПО Криста. Для этого на базе компании создан специальный учебный центр.

Автоматизация обучения

С распространением компьютерных технологий стало возможным внедрение автоматического управления процессом обучения. Т. е. контроль за практическим обучением пользователя возлагается на программу. Она представляет собой интерактивное руководство, которое направляет пользователя по функционалу приложения, подобно GPS-навигатору. Программа указывает на элементы в пользовательском интерфейсе, объясняя, что делает каждый значок или кнопка или где найти меню. Такие руководства называются интерактивными турами по функциональным возможностям программы. Специалист лишь единожды пишет программу обучающего тура, который впоследствии воспроизводится на компьютерах конечных пользователей. Обучение считается завершенным, если пользователь прошел тур от начала и до конца.

Постановка задачи

Наиболее актуально создание интерактивных туров по web-приложениям. Именно в данной сфере обновление программного продукта происходит значительно быстрее и чаще, чем при разработке десктопных приложений. Поэтому после перехода на современные web-ориентированные технологии в НПО Криста было принято решение о внедрении интерактивных туров в процесс обучения пользователя. Отсюда возникла потребность в инструменте для создания интерактивных туров по функционалу web-приложения.

При выборе инструмента, прежде всего, необходимо было учитывать, что его потенциальными пользователями являются не программисты, а специалисты предметных областей. Следовательно, разработка туров должна происходить на основе манипуляции графическими объектами, а не на языке программирования. Существующие решения, удовлетворяющие данному критерию, ориентированы на создание туров по обычным сайтам и не подходят для предприятий, занимающихся автоматизацией сложных бизнес-процессов. Также существующие решения не позволяют получить программный код созданного тура. Следовательно, нет возможности управлять его хранением. Это критично для НПО Криста, так как информационная безопасность является важным требованием к программным продуктам компании. Поэтому было принято решение разработать собственный инструмент для создания интерактивных туров по функционалу web-приложений.

Входными данными для разрабатываемой системы является загружённое в браузер web-приложение с функционалом, по которому создается тур. Выходными данными являются туры, сохранённые в реляционную базу данных под управлением PostgreSQL. Для получения входных данных необходимо, чтобы разрабатываемая программа работала в браузере. Следовательно, требуется создать web-приложения, что предполагает использование клиент-серверной технологии.

Структура системы

Инструментарий для создания туров представлен пользователю через графический интерфейс клиентской программы. Она состоит из вспомогательной и центральной подсистем. Центральная подсистема предоставляет функционал для создания кода тура, а вспомогательная подсистема обеспечивает воспроизведение тура, а также определение элементов интерфейса для вставки их в сценарий тура. Созданные туры необходимо хранить в базе данных при помощи подсистемы хранения.

Взаимодействие между клиентом и сервером происходит посредством передачи HTTP-сообщений с данными о турах в формате JSON. Обращение к БД осуществляется на языке SQL. Основным языком программирования, используемым при разработке клиентского приложения, является TypeScript. Архитектура клиента определяется использованием библиотек React и Redux. Серверное приложение разработано как Maven-проект на языке Java.

Технологические решения

Основной частью при создании туров является редактор кода тура. За его основу была взята библиотека Blockly. Она разрабатывается и поддерживается компанией Google с 2012 года. Blockly свободно распространяется вместе c исходным кодом и включает в себя графический редактор, а также генераторы кода для подготовки исполнения программы в среде web-приложения. Программы в этом редакторе создаются на визуальном языке программирования Blockly путём соединения соответствующих блоков. Существует возможность определения новых блоков с заданием их формы и генерируемого ими программного кода (подробнее). Благодаря этому редактор может быть расширен за счёт добавления блоков, реализующих логику создания тура.

Так как клиентское приложение предоставляет инструментарий для web-разработки, было принято решение добавить его в инструменты разработчика DevTools браузера Chrome в качестве расширения (подробнее: раз, два). При этом часть клиента, реализующая вспомогательную подсистему, встраивается на инспектируемую страницу web-приложения, по которому создается тур (по примеру). Связь между частями обеспечивается по схеме.

Следовательно, программа функционирует в двух окнах: в окне web-приложения и в окне DevTools. Соответствующий пользовательский интерфейс изображён ниже. В окне DevTools пользователь управляет созданием тура. На инспектируемой странице он выбирает элементы интерфейса, которые необходимо выделить, а также тестирует созданный тур.

Алгоритм работы системы

Весь пользовательский интерфейс состоит из react-компонентов. Взаимодействуя с ними, пользователь передает некоторые входные данные, при обработке которых клиент может обращаться за дополнительными услугами к серверу. В результате обработки происходит обновление внутреннего состояния клиентского приложения, в соответствии с которым меняется пользовательский интерфейс.

В зависимости от услуги, запрашиваемой у сервера, клиент передаёт параметры запроса. На их основании происходит обращение к базе данных, после чего клиентскому приложению отправляется сообщение с соответствующей информацией.

Самое первое взаимодействие между клиентом и сервером (6 7) происходит всякий раз, когда пользователь открывает вкладку с плагином (4). Тогда же происходит добавление части клиентской программы к веб-приложению, по которому создается тур (5).

Результат разработки

При создании нового тура откроется встроенный редактор Blockly, в левой части которого расположены стандартные разделы. К ним добавлен раздел Тур. Он содержит специальные графические объекты, которые позволяют, например, добавить подсказку к элементу на инспектируемой странице, затемнение вокруг элемента, ожидание события и прочие возможности.

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

При запуске воспроизведения в окно web-приложения, по которому создавался тур, загружается и выполняется JavaScript-код тура. При этом на странице появляется навигационная панель для управления воспроизведением тура, а также описанные в сценарии элементы. В представленном примере на первом шаге отрисуется пульсирующий указатель на элемент интерфейса, нажатие на который запустит воспроизведение следующего шага тура.

Несмотря на то что разработанное приложение ориентировано на программные продукты компании НПО Криста, оно может использоваться для создания туров по любому web-приложению.

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

1. В MESH схеме каждый из участников посылает и получает N-1 потоков данных, где N размер группы. Т.е. требования на upload speed для каждого участника в MESH схеме увеличиваются с ростом группы. Тогда как в SFU схеме каждый участник всегда посылает только один поток. Не у каждого участника скорость соединения с сетью потянет посылку N-1 потоков.
2. К сожалению, в MESH схеме браузер делает аудио-видео сжатие на каждый посылаемый поток. А это, как мы знаем, самы ресурсо-затратный процесс. В MESH схеме, приведенной выше, браузер каждого участника будеть сжимать видео VP8/VP9/H264 кодеком 4 раза. Это вызвано требованием WebRTC к адаптации качества данных к качеству канала если связь не очень, то компрессия станет посильнее. Что есть хорошо, но влечет необходимость сжимать независимо на каждый канал (PeerConnection). Увы, на обычной машине браузер при сжатии 720p видео уже занимает 30% процессора, т.е больше трех каналов не потянет.

• Видео конференции с множеством участников (всеми горячо любимый Zoom использует WebRTC сервер, как и все подобные сервисы).
• Видео наблюдение в реальном времени, когда от одной камеры видео посылается нескольким зрителям и записывающим устройствам. Системы безопасности, мониторинга.
• Интерактивные системы, такие как: интернет-аукционы, обучающие и другие веб-приложения, где требуется низкая задержка аудио/видео.

1. Сделать его самим, пользуясь открытым API. Самый известный из них это Google c++ WebRTC API. Также можно использовать GStreamer API. Интересна имплементация на Go: Pion WebRTC. Вам понадобятся квалифицированные c++ программисты и очень много терпения и времени на отладку. Про трудности этого подхода я подробно писал в своей предыдущей статье.
2. Взять уже готовый бесплатный сервер с открытым кодом. Заслуживают упоминания Ant Media Server, Kurento, Janus, Jitsi. Эти сервера вполне подойдут для небольших проектов, хотя код там не оптимизирован, не оттестирован, встречаются баги. На github есть множество других проектов, еще более экспериментальных и сырых. Чтобы оптимизировать, заточить и починить баги, нужны, см. выше, собственные квалифицированные c++ программисты. Или нужно просить разработчиков этих продуктов все для вас заточить. Что делает продукт уже не бесплатным, а весьма дорогостоящим.
3. Купить лицензию на платный сервер. Как правило, более законченный, надежный продукт и бесплатная поддержка. В этой категории следует отметить Red5 Pro, Flashphoner и Unreal Media Server.

• www.infinitelooper.com/?v=fsD1zoI7NYo#/308;319
• youxube.com
• looptube.io
• youtubeloop.net

• Looper for YouTube расширение для гуглхром(удобно зациклить фрагмент, пример: https://www.youtube.com/watch?v=qmk_kc71Fd4&start=01:39&end=03:21&loop=2)

• Video Speed Controller расширение для гуглхром
  (можно задать горячие клавиша на скорость, можно выставить временную точку начало фрагмента и перейти назад когда надо)
• Magic Actions for YouTube расширение для гуглхром
  (более 1 000 000 пользователей уже говорит, о интересности расширения, а фрагменты можно выделять кликая то левой, то правой кнопкой но вот сохранение этих фрагментов где-то в запросе не обнаружил)

• перемотка на 1 секунду назад, чтобы просто прослушать только что сказанное слово;
• возможность изменить скорость видео быстро (замедлить для иностранных языков, убыстрить для новостей);
• хорошо бы пометить какое-то время и потом быстро перейти на него.

• задание многих фрагментов, чтобы их циклически проигрывать;
• возможность задать кол. циклов повторов для каждого фрагмента (какой-то бесконечно, а где-то и достаточно 1 раза);
• и обязательно возможность поделиться этой ссылкой, чтобы учащийся уже не искал эти фрагменты, а мог только запустить на проигрывание.

• если видео только для просмотра на ютюб, то вы такое видео не посмотрите на этом сайте;
• хоть и может работать в мобильном браузере (добавлены кнопки поверх области видео), но изначально создавался под десктопное применение и лучше пользоваться на большом экране;
• реклама ютюба никак не блокируется в нем (в расширениях вроде браузер дает такое право, но я не разработчик их);
• очень много фрагментов скорее всего не получится вписать просто из-за ограничения длины GET-запроса;
• и еще 1000 недостатков на ваше усмотрение и доделку.

• код можно спокойно приспособить и для локальной странички HTML и высылать учащемуся без привязки к какому-то сайту;
• много кнопок быстрее позволяют найти нужный функционал;
• горячие клавиши почти подобны как в ютюбе, но есть и отличия (см. ссылку);
• возможность задать свой порядок проигрывания фрагментов (допустим слова иностранного языка даны по алфавиту, вы же хотите их дать ограниченное количество и по своей категории).

• заучивать частями, для стихотворения один столбик можно записать как 1 фрагмент и запустить как вечный цикл (0 раз) и да, не забываем об отдыхе каждые 10 минут;
• для иностранных языков желательно не более предложения под 1 фрагмент и возможно понизить скорость до 0.85 (идеально для довольно чистого и незаметного замедления);
• длинные видео разбивать на части по 5-7 минут не более и делаем перерывы после каждого такого блока на те же 5 минут (отвлечься от получения какой-либо информации вообще);
• вы должны уже заученное успеть внутренне проговорить (вспомнить) раньше проигрывания на видео, а если вы думаете, что фоном оно само запомнится, то это бывает совсем не так;
• не учить постоянно и долго одно и тоже, делайте большие перерывы в час и более;
• если болит голова от повторов, то просто выключайте это и идите спать!

В конце октября, после волны статей от хайповых авторов, я написал небольшое расширение для Хрома которое позволяет прятать нежелательные статьи из ленты. Расширение было встречено очень тепло (+285, 53_000 просмотров и 70+ звезд на гитхаб) и я даже опубликовал его в Chrome Extension Store. Потом был опрос о наиболее желаемой следующей фиче и самой востребованной (129 голосов) оказалась поддержка Firefox. И вот, спустя месяц, расширение опубликовано в Firefox Addons.

Кому интересно по каким граблям пришлось потоптаться, прошу под кат!

Про Firefox

Признаюсь честно, поддержка FF далась мне не с первого раза. Несмотря на то, что в результате изменения были минимальными, в какой-то момент я уже думал сдаться, потому что все шло не так.

Сначала тестовый код не хотел даже загружаться в Firefox из-за неверного формата манифеста. Пришлось гуглить и пробовать несколько раз, причем даже манифест из официального примера работать не захотел. Потом, после того как Firefox вдруг принял файлы, он, естественно, отказался их запускать, потому что "файлы не проверены, подписи не сделаны, работать не буду". В гугле нашелся специальный флаг -xpinstall.signatures.required = false который нужно выставить что бы разрешить загрузку расширений без подписи, но ни в стабильной версии ни в бете он не работает. Помогло только в Nightly.

Потом, поскольку мне нужно использовать хранилище что-бы хранить настройки, Firefox потребовал дать ему id (ставится в "browser_specific_settings":{"gecko": {"id":"{GUID}"}})). На что Chrome тут же заявил, что свойство browser_specific_settings он не знает и выдал предупреждение. Это исправить так и не удалось, но все вроде бы работает.

Следом возникли проблемы со страницей настроек. Если в Firefox она отображалась красиво, то в Chrome в виде отдельного окна. Полечилось с помощью изменения options в манифесте на "options_ui": {"page": "options.html", pen_in_tab": true}

После чего все наконец то запустилось, и я решил, что наконец-то всех победил. Но не тут-то было. Когда вы грузите бандл, Firefox автоматически запускает линтинг кода и если что-то ему не так, отказывает в загрузке для проверки. В моем случае не так было использования свойств классов (что не страшно и легко лечится), а также использование es6 модулей, что, внезапно, лечится гораздо хуже. Сначала я думал свалить все в один файл (благо размер кодовой базы просто смешной), но потом решил "не комильфо" и настроил WebPack для билда (все равно давно хотел посмотреть на 4ый вебпак)

Кстати, несмотря на то что теперь я публикую собранные артефакты, вы все еще можете использовать код как есть, прямо из src папки. Так что все осталось так же прозрачно, как и было. Мне по-прежнему можно не верить и пользоваться простым и понятным кодом из репозитория.

После WebPack-а все пошло почти гладко. Пришлось еще немного помучаться с описанием расширения (Огнелис подхватил мою дефолтную локаль), но это уже были мелочи.

В результате, 20.12.2020 я отправил расширение на ревью (и был 63 в очереди), а уже 21.12.2020 получил письмо счастья о том, что оно одобрено к публикации. Спасибо команде ревьверов за оперативность.

Новый функционал

Кроме публикации в Firefox я решил добавить еще одну фичу о которой тоже просили (ledascho) блокировка хаба по имени. Сейчас нет возможности отписаться от конкретного хаба и новая возможность это устраняет. Эта функциональность позволяет полностью скрыть статью, даже если она принадлежит и другим хабам на которые вы подписаны.

Итого, на сегодняшний день реализована блокировка:

• По нику автора
• По имени компании
• По имени хаба

UI остался прежним, одно поле для всех.

Если вы не используете маркет, возможно стоит выкачать свежую версию с GitHub, тем более что в последний релиз так же вошли исправления мелких, но досадных багов (например, не работающий клик на кнопке, если идеально попасть по SVG элементу).

А, да чуть не забыл. Была идея как-то трекать авторов которых чаще всего блокируют, но это потребовало бы собирать и отправлять информацию об использовании приложения, чего я делать не хочу. Во-первых, это благодатная почва для паранойи, во-вторых, более серьезное ревью от маркета. Поэтому, если вы хотите поделиться своим конфигом вы можете сделать пулл реквест сюда, там есть пример.

И немного статистики

Сейчас у расширения 68 :) пользователей и три оценки. Так что мои опасения что расширение может хоть как-нибудь повлиять на сам Хабр и навредить ему оказались полностью беспочвенными. 40 пользователей из России, 11 из Украины, и еще по нескольку из Казахстана, Узбекистана, Чехии, Штатов, Британии и Израиля.

На этом все. Добавлять новые фичи я пока не планирую (в этом году точно, у меня скоро отпуск в котором я хочу наконец-то довести до ума еще один пет проект об измерении производительности веб-сайтов

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

Ссылки:

• Firefox
• Chrome
• Repo

Всех с наступающими праздниками, и хорошего нового года!
P.S. Спасибо Sharon McCutcheon за КПДВ Mozilla Corporation за их лого