Chrome拡張機能のプログラムでUncaught TypeErrorを回避したい。chrome.tabs.onUpdated.addListener

実現したいこと

Chrome拡張機能のプログラムでUncaught TypeErrorを回避したい。

前提

初質問のプログラミング初心者です。
Chrome拡張機能でkuromojiライブラリを使用したいのですが下記のエラーが発生します。
そもそもkuromojiライブラリと関係のないエラーな気もします。
エラーのないソースコードにしたいです。
よろしくお願いいたします。

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

Uncaught TypeError: Cannot read properties of undefined (reading 'onUpdated')
at script.js:1:13

該当のソースコード

manifest.json

{
"manifest_version": 3,
"name": "a",
"description": "a",
"version": "0.0.1",
"permissions": [
"activeTab",
"<all_urls>",
"tabs",
"://example.com/"
],
"content_scripts": [
{
"matches": [
"://example.com/",
"<all_urls>"

  ],
    "js": [
      "kuromoji/build/kuromoji.js",
      "script.js"
    ]
  }
],
"background.service_worker": {
  "scripts": ["script.js"],
  "persisten,t": false
},

"web_accessible_resources": [{
  "resources": [ 
  "/kuromoji/dict/*",
  "script.js"
],
"matches": [
  "<all_urls>"
]
}],
"icons": {
  "128": "icon128.png"
},
"action": {
  "default_title": "a",
  "default_icon": "icon128.png"
}

}

script.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
// Do something when the tab is updated
console.log(tabId, changeInfo, tab);
});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
if (changeInfo.status === 'complete') {
chrome.tabs.executeScript(tabId, { code: "var bodyText = document.body.innerText; console.log(bodyText); const dicPath = chrome.extension.getURL('/kuromoji/dict/'); kuromoji.builder({ dicPath: dicPath }).build(function (err, tokenizer) { var path = tokenizer.tokenize(bodyText); console.log(path); });" });
}
})

試したこと

マニフェストのバージョンの2と3を切り替えたり、それに合わせてmanifest.jsonの構文を変えたりしました。

行動規範の内容に同意します

回答2件

ベストアンサー

これはpopupを使ったサンプルです。

manifest.json

json
1{
2  "name": "Kuromoji",
3  "version": "1.0",
4  "manifest_version": 3,
5  "action": {
6    "default_popup": "popup.html"
7  }
8}

popup.html

html
1<html>
2<head>
3  <style type="text/css">
4      * {
5        font-size: x-large;
6      }
7  </style>
8</head>
9<body>
10  Sentence<br>
11  <textarea id="sentence" cols="30" rows="10"></textarea><br>
12  Tokens<br>
13  <textarea id="tokens" cols="30" rows="10"></textarea><br>
14  <button id="analyze">Analyze</button>
15  <script src="kuromoji.js"></script>
16  <script src="popup.js"></script>
17</body>
18</html>

popup.js

javascript
1const DICT_PATH = "/dict";
2
3const sentence = document.getElementById("sentence");
4const tokens = document.getElementById("tokens");
5const analyze = document.getElementById("analyze");
6
7kuromoji.builder({ dicPath: DICT_PATH }).build((err, tokenizer) => {
8  analyze.onclick = () => {
9    tokens.value = JSON.stringify(tokenizer.tokenize(sentence.value));
10  }
11});