Почему мои переменные JavaScript не определены, когда я загружаю их как расширение?

Question

Мой код JavaScript отлично работает, когда он вставляется вручную в консоль браузера.Однако всякий раз, когда я загружаю свой код в качестве расширения, в отчете об ошибке говорится, что моя переменная ratingPair не определена.Если я сначала попытаюсь объявить свою переменную 'views', то она тоже будет неопределенной.

Я пробовал использовать браузеры Firefox и Chrome, разные компьютеры и отключать другие расширения.

ratingRatio.js

let ratingPair = document.querySelectorAll("yt-formatted-string.ytd-toggle-button-renderer");

// total = likes + dislikes
let total = Number(ratingPair[0].ariaLabel.replace(/\D/g,'')) +
            Number(ratingPair[1].ariaLabel.replace(/\D/g,''));

let views = Number(document.querySelector(".view-count").innerHTML.replace(/\D/g,''));

if (total)
    document.querySelector(".view-count").innerHTML += " 1/" + Math.round(views/total);
else
    document.querySelector(".view-count").innerHTML += " NA";

manifest.json

{
  "description": "Displays the ratings/views ratio on Youtube; ratingRatio = (likes + dislikes)/views",
  "manifest_version": 2,
  "name": "ratingRatio",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/watch*"],
      "js": ["ratingRatio.js"]
    }
  ]
}

Соотношение должно добавляться рядом с представлениями.Например, если видео имеет 20 395 просмотров, 475 лайков и 10 дислайков, мы можем вычислить соотношение следующим образом:

(475 + 10) / 20,395 ≈ 1/42

Таким образом,ниже видео должно читаться "20 395 просмотров 1/42"