Extensões do Google Chrome - Não é possível carregar imagens locais com CSS

98

Eu tenho uma extensão simples do Chrome que usa o recurso de script de conteúdo para modificar um site. Mais especificamente, o background-imagedo referido site.

Por algum motivo, não consigo usar imagens locais, embora elas estejam incluídas na extensão.

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

É isso, o CSS mais simples ... mas não vai funcionar. O navegador não carrega a imagem.

Bjarki Jonasson
fonte
2
Por que a extensão pensaria que url ('image.jpg') é local? Você não precisa de um caminho completo?
Traingamer

Respostas:

70

O URL da sua imagem deve ser semelhante a chrome-extension://<EXTENSION_ID>/image.jpg

Seria melhor substituir o css pelo javascript. Dos documentos :

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;
serg
fonte
7
@Salem Porque, caso contrário, você precisaria codificar seu ID de extensão em css.
serg
Não quero ser burro, mas por que isso é um problema?
Salem
4
@Salem Seria inconveniente desenvolver como id de extensão descompactado e carregado na galeria um com ids diferentes. Não é o fim do mundo, apenas inconveniência e um tipo de prática ruim, assim como codificar arquivos absolutos no código, por exemplo.
Sérgio
Ah, faz sentido. Eu agradeço.
Salem
Uma vez que esta é a resposta aceita, você deve ver um comentário na outra resposta onde ariera mencionou sobre a inclusão de web_accessible_resources em seu arquivo de manifesto para acessar fontes e imagens locais.
Aryan Firouzian
254

O Chrome tem suporte para i18n que fornece a capacidade de referenciar sua extensão em seu CSS. Eu mantenho minhas imagens em uma pasta de imagens na extensão, para fazer referência a recursos no CSS da seguinte forma:

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');
David Lemphers
fonte
4
Muito bom. Esta é uma ótima solução e realmente funciona para extensões não empacotadas e empacotadas - obrigado por compartilhar uma dica realmente ótima.
Richard Hollis
40
Obrigado, isso é exatamente o que eu estava procurando. Apenas uma nota de rodapé: lembre-se de que você precisa declarar seus recursos como web_accessible_resources em seu arquivo de manifesto (conforme explicado aqui: code.google.com/chrome/extensions/… ). Caso contrário, eles não serão carregados
ariera 01 de
2
Uma coisa eu percebi! Nunca pense que uma resposta aceita é a única solução correta para essa pergunta! Eu estava com medo de ter que fazer hardcode quando vi uma resposta aceita, mas depois de ver sua resposta, disse a mim mesmo que esse cara salvou meu dia! ;-)
Rafique Mohammed
Essa é quase sempre a melhor maneira de fazer isso. CSS puro vs. acoplamento de Javascirpt e CSS juntos na resposta @serg. Esta deve ser a resposta aceita em minha opinião.
Jeremy Zerr
O link de @ariera está aqui agora: developer.chrome.com/extensions/manifest/…
Ben
41

Existem muitas respostas e soluções antigas para essa pergunta.

Em agosto de 2015 (usando o Chrome 45 e a versão 2 do Manifesto), a "prática recomendada" atual para vincular a imagens locais nas extensões do Chrome é a seguinte abordagem.

1) Link para o ativo em seu CSS usando um caminho relativo para a pasta de imagens de sua extensão:

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

2) Adicione o ativo individual à seção web_accessible_resources do arquivo manifest.json de sua extensão :

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

Observação: este método é adequado para alguns arquivos, mas não é compatível com muitos arquivos.

Em vez disso, um método melhor é aproveitar o suporte do Chrome para padrões de correspondência para colocar na lista de permissões todos os arquivos em um determinado diretório:

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

Usar essa abordagem permitirá que você use imagens de maneira rápida e fácil no arquivo CSS da extensão do Chrome usando métodos com suporte nativo.

rjb
fonte
22

Uma opção seria converter sua imagem em base64:

e coloque os dados diretamente em seu css, como:

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

Embora essa possa não ser uma abordagem que você gostaria de usar ao desenvolver regularmente uma página da web , é uma ótima opção devido a algumas das restrições de construção de uma extensão do Chrome.

Brian Sloane
fonte
1
Eu prefiro essa opção. Não concordo que o Google esteja correto em sugerir injetar todas as imagens por meio da abordagem mencionada acima. A abordagem base64 também é mais rápida. +1 !!!
Skone
20

Minha solução.

Com o Menifest v2, você precisa adicionar web_accessible_resourcesao arquivo e, em seguida, usar chrome-extension://__MSG_@@extension_id__/images/pattern.pngcomo url em seu arquivo 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 Seu manifest.json pode ser diferente deste.

Foxinni
fonte
8

Esta versão CSS funciona apenas no ambiente de extensão (página do aplicativo, página pop-up, página de fundo, página de opção) , bem como arquivo CSS content_scripts.

No arquivo .less, sempre defino uma variável no início:

@extensionId : ~"__MSG_@@extension_id__";

Mais tarde, se você quiser se referir a imagens de recurso local de extensão, use:

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

Uma coisa a mencionar é que no web_accessible_resources você pode usar curingas. Então, em vez de

"images / pattern.png"

Você pode usar

"imagens / *"

patrick_hogan
fonte
4

Só para esclarecer, de acordo com a documentação , todo arquivo em uma extensão também pode ser acessado por uma URL absoluta como esta:

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

Observe que <extensionID>é um identificador exclusivo que o sistema de extensão gera para cada extensão. Você pode ver os IDs de todas as extensões carregadas acessando o URL chrome: // extensions . O <pathToFile>é a localização do arquivo na pasta superior da extensão; é igual ao URL relativo.

...

Alterar a imagem de fundo em CSS:

#id{imagem de fundo: url (" chrome-extension://<extensionID>/<pathToFile>"); }


Alterar a imagem de fundo em CSS por meio de JavaScript:

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


Alterando a imagem de fundo em CSS por meio do jQuery:

$ (" #id") .css ("background-image", "url ('chrome-extension: // <extensionID>/ <pathToFile>')");

quackkkk
fonte