Chrome拡張機能でCSSを使用してローカル画像をロードする方法?

Google Chrome 拡張機能で CSS を使用してローカル画像を読み込むことができません

Chrome 拡張機能内のコンテンツ スクリプトによる Web サイトの変更の場合、試行時に問題が発生する可能性がありますローカルイメージを活用します。この問題は、拡張機能内に画像を組み込んでも解決しません。

この課題は、ローカル画像を参照するために使用される特定の CSS 構文に起因します。

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

解決策

この制限に対処するために、Chrome i18n サポートは重要な解決策を提供します。

• 拡張機能内の指定された「画像」フォルダーに画像を保持します。
• CSS 内のアセットを参照します。次の構文を使用します:

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');

画像が、manifest.json ファイルの「web_accessible_resources」配列に含まれていることを確認します。これにより、拡張機能からこれらのリソースにアクセスする権限が付与されます。

以上がChrome拡張機能でCSSを使用してローカル画像をロードする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。