FireFoxでcontent_scripts内のconsole.log()のメッセージが出力されない

 本件は、2023/09頃には解決しているはずの話です。

 

TL;DR 

Q. chromeで動いたwebextensionsがFireFoxでcontent_scripts内のconsole.log()のメッセージをコンソールに出力しないのはなぜか？

A. FireFoxが 2023/06 FireFox 114.0時点でmanifest v3に対応していないにもかかわらずエラーを全く出さないため。

 

# 再現

 

```: ディレクトリ構成

DaisyWarekiConv/

├── manifest.json

├── icons/icon128.png

└── my_content_script.js

 ```

```: my_content_script.js

console.log("hello webextensions daisy wareki conv.");

```

```: manifest.json

{

"manifest_version": 3,

"name": "dev-DaisyWarekiConv",

"version": "0.0.1",

"icons": {

"128": "icons/icon128.png"

},

"content_scripts": [

{

"matches": ["<all_urls>"],

"js": ["my_content_script.js"]

}

]

}

```

 

# 間違った解決策

## Webコンソール ではなくブラウザーコンソールを開く

 FireFoxのwebextensionsのconsole.log()メッセージはF12キーで開くWebコンソールではなく、Ctrl+Shift+Jで開くブラウザーコンソールに表示される、らしい。

https://qiita.com/mouseofmicky/items/05dc51f792e16e25ae29 

Fコレ自体が相当にFireFox固有の落とし穴感があるが、こちらをチェックしていてもやはりログメッセージは出力されない。

 

また、開発ツールのコンソール（一時的な拡張機能の読み込み>調査 ボタンから開く ）もあるが、こちらにも表示されない。これはbackgroundのメッセージが表示される（のだったと思う）。

## document.addEventListener('DOMContentLoaded', ~)

そもそもcontent_scriptsがデフォルトでページ読み込みが完了したこのあたり（雑）のタイミングで読み込まれるものであるし、console.log()の出力成否はページの描画状況とは関係ない。

 

## document.body.appendChild(elemDebugMsgOnDisplay);

console.logが出ないならDOMでページ上に直接出してしまえばいいじゃない、のアプローチ。

content_scriptsが走っていないので DOM書き換えが行われず、うまくいかない。

 

# 解決策

manifest v2(MV2)に変更する。

```

{

"manifest_version": 2,

```
 

# おわりに

FireFoxはまだMV3未対応できちんと動かないなら、最初から読み込まないとか、動かないというエラーログを出してほしい。