Ragtime Kitty

getComputedStyleвозвращает значение в формате 'color(srgb 0.5 0.5 1)'

Выловить отсюда 3 числа регексом, каждое умножить на 255 и округлить, вот собственно они и есть.
Но это, насколько я понимаю, для "in srgb". У тебя ведь такие?

const limit = (min, max) => value => Math.min(max, Math.max(min, value));
const progressLimit = limit(0, 100);

$('#xp').text(this.xp + '%').css({width: progressLimit(this.xp) + '%'});

min-content
grid-template-columns: min-content repeat(3, 1fr);
https://jsfiddle.net/y20vnap1/

Как отфильтровать массив:

const filterArrByObj = (arr, obj) =>
  Object.entries(obj).reduce((arr, [ k, v ]) => {
    return arr.filter(Array.isArray(v)
      ? n => v.includes(n[k])
//           !v.length || v.includes(n[k]), если при пустом массиве допустимо любое значение
      : n => v === n[k]
//           n[k].includes(v), если точное соответствие не нужно
    );
  }, arr);

Отфильтрованные данные оформляете в виде вычисляемого свойства:

computed: {
  filteredData() {
    return filterArrByObj(this.data, this.filters);
  },
},

Значение которого используете при рендеринге таблицы вместо исходных данных:

<tr v-for="n in filteredData">
  ...

// PREVENT CLIPBOARD COPYING
document.querySelector('body').addEventListener("copy", function(evt){
    if(evt.target.nodeName === "A" && (evt.target.href.indexOf("mailto:") === 0 || evt.target.href.indexOf("tel:") === 0)) return;

    // Change the copied text if you want
    evt.clipboardData.setData("text/plain", "Copying is not allowed on this webpage");

    // Prevent the default copy action
    evt.preventDefault();
}, false);

Попробуйте не менять атрибут src, а целиком заменить сам элемент сразу по готовности документа:

document.addEventListener('DOMContentLoaded', function() {
	document.querySelector('.bmenu__theme > img').outerHTML = '<img alt="Зарплаты айтишников" src="'+chrome.extension.getURL('/images/1.png')+'" style="position:relative; vertical-align: middle; top: -2px; margin-right: 4px;" width="20">';
});

В манифесте расширения на всякий случай укажите порядок загрузки своего скрипта:

{
    "matches": ["https://qna.habr.com/*"],
    "css": ["style.css"],
    "js": ["script.js"],
    "run_at": "document_start"
}

При run_at равной document_start ваш скрипт будет запущен еще до готовности документа.

Сравнивать можно непосредственно 2 даты:

let date1 = new Date("2020-07-30T07:09:58.999+0300");
let date2 = new Date("2020-07-30T07:09:58.998+0300");
console.log(date1>date2); // => true
console.log(date1<date2); // => false

, либо приведением их к unix_timestamp методом .getTime()

let date1 = new Date("2020-07-30T07:09:58.999+0300");
let date2 = new Date("2020-07-30T07:09:58.998+0300");
console.log(date1.getTime()>date2.getTime()); // => true
console.log(date1.getTime()<date2.getTime()); // => false

В дате
new Date("2020-07-30T07:09:58.999+0300");

2020   - год
07     - месяц (июль)
30     - число
07     - часов
09     - минут
58     - секунд
998    - милисекунд
+0300  - часовой пояс (МСК +3:00)

console.log((new Date("2020-07-30T07:09:58.999+0300")).getTime())
      //  => 1596082198999

Также можно сравнивать непосредственно строки:

let str1 = "2020-07-30T07:09:58.999+0300";
let str2 = "2020-07-30T07:09:58.998+0300";
console.log(str1>str2); // => true
console.log(str1<str2); // => false

Для работы с полями ввода есть набор событий:
1. focus - пользователь поставил фокус на поле ввода.
2. blur - пользователь убрал фокус с элемента вода.
3. input - пользователь как-то что-то ввел. Это лучше, чем keyup, ибо не надо проверки keyCode, второе потому что пользователь может в поле вставить текст, что тогда будет с Вашим keyUp? Событие input срабатывает каждый раз, как пользователь сделал изменение в поле ввода.
4. change - пользователь ввел данные и убрал фокус с поля ввода, то есть это input + blur. Событие происходит не так часто, как input, но и не заставляет проверять value на изменение, как это придется делать при blur.
5. submit - срабатывает на всей форме, при попытке отправить данные, в данной задаче скорее не интересное событие.

Для живого поиска логично использовать input, по которому надо отправить текущее value через ajax на сервер и далее ответ куда-то распечатать. Вопрос в другом, ведь событие срабатывает довольно часто, и кто-то печатает так быстро, что и запрос-ответ не успеет, поэтому логично сделать тут debounce с задержкой в приблизительно 300мс, чтобы отправка/получение сработало когда пользователь притормозил в наборе текста или вообще прекратил ввод.

Вот написал демку для примера.
Ну основные функции

/// (начальный х, начальный у,конечный х,конечный у, минимальная длина линии,макс длинная линии, минимальная угол отклонения, макс угол отклонение) вернет массив точек
function generateLines(xStart,yStart,xEnd,yEnd, lenRandMin,lenRandMax,angleDeviationMin, angleDeviationMax ){
	var arrayPos = [[xStart,yStart]];
  var xCur = xStart;
  var yCur = yStart;
  angleDeviationMin = (angleDeviationMin * Math.PI)/180;//в радианы
  angleDeviationMax = (angleDeviationMax * Math.PI)/180;//в радианы
  
  var deviationPos = false;
  do{
  	if(getDist(xCur,yCur,xEnd,yEnd) <= lenRandMax){
      xCur = xEnd;
      yCur = yEnd;
    }
    else{
    	var len = rand(lenRandMin,lenRandMax);
      var angle = getAngle(xCur,yCur,xEnd,yEnd) + (deviationPos?rand(angleDeviationMin,angleDeviationMax):-rand(angleDeviationMin,angleDeviationMax));
    	xCur += Math.cos(angle) * len;
      yCur += Math.sin(angle) * len;
    }
    arrayPos.push([xCur,yCur]);
    deviationPos = !deviationPos;
  }while(!(xCur == xEnd && yCur == yEnd));
  return arrayPos;
}
//Получить угол между двумя точками
function getAngle(dx,dy,dx1,dy1){
	return Math.atan2(dy - dy1,dx - dx1) + Math.PI;
}
///Получить растояние между двумя точками
     function getDist(x,y,x1,y1){
         return Math.sqrt(Math.pow(x1 - x,2)+Math.pow(y1-y,2));
     }
//Получить рандомное от min до max
function rand(min, max) {
  return min + Math.random() * (max - min)
}

Накидал пример через getImageData, putImageData.
P.S. Если будете рендерить изображения, они должны быть на вашем домене чтобы не столкнуться с проблемой Access-Control-Allow-Origin

но нормального ничего не нашёл.

нормальное - понятие растяжимое.
https://developer.mozilla.org кладезь отличной информации.

https://developer.mozilla.org/en-US/docs/Web/CSS/C...
https://developer.mozilla.org/en-US/docs/Web/CSS/C...
https://css-tricks.com/snippets/css/complete-guide...

Это в форме игры, но вполне можно потренироваться для лучшего понимания:
https://cssgridgarden.com/
https://flexboxfroggy.com/

Прежде всего, огромное спасибо Ragtime Kitty за юмор))) Как говорится, какой вопрос, такой и ответ...
А сейчас, если честно, то у вас на сайте сейчас горизонтальное меню и скорее всего по верстке вертикальное меню туда не подойдет.
Что касается самого меню, то поверьте тут ВП ни причем. Скорее тут важна верстка. Соответственно, нужны знания html css js. Если вам сложно разбираться с этими языками и писать свой код, то можете попробовать готовые плагины или сниппеты кодов.
Вот, вертикальное меню плагин - https://wordpress.org/plugins/bellows-accordion-menu
Далее вы можете использовать Uber Menu. Универсальный плагин.

Вот, готовые сниппеты - https://bootsnipp.com/search?q=vertical+menu
Вот, еще примеры - https://freebiesupply.com/blog/css-menus/
Правда, тут вам все-таки понадобятся знания кодинга, в частности Walker (смотрите WP Codex - Walker) + html + css + js

Для начала я бы определил границы применяемости: что, например, будет, если видео будет 1000. Значит сразу показываем только несколько, остальные доступны по ссылке. В таком случае можно вообще расположить 10 картинок, обозначающие видео, по кругу через position: absolute. Но, очевидно, для универа такое не подойдет.

Пусть тогда нам надо расположить от 6 до 20 картинок по кругу (меньше 6 - круг будет не очень-то круглый, больше 20 - картинки слишком мелкие). В таком случае просто рассчитываем через JS местоположение и указываем его через position:absolute.
Структура HTML:

<div id="wrap">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
</div>

CSS просто чтобы было наглядно сразу посмотреть:

#wrap {position: absolute; }
#wrap img {width: 30px; height: 30px; background:#333; position: absolute; }

и, собственно, сам скрипт на JS и jQuery:

var num = 20; // Число картинок
var wrap = 400; // Размер "холста" для расположения картинок
var radius = 200; // Радиус нашего круга

$(document).ready(function() {
  for (i=0;i<num; i++){
    var f = 2 / num * i * Math.PI;  // Рассчитываем угол каждой картинки в радианах
    var left = wrap + radius * Math.sin(f) + 'px';
    var top = wrap + radius * Math.cos(f) + 'px';
    $('#wrap img').eq(i).css({'top':top,'left':left}); // Устанавливаем значения каждой картинке
  }
});

Ну и вам, наверно, надо будет еще добавить функцию для определения числа картинок. Ну и при клике на картинку открывается видео (это уже как вы сами решите, можно и модальное окно).

const ﹩ = document.querySelector.bind(document) // вау, почти jQuery! с одной строчки!
// Кто-то может повестись и знатно вынести себе моск:)

﹩('#nav-trigger').onclick =ௐ=> {
   ﹩('#menu-navigation').classList.add('active');
   ﹩('#menu-close').classList.add('active');
}

_{(при написании этого кода ни один зомби не пострадал)}

Еще можно сделать так:

HTMLElement.prototype.addClass = function(className) { this.classList.add(className) }

тогда получится
﹩('#menu-navigation').addClass('active');
_{но возможно вас кто-то проклянет за модификацию прототипов}

Ну и как подсказывает Антон Швец можно еще улучшить, чтобы возвращал не только один элемент, но и массив элементов

const ﹩ = selector => (list => list.length > 1 ? [...list] : list[0])(document.querySelectorAll(selector))

https://jsfiddle.net/pL2jxnds/