XAMPPのローカル開発環境でファイルを公開したが、コンソール上にエラーが出てしまう

前提・実現したいこと

ドットインストールのJavascript音声認識サービスをwindowsで作成しようと思っています。
講義ではMacOSにあらかじめ入っているPHPのビルドインサーバーを使って環境構築していました。
手元のパソコンがwindowsのため、XAMPPを使ってローカル開発環境を構築することとしました。
インストール、起動は問題なくできたのですが、今回作成したファイル”index.html”をhttp://localhost/index.htmlで確認したところ、コンソール上にエラーが出てしまっていてつまずいています。

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

DevTools failed to load SourceMap: Could not load content for chrome-extension://nhpngagppnnddpnoacdofoccodjplanj/ContentEnvironment.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

content.js:77 Uncaught (in promise) Error: CommunicationTimedOut
    at content.js:77
(anonymous) @ content.js:77
Promise.then (async)
(anonymous) @ content.js:277
ContentEventDispatcher.init @ content.js:275
InitContentscriptEnvironment.init @ content.js:837
(anonymous) @ content.js:904
(anonymous) @ content.js:905

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="utf-8">
5 <title>Web Speech</title>
6</head>
7<body>
8  <button>start</button>
9 <script>
10    const btn = document.querySelector('button');
11    const speech = new webkitSpeechRecognition();
12    speech.lang = 'ja-JP';
13
14    btn.addEventListener('click', () => {
15      // console.log('button clicked!');
16      btn.disabled = true;
17      speech.start();
18    });
19
20    speech.onresult = (e) => {
21      console.log(e);
22      speech.stop();
23    };
24 </script>
25</body>
26</html>

試したこと

Apacheの修正ファイル(httpd.conf)の『DocumentRoot』のパスの内容を今回作成したファイルのパス（"C:\xampp\htdocs\webSpeech"）に設定しました。
また、『Directory』のパスの内容も同様に"C:\xampp\htdocs\webSpeech"に設定しました。
しかし、同じエラーが出てしまっています。
この原因をご教授いただければ幸いです。
宜しくお願い致します。

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

XAMPP Control Panel v 3.3.4
ブラウザ
Google Chrome 87.0.4280.88（Official Build）（64 ビット）

unrealsho

2020/12/27 13:58

Apacheの問題じゃなさそうですよ？使用しているブラウザはなんでしょうか。　バージョンも合わせて記してみてください。

saria

2020/12/27 14:11

ご返信ありがとうございます。ブラウザは下記の通りです。ブラウザ Google Chrome 87.0.4280.88（Official Build）（64 ビット）

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

回答1件

よくみたらソースが丸々オブジェクトに内包されてますね。
下記に変更したらエラーは解消されませんか？

自前のローカルで試したところ onresultが返っては来ませんでしたが、、

<script>
    const btn = document.querySelector('button');
    const speech = new webkitSpeechRecognation();
    speech.lang ='ja-JP';

    btn.addEventListener('click', () => {
      // console.log('button clicked!');
      btn.disabled = true;
      speech.start();
    });

    speech.onresult = (e) => {
      console.log(e);
      speech.stop();
    };
</script>

投稿2020/12/27 14:20

unrealsho

総合スコア93