Chemin relatif de l'extension Google Chrome

Question

Je développe une extension google chrome et je rencontre un problème de chemin relatif. Si je donne un chemin relatif à une image et que j'ouvre le plugin dans une certaine page, il cherchera cette image dans le chemin du site plutôt que dans celui de l'extension.

Des idées?

Answer 1

Si vous utilisez CSS dans vos pages d'extension (arrière-plan, pop-up, Infobar, etc.), vous pouvez utiliser des chemins relatifs avec une barre oblique (/):

background-image:url("/sprites.png"); 

Le devrait fonctionner au-dessus, tout le monde utilise il. Mais, si vous utilisez pour les scripts de contenu et vous pouvez faire la même chose pour tout css, vous devez utiliser le predefined message comme:

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

Si vous souhaitez définir par programmation, vous pouvez utiliser la syntaxe chrome.extension.getURL comme suivant:

var url = chrome.extension.getURL('sprites.png'); 

Voici comment vous pouvez vous référer à une URL/image spécifique.

En outre, en tant que mentioned in this answer, si vous placez vos actifs d'image dans un répertoire, ces fichiers ne sont pas automatiquement accessibles dans la page Web DOM. Le développeur doit spécifier les ressources qui peuvent être chargées sur la page en utilisant le paramètre "web_accessible_resources" dans le fichier manifest.json:

Answer 2

@ La réponse de mohamed a fonctionné pour moi mais j'ai mis un peu de temps pour tout mettre ensemble. J'ai répondu à cette question mais où est la solution qui a fonctionné pour moi.

Ma solution.

Avec Menifest v2, vous devez ajouter web_accessible_resources au fichier, puis utiliser chrome-extension://__MSG_@@extension_id__/images/pattern.png comme URL dans votre fichier 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" 
    ] 
} 

P.S. Votre fichier manifest.json peut sembler différent de celui-ci.

Answer 3

Dans certains cas, vous pouvez même utiliser le codage en ligne base64 de l'image. Par exemple,

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB..." /> 

Même chose que vous pouvez appliquer à votre CSS. Vous pouvez trouver des encodeurs d'image sur tout le web.