Я не могу использовать библиотеку Kuroshiro в своем расширении Chrome
Я изучаю Javascript и думал, что смогу сделать небольшой проект, но у меня так много ошибок, что я понятия не имею, что не так с моим кодом. Я пытаюсь создать расширение для Chrome, которое добавляет фуригану в японский текст, для этого я использую библиотеку Kuroshiro.
Я считаю, что установил его правильно, и он работает, когда я запускаю его локально. Но когда я загружаю его как расширение, оно, похоже, не работает. Вот мой манифест.json,
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "popup.html",
"default_icon": "hello_extensions.png"
},
"permissions": ["activeTab", "scripting"],
"web_accessible_resources": [
{
"resources": [
"lib/kuroshiro.min.js","lib/kuroshiro-analyzer-kuromoji.min.js","add_furigana.js","content3.js","dict/*"
],
"matches": [
"<all_urls>"
]
}
],
"content_scripts": [
{
"js": [
"content3.js"
],
"matches": [
"<all_urls>"
]
}
]
}
А вот мой content3.js,
// Function to inject Kuroshiro and its dependencies into the web page
function injectKuroshiro() {
// Create script elements for Kuroshiro and its dependencies
const kuroshiroScript = document.createElement('script');
kuroshiroScript.src = chrome.runtime.getURL('lib/kuroshiro.min.js');
kuroshiroScript.onload = function() {
const analyzerScript = document.createElement('script');
analyzerScript.src = chrome.runtime.getURL('lib/kuroshiro-analyzer-kuromoji.min.js');
analyzerScript.onload = function() {
const add_furiganaScript = document.createElement('script');
add_furiganaScript.src = chrome.runtime.getURL('add_furigana.js');
document.head.appendChild(add_furiganaScript);
};
document.head.appendChild(analyzerScript);
};
document.head.appendChild(kuroshiroScript);
}
injectKuroshiro();
и add_furigana.js,
async function initializeKuroshiro() {
const kuroshiro = new Kuroshiro();
try {
// Initialize Kuroshiro with the Kuromoji analyzer
const dictPath = chrome.runtime.getURL('dict/'); // Assuming 'dict' is your folder name
await kuroshiro.init(new KuromojiAnalyzer({ dicPath: dictPath }));
// Convert the given text to hiragana
const result = await kuroshiro.convert("感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高！", { to: "hiragana" });
// Output the converted text
console.info(result);
} catch (err) {
console.error("Kuroshiro initialization failed:", err);
}
}
initializeKuroshiro();
Мне выдает вот такую ошибку,
И если я удалю dictPath, я получу эту ошибку
Я уверен, что у меня есть правильные файлы dict, но я понятия не имею, что является причиной этого, и чатгпт вообще не помогает.
И что странно, это работает в popup.html.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<script src = "lib/kuroshiro.min.js"></script>
<script src = "lib/kuroshiro-analyzer-kuromoji.min.js"></script>
<script src = "add_furigana.js"></script>
</head>
<body>
</body>
</html>
Извините, если это глупый вопрос, но что мне здесь не хватает?
Итак, если я правильно понимаю, сценарии контента не могут получить доступ к другим сценариям, поэтому мой content3.js не может видеть файлы библиотеки, а сценарии, загруженные на страницу (контекст страницы), не имеют доступа к API Chrome, поэтому Я получаю сообщение об ошибке с getURL. Чтобы решить эту проблему, мне нужны события DOM, это правильно? Но тогда почему popup.html работает?
getURL, вызванный content3.js, выполнен успешно. getURL, вызванный add_furigana.js, завершается с ошибкой. Поэтому я думаю, что было бы лучше включить обработку add_furigana.js в content3.js.
Если я это сделаю, я получу ошибку "Kuroshiro is not defined". И если я распечатаю путь к диктовке, используя console.info(chrome.runtime.getURL('dict/')) в content3.js, и вручную скопирую его в add_furigana.js, я все равно получу ошибку «отсутствующие файлы».
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Удалите content3.js и загрузите kuroshiro.min.js, kuroshiro-analyzer-kuromoji.min.js и add_furigana.js в качестве сценариев контента.
"web_accessible_resources": [
{
"resources": [
"dict/*"
],
"matches": [
"<all_urls>"
]
}
],
"content_scripts": [
{
"js": [
"lib/kuroshiro.min.js",
"lib/kuroshiro-analyzer-kuromoji.min.js",
"add_furigana.js"
],
"matches": [
"<all_urls>"
]
}
]
Я мог бы поклясться, что попробовал это, и это не сработало, но я попробовал сейчас, и это работает, спасибо.
Возможно, это вам поможет: stackoverflow.com/questions/27207129/…