前提知識

Content Scriptとは

Chrome拡張において、webページとDOMを共有しているファイルのこと。ただし、JavaScriptが実行される環境は、webページのそれと独立である。つまり、一方の環境内で定義された変数および関数は、もう一方からは触ることができない。

"run_at" : "document_start"

とにかく最速でContent Scriptを走らせるための設定。まだDOM構築もされていないし、他のscriptも読み込まれていないタイミングである。普通選ぶ必要がないが、この記事ではこの設定が前提。

webページのJS環境を触るには

webページのJS環境で実行したいスクリプトを別ファイル（あるいは文字列リテラル）で用意しておき、DOMに<script>タグとして注入することで解決する。
（https://qiita.com/suin/items/5e1aa942e654bce442f7 および https://stackoverflow.com/questions/20499994/access-window-variable-from-content-script を参考）

問題

上記手法ではgetElementsByTagName()でheadなりbodyなりを取得し、そこに注入したいscriptをぶら下げる方法を取っている。普通これで問題ないが、スクリプト実行をDOM構築まで待てない場合には使えない。

解決法

content-script.js

function injectScript(file) {
    const s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('src', file);
    return (document.head||document.documentElement).appendChild(s);
};

injectScript(chrome.runtime.getURL('/embedded-script.js'));

document.documentElementはheadとは違い、"run_at" : "document_start"のタイミングで呼び出しても存在している。
デベロッパーツールのSourceタブを見ると、埋め込んだ<script>タグが、<head>タグよりも前にあるのが確認できる。

参考