Search code examples
javascriptgoogle-chrome-extension

I can't use Kuroshiro library in my chrome extension

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,

{
  "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,

// 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,

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

<!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?

Solution

  • Delete content3.js and load kuroshiro.min.js, kuroshiro-analyzer-kuromoji.min.js, and add_furigana.js as content scripts.

      "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>"
      ]
    }
  ]