I’m learning Javascript and I thought I can make a small project but I’m having so many errors I have no idea what is wrong with my code. I’m trying to make a chrome extension that adds furigana to a japanese text, for this I’m using Kuroshiro library.
I believe I installed it correctly and it works when I run it locally. But when I upload it as an extension it doesn’t seem to work. Here is my manifest.json,
<code>{
"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>"
]
}
]
}
</code>
<code>{
"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>"
]
}
]
}
</code>
{
"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>"
]
}
]
}
And here is my content3.js,
<code>// 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();
</code>
<code>// 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();
</code>
// 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();
and add_furigana.js,
<code>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.log(result);
} catch (err) {
console.error("Kuroshiro initialization failed:", err);
}
}
initializeKuroshiro();
</code>
<code>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.log(result);
} catch (err) {
console.error("Kuroshiro initialization failed:", err);
}
}
initializeKuroshiro();
</code>
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.log(result);
} catch (err) {
console.error("Kuroshiro initialization failed:", err);
}
}
initializeKuroshiro();
It gives me this error,
And if I remove dictPath I get this error
I’m sure I have the right dict files, but I have no idea what causes this, and chatgpt doesn’t help at all.
And the weird thing is it works in popup.html
<code><!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>
</code>
<code><!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>
</code>
<!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>
Sorry if this is a stupid question but what am I missing here?
New contributor
asd lk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.