Как редактировать псевдоклассы веб-страницы с помощью Javascript?

Я пытаюсь создать расширение Chrome, которое «размывает» серию изображений на веб-странице. Я очень новичок во всем этом, и я просто хотел знать, на правильном ли я пути.

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

<div class="Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.3)::a Scale(1.2)::a--s Blur(12px)::a">

Чтобы изображение не было размытым, псевдокласс Blur(12px) должен быть изменен на Blur(0px). Я не получаю никаких результатов от того, что я пробовал, но я чувствую, что моя логика верна. Все, что я хочу, чтобы расширение делало, это автоматизировало процесс использования «Inspect Element» для редактирования страницы.

var profilePic = document.getElementsByClassName("Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.3)::a Scale(1.2)::a--s Blur(12px)::a");
    for(var i = 0; i < profilePic.length(); i++) {
        profilePic[i].classList.remove("Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.3)::a Scale(1.2)::a--s Blur(12px)::a");
        profilePic[i].classList.add("Bdrs(8px) Bgz(cv) Bgp(c) Ov(h) StretchedBox Ir(p) Cnt($blank)::a StretchedBox::a Bg($inherit)::a Scale(1.0)::a Scale(1.0)::a--s Blur(0px)::a");
    }

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