Google Chrome拡張機能-CSSでローカル画像を読み込めません

コンテンツスクリプト機能を使用してウェブサイトを変更するシンプルなChrome拡張機能があります。より具体的にはbackground-image、上記のウェブサイト。

何らかの理由で、拡張機能にパックされていても、ローカル画像を使用できないようです。

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

それだけです。最も単純なCSSですが、機能しません。ブラウザは画像をロードしません。

画像のURLは次のようになります chrome-extension://<EXTENSION_ID>/image.jpg

あなたはJavaScriptを介してCSSを置き換える方が良いでしょう。ドキュメントから：

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

Chromeには 、CSSで拡張機能を参照する機能を提供するi18nサポートがあります。私は自分の画像を拡張機能の画像フォルダに保持しているので、CSSでアセットを次のように参照します。

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

この質問に対する古い回答と解決策はたくさんあります。

2015年8月現在（Chrome 45およびマニフェストバージョン2を使用）、Chrome拡張機能内のローカルイメージにリンクするための現在の「ベストプラクティス」は次のアプローチです。

1）拡張機能の画像フォルダーへの相対パスを使用して、CSSのアセットにリンクします。

.selector {
    background: url('chrome-extension://__MSG_@@extension_id__/images/file.png');
}

2）個々のアセットを拡張機能のmanifest.jsonファイルのweb_accessible_resourcesセクションに追加します。

"web_accessible_resources": [
  "images/file.png"
]

注：この方法は、いくつかのファイルに適していますが、多くのファイルではうまく拡張できません。

代わりに、Chromeの一致パターンのサポートを利用して、特定のディレクトリ内のすべてのファイルをホワイトリストに登録することをお勧めします。

{
    "name": "Example Chrome Extension",
    "version": "0.1",
    "manifest_version": 2,
    ...    
    "web_accessible_resources": [
      "images/*"
    ]
}

このアプローチを使用すると、ネイティブにサポートされているメソッドを使用して、Chrome拡張機能のCSSファイルで画像をすばやく簡単に使用できます。

1つのオプションは、イメージをbase64 に変換することです。

そして、次のようにデータをCSSに直接入れます：

body { background-image: url(data:image/png;base64,iVB...); }

これは、ウェブページを定期的に開発するときに使用するアプローチではないかもしれませんが、Chrome拡張機能の構築にはいくつかの制約があるため、優れたオプションです。

私の解決策。

Menifest v2 web_accessible_resourcesでは、ファイルに追加してchrome-extension://__MSG_@@extension_id__/images/pattern.png、CSSファイルのURLとして使用する必要があります。

CSS：

 #selector {
      background: #fff url('chrome-extension://__MSG_@@extension_id__/images/pattern.png'); 
 }

Manifest.json

{
  "manifest_version": 2,

  "name": "My Extension Name",
  "description": "My Description",
  "version": "1.0",

  "content_scripts": [
      {
        "matches": ["https://mydomain.com/*"],
        "css": ["style.css"]
      }
    ],

  "permissions": [
    "https://mydomain.com/"
  ],
  "browser_action": {
      "default_icon": {                    
            "19": "images/icon19.png",           
            "38": "images/icon38.png"          
       },
       "default_title": "My Extension Name"  
   },
   "web_accessible_resources": [
       "images/pattern.png"
     ]
}

ps manifest.jsonは、これとは異なる場合があります。

このCSSバージョンのみは、拡張環境（アプリページ、ポップアップページ、背景ページ、オプションページ）とcontent_scripts CSSファイルで機能します。

.lessファイルでは、常に変数を最初に設定します。

@extensionId : ~"__MSG_@@extension_id__";

その後、extension-local-resourceなどの画像を参照したい場合は、次を使用します。

.close{
    background-image: url("chrome-extension://@{extensionId}/images/close.png");
}

言及すべきことの1つは、web_accessible_resourcesではワイルドカードを使用できることです。だから代わりに

「images / pattern.png」

使用できます

「画像/ *」

明確にするために、ドキュメントによれば、拡張機能のすべてのファイルは次のような絶対URLでもアクセスできます。

chrome-extension：// <extensionID>/<pathToFile>

<extensionID>は、拡張システムが拡張ごとに生成する一意の識別子であることに注意してください。ロードされているすべての拡張機能のIDを表示するには、URL chrome：// extensionsにアクセスします。<pathToFile>拡張子のトップフォルダの下にファイルの場所です。相対URLと同じです。

...

CSSで背景画像を変更する：

#id{background-image：url（ " chrome-extension://<extensionID>/<pathToFile>"）; }

JavaScriptを介してCSSの背景画像を変更する：

document.getElementById（ ' id'）.style.backgroundImage = "url（ 'chrome-extension：// <extensionID>/ <pathToFile>'）"）;

jQueryを介してCSSの背景画像を変更する：

$（ " #id"）.css（ "background-image"、 "url（ 'chrome-extension：// <extensionID>/ <pathToFile>'）"）;