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.