webブラウザ拡張機能でページのDOM情報を取得したい. (browser/chrome API)

表示中の web ページの情報を抽出して popup.html (manufest.json の permissions.default_popup) に表示するブラウザ拡張機能を作りたいです.

・popup の js から message を発行
・content script で message を受け取ってページの情報を収集
・集めた情報を sendResponse で popup に送る
という方針で作成しましたが content script 側で message を受け取れません.

実際のコードはこんな感じです.

JavaScript
1// popup.js
2(()={
3    chrome.runtime.sendMessage(
4        null,
5        {val: 'foo'},
6        res => {
7            console.log('response', res);
8        }
9    );
10})();
11
12// contentScript.js
13chrome.runtime.onMessage.addListener(
14    (message, sender, sendResponse) => {
15        console.log('message', message.val);
16        sendResponse({val: 'bar'});
17        return true;
18    }
19);
20
21// 実行結果
22`response undefined`

(manufest.json の permissions 設定など, 細かい注意点は全てよく確認済なので, 問題個所は上記のスクリプトでほぼ間違いありません.)
こちらのページでは同じストラテジーで作ったブラウザ拡張機能を動作報告と併せて配布しているのですが, ダウンロードして実行してみたところ Edge・Chrome ともに動作しませんでした (実行ブラウザは Windows 10 での最新安定版).
確かに MDN の onMessage イベント説明には popup と content script 間で message の listend・send が出来るという記述は一切ありません. 実際, contentScript.js の内容を background.js に移すと動作します.
しかし, 前述の方法で動作が報告されている例は他にもあります.

2018年以降 browser/chrome API の仕様が大きく変更されたのでしょうか？

ともあれ, webページの情報を popup.html に取り出せる, 現状で有効な方法を教えて頂きたいです.
何卒宜しくお願いします.