CSS を使用して Chrome 拡張機能にローカル画像を読み込むにはどうすればよいですか?

CSS を使用して Chrome 拡張機能にローカル画像を読み込む

Chrome 拡張機能では、Web サイト要素を変更するには、コンテンツ スクリプト機能を介して CSS を使用することがよくあります。ただし、CSS を使用してローカル画像を読み込むのは困難な場合があります。この記事では、具体的な例と解決策を示してこの問題に対処します。

問題: ローカル画像の読み込みに失敗する

この問題は、CSS を使用して背景画像を設定しようとすると発生しますが、ローカル画像が表示されません。これは、画像が拡張機能内にパックされているにもかかわらずです。

解決策: Chrome 拡張機能 i18n サポート

Chrome の i18n サポートにより、CSS で拡張機能のローカル ファイルを参照する方法が提供されます。これを実現するには:

1. 画像をフォルダーに保存する: 拡張機能内の専用フォルダーに画像を保存します。
2. Chrome 拡張プロトコルを使用します。 : 以下を使用して CSS で画像を参照します形式:

1. マニフェストに含める: 使用するイメージが、manifest.json ファイルの web_accessible_resources セクションにリストされていることを確認してください。

この方法を使用すると、Chrome は拡張機能内からローカル画像を正しく読み込むことができます。背景画像またはその他の CSS プロパティ。

以上がCSS を使用して Chrome 拡張機能にローカル画像を読み込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。