CSS スタイルシートを JavaScript に文字列として挿入する Chrome 拡張機能のインターフェイスにカスタム CSS スタイルを追加するには、document.stylesheets に関する課題に直面します。 JavaScript 文字列を使用して完全なスタイルシートを挿入する方法は次のとおりです。 スタイル要素の作成と追加: 最も簡単な解決策は、 を作成することです。要素を作成し、その textContent プロパティを CSS 文字列に設定し、それをドキュメントの <head>:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="javascript">const style = document.createElement('style'); style.textContent = 'body { color: red; }'; document.head.append(style);</code></pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>複数の CSS インジェクション:</strong></p> <p>必要に応じて追加します。複数のスタイルを 1 つのパスに挿入するには、上記のコードをユーティリティ関数でラップします:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="javascript">function addStyle(styleString) { const style = document.createElement('style'); style.textContent = styleString; document.head.append(style); }</code></pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>置換可能な CSS インジェクション:</strong></p> <p>または、以前の CSS インジェクションを上書きする関数:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="javascript">const addStyle = (() => { const style = document.createElement('style'); document.head.append(style); return (styleString) => (style.textContent = styleString); })();</code></pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>IE の制限事項:</strong></p> <p>IE9 以下では 32 スタイルシートの制限があるのに対し、IE10 では 4095 が許可されることに注意してください。古いブラウザで置き換え不可能なコードを使用する場合。</p> <p><strong>答えの最新化:</strong></p> <p>最近の更新により、セキュリティ上の理由から .innerHTML が .textContent に置き換えられました。更新されたコード:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="javascript">const style = document.createElement('style'); style.textContent = styleString; document.head.append(style);</code></pre><div class="contentsignin">ログイン後にコピー</div></div>
