t-log

文字数を数えるChrome拡張機能を作成

Chrome拡張機能 開発

大学の課題でリアクションペーパーをGoogleFormで提出することがあるのだが、文字数が規定に達しているかどうか数えるのが面倒なので文字数カウントの拡張機能を作成した。

構成は以下の通り。

manifest.json
{
    "manifest_version": 3,
    "name": "文字数カウント",
    "version": "1.0",
    "background": {
        "service_worker": "event.js"
    },
    "permissions": [
        "contextMenus"
    ],
    "content_scripts": [
        {
            "matches": [
                "https://*/*",
                "http://*/*"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

conent.jsが文字数をカウントし、event.jsがコンテクストメニューを編集するという流れになっている。

event.js
'use strict';


{
    chrome.runtime.onInstalled.addListener(() => {
        const count = chrome.contextMenus.create({
            id: 'count',
            title: '文字数を数える',
            contexts: ['selection']
            //通常の右クリックメニューではなく文字選択時のメニューを編集するために設定
        });
    });


    chrome.runtime.onMessage.addListener((message) => {
        chrome.contextMenus.update('count', {
            title: '文字数を数える: ' + message.count,
        });
    });
}
content.js
'use strict';


document.addEventListener("mouseup", () => {
    const count = window.getSelection().toString().length;
    chrome.runtime.sendMessage({ count: count });
});

拡張機能を有効化し、文字を選択した状態で右クリックすると文字数が表示された。