Что мне следует изменить в своем манифесте, чтобы мое расширение (переводчик) работало? ⇐ CSS

[Гость]

Я почти уверен, что текущий код, который я написал, хорош, но расширение ничего не делает, когда я пытаюсь навести курсор на слово.
Мое расширение должно:
Когда я навожу курсор на слово, оно показывает мне слово с его переводом. Затем мне нужно нажать кнопку во всплывающем окне, чтобы импортировать предложение и перевести слово в anki.
На данный момент у меня есть файлы манифеста, JavaScript и CSS, закодированные следующим образом:
{
"name": "Korean To anki",
"version": "1.0",
"description": "Show translation of Korean words when hovered and export to Anki deck the sentence and the word translated.",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
},
"permissions": ["storage", "activeTab", "contextMenus"],
"host_permissions": ["http://localhost:8765/"],
"web_accessible_resources": [
{
"resources": ["contentScript.js", "styles.css"],
"matches": [""]
}
]
}

для CSS:
.kt-hover-popup {
position: absolute;
display: none;
background-color: white;
border: 1px solid black;
padding: 5px;
font-size: 14px;
z-index: 1000;
}

для jsp>
let popup = null;
const api_key = ""; // Replace with your API key

function createPopup() {
popup = document.createElement("div");
popup.className = "kt-hover-popup";
document.body.appendChild(popup);
}

function showPopup(x, y, text) {
popup.textContent = text;
popup.style.left = `${x}px`;
popup.style.top = `${y}px`;
popup.style.display = "block";
}

function hidePopup() {
popup.style.display = "none";
}

function addToAnkiDeck(word, translation, sentence) {
const note = {
deckName: "한국어",
modelName: "Basic",
fields: {
Front: sentence,
Back: translation,
Sentence: sentence,
},
options: {
allowDuplicate: false,
},
tags: ["Korean"],
};

fetch("http://localhost:8765", {
method: "POST",
body: JSON.stringify({
action: "addNote",
version: 6,
params: {
note,
},
}),
});
}

function getKoreanWord(contextSentence) {
const koreanRegex = /[\uac00-\ud7a3]+/g; // Matches Korean characters
const match = contextSentence.match(koreanRegex);
return match ? match[0] : null; // Returns the first match or null if no match found
}

function getTranslation(word, contextSentence) {
const apiUrl = `https://api-free.deepl.com/v2/translate`;
const data = new URLSearchParams();
data.append("source", "ko");
data.append("target", "en");
data.append("text", word);
data.append("auth_key", api_key);

return fetch(apiUrl, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: data,
})
.then((response) => response.json())
.then((data) => {
const translation =
data.translations && data.translations[0] && data.translations[0].text;
addToAnkiDeck(word, translation, contextSentence);
return translation;
});
}

document.addEventListener("DOMContentLoaded", () => {
console.log("DOMContentLoaded");
createPopup();

document.addEventListener("mouseover", (event) => {
console.log("mouseover");
const target = event.target;
if (target.tagName === "P" || target.tagName === "SPAN") {
const contextSentence = target.closest("div").textContent;
console.log("contextSentence:", contextSentence);
const koreanWord = getKoreanWord(contextSentence);

if (koreanWord) {
console.log("koreanWord:", koreanWord);
getTranslation(koreanWord, contextSentence).then((translation) => {
console.log("translation:", translation);
showPopup(event.pageX, event.pageY, translation);
});
}
}
});

document.addEventListener("mouseout", () => {
console.log("mouseout");
hidePopup();
});
});


Подробнее здесь: https://stackoverflow.com/questions/758 ... lator-work