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

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.

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;

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');

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.

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.

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.

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");
}

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 / *"

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>')");