今回のエラーはChromeのデベロッパーツールのコンソールエラーを調べていて気になったもののうちの1つです。
（もう一つはCookieのエラーです）
DevTools failed to load SourceMap: Could not load content for （Chromeの拡張機能のjsのソースマップ）: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
似たエラーで
DevTools failed to load SourceMap: ...
というのも見掛けました。
Chromeの拡張機能のjsのソースマップファイルが読み込めない（load）か、解析できない（parse）の違いです。
（load → parseの順で処理されます）
js.map や css.map という、map拡張子の「ソースマップ」に遭遇することは今までなかったので、せっかくなので調べました。
SourceMap（ソースマップ）とは
コンパイル前後のjsやcssファイルを紐付けるファイルです。
ソースマップファイルがあるとデバックのときにコンパイル前の、元のファイルをたどることができて便利です。
ソースマップファイルはコンパイル時に作られることもあるそうです（後述）。
ソースマップファイルの中身
Tools for Web Developers の記事からソースを拝借しました。
styles.scss
%$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
font-size: $textSize;
color: $fontColor;
background: $bgColor;
}
（最初の% 何でしょうか...？）
h2 {
font-size: 26px;
color: red;
background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */
# sourceMappingURL=styles.css.map はsourceMappingURL アノテーション といいます。
ソースマップファイルの位置を示します。
コンパイル時にアノテーションが付きます。
続いてソースマップファイル。
中身はJSON形式で書かれています。
styles.css.map
{
"version": "3",
"mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
"sources": ["sass/styles.scss"],
"file": "styles.css"
}
version：ソースマップの仕様のバージョン
mappings：マッピング情報
sources：コンパイル元のファイル。複数入ることもあります
file：コンパイルによる生成ファイル
他には
names：コードに出てくる変数名、関数名（←要確認）
もっと色々あるようです。
mappingsの値については、Base64というものを使っているそうですが、難しそうです。
Safx: JavaScriptのSource Mapの内部表現について
エラーの解消方法
肝心の、どうエラーを解決するかですが、
- ソースマップを使わない → cssファイルに書かれている sourceMappingURL アノテーションを削除する
- ソースマップを使わない → sourceMappingURL アノテーション通りにソースマップファイルを配置、さらにscssやlessファイルを配置する
のどちらかです。
ソースマップの使い方
ソースマップファイルを使おうとすると、サーバーにmapファイルだけではなく、コンパイル前のscss、lessファイルも置かなくてはならないのでしょうか。
しかし、デバックすることが目的なので、サイト管理者のローカル環境にファイルが置いてあってもソースマップを利用することができるようです。
ソースマップファイルの作り方（コンパイルの方法）
便利なソースマップ。作り方にはいくつか方法があります。
ここではscss、lessファイルからcssファイルをコンパイルする場合を調べました。
SassとLESS
まずこの2つの言語をさらっと調べました。
その前にどちらもCSSのメタ言語、プリプロセッサです。
（単語がどういう意味なのかはおいおい）
Sass・・・「Syntactically Awesome StyleSheet」。Rubyで実装されているオープンソースソフトウェア
LESS・・・「Leaner CSS」。JavaScriptで実装されているオープンソースソフトウェア。
パターン1：Sass、Lessをインストールして実行する
コマンドラインでインストールします。
Sassの場合
Sassはその前にRubyをインストールする必要があります。
その他にもgemやbundler、compassをインストールすると便利とのことですが、ちょっと...Rubyをやることがあればまた勉強しようと思います。
sassをインストール
gem install sass
scssファイルのコンパイル
sass style.scss:style.css
これでコンパイルとともにソースマップファイルも作られます。
CSSのメタ言語Sass(SCSS)、LESSの完全入門 - Qiita
☆Nodeでもsassのモジュールがあるみたいです。
LESSの場合
一方でLESSは事前にnode.jsをインストールする必要があります。
lessをインストール
npm install -g less
lessファイルのコンパイル
lessc styles.less > styles.css
同じくコンパイルとともにソースマップファイルも作られるはずです。
lessとはNodeでいう「モジュール」ですね。イコール「オープンソースソフトウェア」のことだと解釈しました。（Rubyではsassなどを「gem」というっぽい）
Nodeを使う場合は、タスクランナーであるgulpなどを使うと、他の処理と合わせてコンパイルできて便利です。
LESSでCSSを簡単に！LESSの使い方と便利な機能 - Qiita
パターン2：（LESSのみ）クライアント側でコンパイラを使う
lessファイルを読み込んだ後でless.jsというコンパイラを読み込みます。
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
less.jsはダウンロードして使う方法もあればCDNでもあります。
第1回 LESSのメリットと導入方法：LESSで3倍ラクするスマートフォンコーディング｜gihyo.jp … 技術評論社
ただこの方法だとソースマップファイルが作られるのか分かりませんでした...。
パターン3：GUIツールを利用する
GUIコンパイラと呼ばれるツールです。WindowsでSassをコンパイルしたいときにも、GUIコンパイラを使えばRubyをインストールすることなくできます。
「Prepros」、「koala」が有名なGUIコンパイラです。
コンパイルの設定でソースマップファイルを作ることができます。
パターン4：エディタの拡張機能を使う
VSCodeでは「Easy Sass」、「Easy LESS」といったものが検索で出てきました。
ファイルを保存するとコンパイル処理が走る、といった感じらしいです。
こちらもオプションでソースマップファイルが作れそうです。
（要確認）
やっぱりコンパイルが気になる
ここまでコンパイルコンパイル書いていると疑問がふつふつと再燃してきました。
ソースマップから完全に脱線しています。
☆別で記事にしました！こちら。
実はソースマップで一番知りたかったことは、importしたscssファイルまでソースマップでたどることができるのか、なのですが、また今度確認してみます。
その他の参考
ソースマップについてコンソールに警告（DevTools failed to parse SourceMap）【Chromeデベロッパーツール】 | まろりか
