Chrome拡張で外部ライブラリを使いたい。/kuroshiroを使用したひらがな化拡張を作りたい

Question

⚠️自分はプログラミング初心者なので大幅に勘違いしているところがあるかもしれませんがよろしくお願いいたします。

実現したいこと

Google拡張機能で外部ライブラリを使用したい。

具体的な目的はkuroshiroを使用して、サイト上の文字を全てひらがなに置き換えたい。

前提

Google Chrome 拡張で実行したらサイト上の文字列が全てひらがなに置き換えられるものを作りたい。
gooのひらがな化APIを使用して目的のものは作れたが毎回APIを使うとなると制限がかかったりしそうだと考え、漢字を含めてひらがな化できるkuroshiroを使用したいと思った。

https://github.com/hexenq/kuroshiro

npmでkuroshiro及びkuroshiro-analyzer-kuromojiを作業ディレクトリにダウンロードししたが使えそうにない。

発生している問題・エラーメッセージ

Uncaught SyntaxError: Cannot use import statement outside a module

該当のソースコード

import Kuroshiro from 'kuroshiro'; //ここがダメらしい
import KuromojiAnalyzer from 'kuroshiro-analyzer-kuromoji';

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
    if (request.action === 'convertToHiragana') {

        const kuroshiro = new Kuroshiro();
        await kuroshiro.init(new KuromojiAnalyzer());
        var result = await kuroshiro.convert(request.sentence, { to: 'hiragana' });
        try {
            sendResponse(result);
        } catch (e) {
            sendResponse("");
            console.log(e);
        }
    }
    return true;
});

function Change() {
    const elements = document.querySelectorAll('body *');
    for (let element of elements) {
        if (element.children.length === 0 && element.textContent.trim() !== '') {
            chrome.runtime.sendMessage(
                { action: 'convertToHiragana', sentence: element.textContent.trim() },
                response => {
                    element.textContent = response;
                }
            );
        }
    }

}

試したこと

調べて色々追加してみた

    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "node_modules/kuroshiro/dist/kuroshiro.js",
                "node_modules/kuroshiro-analyzer-kuromoji/dist/kuroshiro-analyzer-kuromoji.js",
                "content.js"
            ]
        }
    ],

    "background": {
        "scripts": [
            "node_modules/kuroshiro/dist/kuroshiro.js",
            "node_modules/kuroshiro-analyzer-kuromoji/dist/kuroshiro-analyzer-kuromoji.js",
            "background.js"
        ]
    }

以下も追加してみた

    <script type="module" src="popup.js"></script>
    <script type="module" src="node_modules/kuroshiro/dist/kuroshiro.js"></script>
    <script type="module" src="node_modules/kuroshiro-analyzer-kuromoji/dist/kuroshiro-analyzer-kuromoji.js"></script>

以上の変更をしてみたがエラーが改善されることはなかった。

補足情報（FW/ツールのバージョンなど）

gooのAPIを使用し、目的の動作は一旦できたのでbackground.js以外はライブラリ関連を除いて問題はないと思います。

background.jsの内容だけ置き換えようとした感じです。
gooAPIで実装したとき(動作した)↓

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'convertToHiragana') {
        const apiUrl = 'https://labs.goo.ne.jp/api/hiragana';
        const appId = <ここにAPIキー>';
        const payload = {
            app_id: appId,
            sentence: request.sentence,
            output_type: 'hiragana'
        };
        fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload)
        })
            .then(response => response.json())
            .then(data => {
                sendResponse(data.converted);
            })
            .catch(error => {
                console.error(error);
                sendResponse('');
            });
        return true;
    }
});

自分で調べてもあまり情報が見つからなかったです、、
よろしくお願いします。

Answer 1

この回答はGPT-4による自動生成回答です

Chrome拡張機能では、import文を使用するためには、manifest.jsonで"type": "module"を指定する必要があります。しかし、現在のChrome拡張機能では、バックグラウンドスクリプトでモジュールをサポートしていません。そのため、代わりにbrowserifyやwebpackなどのモジュールバンドラを使用して、依存関係を1つのファイルにまとめることをお勧めします。

まず、browserifyをインストールしてください。

npm install -g browserify

次に、background.jsをバンドルして新しいファイルbundle.jsを作成します。

browserify background.js -o bundle.js

これで、bundle.jsにはkuroshiroとkuroshiro-analyzer-kuromojiが含まれています。manifest.jsonのbackgroundセクションを次のように更新してください。

"background": {
    "scripts": [
        "bundle.js"
    ]
}

最後に、background.jsのimport文をrequireに変更します。

const Kuroshiro = require('kuroshiro');
const KuromojiAnalyzer = require('kuroshiro-analyzer-kuromoji');

// 以降のコードは変更なし

これで、Chrome拡張機能でkuroshiroとkuroshiro-analyzer-kuromojiを使用できるようになります。

Comments

[NorioYamamoto]

Webpackを使うと、Node.jsのパッケージを使用する拡張機能が作成出来ます。
私が作ったチュートリアルが参考になると思います。
Chrome拡張の作り方 49 Webpack
https://youtu.be/S5LQ7lHHs8A

[guruma]

回答ありがとうございます。
Webpackを使うことでNode.jsのパッケージを使用する拡張機能が作成できることができると知り、希望を持ちました。
動画通りに進めていき、main.jsをビルドするところまではうまく行ったのですがいざ使おうとすると
Uncaught TypeError: t is not a constructor
のというエラーが出てしまいました。
ビルドされたファイルなのでどうしたらいいかわからず...という感じになってしまいました。
対処法があれば教えていただけると幸いです