◆ CSP の制限があるせいで拡張機能でできることも制限される
◆ 拡張機能なら HTTP header を書き換えることが出来るので無効にできる

CSP 邪魔

一部ページでは CSP が設定されているせいで拡張機能の JavaScript 埋め込みがうまく動きません

多くの人が困りそうなのだと Google 翻訳の拡張機能を Github のページで使えないことでしょうか
issues のページは英語の長文が多いので翻訳機能を使いたい人は多いと思います
私も翻訳して全体を眺めて関係ありそうならちゃんと英語で読むってことが多いです

Chrome の内蔵の機能なら問題なく翻訳できます
ですが 内臓の機能だとカーソル合わせたときに日本語を表示してくれなかったり Chrome 以外の Chrome 系のブラウザでは使えない問題があるので拡張機能を使いたいです
なのに拡張機能の翻訳だと CSP が原因で実行できません

CSP をはずす

CSP は HTTP header で制御されています
拡張機能でヘッダーを書き換えることで無効にする方法です

拡張機能には 「webRequest」「webRequestBlocking」 の permission が必要です

chrome.webRequest.onHeadersReceived.addListener(function(detail){
const headers = detail.responseHeaders.filter(e => e.name !== "Content-Security-Policy")
return {responseHeaders: headers}
}, {urls: ["<all_urls>"]}, ["blocking", "responseHeaders"])

やっていることは「Content-Security-Policy」というヘッダーを消しているだけです
特定のページだけに制限するなら urls に指定することが出来ます
<all_urls> だと全部のページが対象です

これを実行すると拡張機能で翻訳ができます

CSP はほとんどのページで使われてないようなものなので 個人的には特に問題ないと思っていますが ページ製作者が意図したものよりセキュリティレベルが落ちることには違いないのでそれを理解した上で無効にしてください