Eugene Chefranov

То есть наличие опечатки в названиях классов вас вообще не смущают?

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

arr.forEach((e)=>{
  port.postMessage({
                url: e['url'],
                id: e['id'],
            });
})

не совсем понял в чем проблема, но может как то так:

myArrObjects.forEach(item => {
  port.postMessage({
    url: item.url,
    id: item.id,
  });
});

`throw new SomeError()`

} else {
        // здесь прервать fetch и не пускать в следующий then
        throw new Error(response)
}

[...document.querySelectorAll('.table__checkbox input')].some(input => input.checked)

если это true, то хоть один выбран

https://codepen.io/anon/pen/zbJoBO

X-Forwarded-For это HTTP заголовок. На удаленном сайте могут просто игнорировать его, используя просто REMOTE_ADDR или стандартный заголовок "forwarded", поскольку X-Forwarded-For на текущий момент все еще не является стандартом.

Поэтому VPN - самый надежный вариант.

$(document).ready(function() {
  var hash = window.location.hash;
  if(hash) {
    switchTab(hash);
  }
  $('a.local').click(function() {
    switchTab(this.href.replace(/.*#/, '#'));
    return false;
  });
});

function switchTab(link)
{
  $($('a[href="' + link + '"]')[0]).trigger('click');
}

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

Используйте линейный градиент, что-то вроде такого:

div {
    background: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    background-size: 100% 2px;
    background-position: bottom;
    background-repeat: no-repeat;
}

Потому что в литерале объекта вы указываете непосредственно имя свойства (строка 'name' в данном случае). Сделайте так:
chrome.storage.local.set({[name]: data});
Вычисляемые имена свойств

Вот так нужно

function save(name, data) {
    chrome.storage.local.set({[name]: data});
}

иначе name у вас не динамическое название свойства, а просто 'name'

const players_online = '{"response":{"player_count":1080,"result":1}}';
const user = JSON.parse(players_online);
console.log(user.response.player_count);

var url = window.location.href;
var final = url.split("/").reverse()[1];

let sections = 'http://mysite.com/category/post/'.split('/');
let lastSection = sections.pop() || sections.pop();

еще можно так

let sections = 'http://mysite.com/category/post/'.split('/').filter(x => x.length > 0);
let last = sections.pop();

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

Что именно стилизовать? кнопку Play? делаете поверх блок типо overlay с кнопкой в центре абсолютом.
А потом по нажатию на кнопку через JS запускаете видео и скрываете overlay.

Называется коллаж. Вот пример плагина https://github.com/ed-lea/jquery-collagePlus