Функция HIghlight не работает в расширении Chrome ⇐ CSS

[Anonymous]

Я работаю над расширением Chrome, которое выделяет на веб-странице заранее выбранные химические вещества. Однако когда я активирую расширение, оно не выделяет их синим цветом, как я указал в коде. Пожалуйста, сообщите, что происходит и почему моя программа не выделяет автоматически химические вещества на веб-странице.
Файл Content.js
const chemicals = {
1: {
English: ["Coconut butter"],
Japanese: ["ココナッツバター"],
Korean: ["코코넛 버터"]
},
2: {
English: ["Coconut oil"],
Japanese: ["ココナッツオイル"],
Korean: ["코코넛 오일"]
},
3: {
English: ["talc"],
Japanese: ["タルク"],
Korean: ["활석"]
},
4: {
English: ["mica"],
Japanese: ["雲母"],
Korean: ["운모"]
},
5: {
English: ["alcohol"],
Japanese: ["アルコール"],
Korean: ["술"]
}
};

let activeHighlights = [];

function highlightText(matches) {
matches.forEach((match) => {
const span = document.createElement("span");
span.className = "highlight";
span.textContent = match.textContent;
match.replaceWith(span);
activeHighlights.push(span);
});
}

chrome.runtime.onMessage.addListener((message) => {
if (message.type === "highlight") {
clearHighlights();
const { levels, languages, customTerm } = message.data;

const regexParts = [];
levels.forEach((level) => {
languages.forEach((lang) => {
if (chemicals[level][lang]) {
regexParts.push(...chemicals[level][lang]);
}
});
});

if (customTerm) regexParts.push(customTerm);

const regex = new RegExp(`\\b(${regexParts.join("|")})\\b`, "gi");
const matches = Array.from(document.body.querySelectorAll("*:not(script):not(style)"))
.flatMap((node) => Array.from(node.childNodes).filter((child) => child.nodeType === 3))
.filter((node) => regex.test(node.textContent));

highlightText(matches);
}

if (message.type === "clear") {
clearHighlights();
}
});

function clearHighlights() {
activeHighlights.forEach((span) => {
const textNode = document.createTextNode(span.textContent);
span.replaceWith(textNode);
});
activeHighlights = [];
}


Style.css
body {
font-family: Arial, sans-serif;
}

#container {
text-align: center;
padding: 10px;
}

button {
margin: 5px;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}

button.selected {
background-color: #007bff;
color: white;
}

button.off {
background-color: #ccc;
color: #666;
}

#activateButton {
background-color: #007bff;
color: white;
}

#activateButton.active {
background-color: #28a745;
}

.highlight {
background-color: blue;
color: white;
font-weight: bold;
}



Подробнее здесь: https://stackoverflow.com/questions/793 ... -extension