2012-06-02 23 views
6

Estoy construyendo una extensión de Google Chrome, que inyecta HTML en una página web real. La inyección contiene también imágenes y ahora me pregunto cómo hacer referencia a las imágenes dentro de la extensión. Hasta ahora solo pude referirlos a un servidor usando http://example.com/myimage.png. Pero esto toma un tiempo notable hasta que se carguen.Incrustar imágenes en una extensión de Chrome

¿Es posible empacar imágenes dentro de la extensión y referirlas desde cualquier lugar en el navegador? ¿Cómo?

Gracias por cualquier ayuda.

Respuesta

7

Puede usar chrome.extension.getURL() (docs) para obtener la URL de la carpeta de extensión interna. Pase la ruta relativa de la imagen y obtendrá la URL completa para ello.

Por ejemplo, si usted tiene una carpeta llamada "imágenes", y una imagen denominada "profile.jpg" en ella, tanto en la carpeta de extensión, se puede inyectar en el cuerpo de la página haciendo:

var image = document.createElement("img"); 
image.src = chrome.extension.getURL("images/profile.jpg"); 
document.getElementsByTagName("body")[0].appendChild(image); 

Además, consulte la propiedad de manifiesto web_accessible_resourcesdocumented here - puede necesitar declarar sus recursos para que estén disponibles en este método.

+0

Intenté esto antes. Devuelve 'chrome-extension: // invalid /' aunque usando solo una cadena vacía: chrome.extension.getURL ('') devuelve una ruta de acceso de raíz de extensión correcta. No lo entiendo :/ – Kaspi

+0

@Kaspi: porque tiene que pasarle a la función una ruta relativa a una carpeta/archivo en su carpeta de extensión, y formará la URL completa para ella. Así que no pasar nada no es una opción, mientras que pasar una cadena vacía le dará la URL a la carpeta raíz de su extensión. –

+0

Sin embargo, la ruta raíz no parece cambiar. Si simplemente escribo la ruta raíz en la barra de direcciones normal y agrego el nombre de la imagen, la imagen se muestra correctamente. – Kaspi

Cuestiones relacionadas