Rozszerzenia Google Chrome - nie można załadować obrazów lokalnych za pomocą CSS

Mam proste rozszerzenie do przeglądarki Chrome, które używa funkcji skryptu zawartości do modyfikowania witryny internetowej. Dokładniej rzecz biorąc, background-imagewspomniana witryna.

Z jakiegoś powodu nie mogę używać lokalnych obrazów, mimo że są one spakowane w rozszerzeniu.

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

To wszystko, najprostszy CSS ... ale to nie zadziała. Przeglądarka nie ładuje obrazu.

Adres URL Twojego obrazu powinien wyglądać tak chrome-extension://<EXTENSION_ID>/image.jpg

Lepiej byłoby zastąpić css przez javascript. Z dokumentów :

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

Chrome obsługuje i18n, co zapewnia możliwość odniesienia się do rozszerzenia w CSS. Trzymam obrazy w folderze obrazów w rozszerzeniu, więc odwołuję się do zasobów w CSS w następujący sposób:

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

Istnieje wiele starszych odpowiedzi i rozwiązań na to pytanie.

Od sierpnia 2015 r. (Przy użyciu przeglądarki Chrome 45 i Manifest w wersji 2) aktualne „sprawdzone metody” tworzenia linków do obrazów lokalnych w rozszerzeniach Chrome metoda jest następująca.

1) Połącz z zasobem w CSS, używając względnej ścieżki do folderu z obrazami rozszerzenia:

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

2) Dodaj pojedynczy zasób do sekcji web_accessible_resources w pliku manifest.json rozszerzenia:

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

Uwaga: ta metoda jest odpowiednia dla kilku plików, ale nie skaluje się dobrze w przypadku wielu plików.

Zamiast tego lepszą metodą jest wykorzystanie obsługi wzorców dopasowania przez Chrome do białej listy wszystkich plików w danym katalogu:

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

Skorzystanie z tego podejścia pozwoli Ci szybko i bez wysiłku używać obrazów w pliku CSS rozszerzenia Chrome przy użyciu natywnie obsługiwanych metod.

Jedną z opcji byłaby konwersja obrazu na base64:

a następnie umieść dane bezpośrednio w swoim CSS, na przykład:

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

Chociaż może nie być to podejście, którego chciałbyś używać podczas regularnego tworzenia strony internetowej , jest to świetna opcja ze względu na niektóre ograniczenia związane z budowaniem rozszerzenia Chrome.

Moje rozwiązanie.

W Menifest v2 musisz dodać web_accessible_resourcesdo pliku, a następnie użyćchrome-extension://__MSG_@@extension_id__/images/pattern.png jako URL w pliku css.

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 Twój plik manifest.json może wyglądać inaczej niż ten.

Ta wersja CSS działa tylko w środowisku rozszerzenia (strona aplikacji, strona podręczna, strona w tle, strona opcji), a także pliku CSS content_scripts.

W pliku .less zawsze ustawiam zmienną na początku:

@extensionId : ~"__MSG_@@extension_id__";

Później, jeśli chcesz odnieść się do obrazów rozszerzenia-lokalnego-zasobu, użyj:

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

Należy wspomnieć, że w zasobach web_accessible_resources można używać symboli wieloznacznych. Więc zamiast

„images / pattern.png”

Możesz użyć

"zdjęcia/*"

Dla wyjaśnienia, zgodnie z dokumentacją , każdy plik w rozszerzeniu jest również dostępny pod bezwzględnym adresem URL, takim jak ten:

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

Zwróć uwagę, że <extensionID>jest to unikalny identyfikator, który system rozszerzeń generuje dla każdego rozszerzenia. Aby zobaczyć identyfikatory wszystkich wczytanych rozszerzeń, przejdź do adresu URL chrome: // extensions . Plik<pathToFile> jest lokalizacja pliku w głównym folderze rozszerzenia; jest taki sam jak względny adres URL.

...

Zmiana obrazu tła w CSS:

#id{background-image: url („ chrome-extension://<extensionID>/<pathToFile>”); }

Zmiana obrazu tła w CSS poprzez JavaScript:

document.getElementById (' id') .style.backgroundImage = "url ('chrome-extension: //<extensionID> / <pathToFile>')");

Zmiana obrazu tła w CSS poprzez jQuery:

$ (" #id") .css ("obraz-tła", "url ('rozszerzenie-chrome: // <extensionID>/ <pathToFile>')");