jquery ui - example - Los recursos Chrome Ext y JQuery se deben enumerar en la clave de manifiesto web_accessible_resources para que se carguen por páginas fuera de la extensión
jquery autocomplete select example (1)
Tengo una extensión de Chrome que carga jquery-1.8.3.min.js y jquery-ui.js y jquery-ui-base64.css en el script de contenido.
Los uso en el guión de contenido, no en el guión de fondo.
configuro la configuración (creo) correcta, pero cuando veo que en la consola obtengo errores, puedo ver los íconos en las ventanas bien, pero sigo recibiendo los errores en la ventana de Chrome.
¿Es un error en Chrome im usando la versión 23.0.1271.95 m?
este es el manifist:
{
"name":"Sample communication from content to background",
"description":"This is a sample for Simulating communication from content to background",
"manifest_version":2,
"version":"2",
"background":{
"scripts":["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-1.8.3.min.js","jquery-ui.js","client.js"],
"run_at":"document_end",
"all_frames": true,
"css":["jquery-ui-base64.css"]
}
],
"web_accessible_resources": [
"client.js","jquery-1.8.3.min.js","jquery-ui.js","jquery-ui-base64.css",
"images/ui-bg_flat_0_aaaaaa_40x100.png",
"images/ui-bg_flat_75_ffffff_40x100.png",
"images/ui-bg_glass_55_fbf9ee_1x400.png",
"images/ui-bg_glass_65_ffffff_1x400.png",
"images/ui-bg_glass_75_dadada_1x400.png",
"images/ui-bg_glass_75_e6e6e6_1x400.png",
"images/ui-bg_glass_95_fef1ec_1x400.png",
"images/ui-bg_highlight-soft_75_cccccc_1x100.png",
"images/ui-icons_222222_256x240.png",
"images/ui-icons_2e83ff_256x240.png",
"images/ui-icons_454545_256x240.png",
"images/ui-icons_888888_256x240.png",
"images/ui-icons_cd0a0a_256x240.png"
],
"permissions": [
"unlimitedStorage",
"http://*/",
"<all_urls>",
"tabs"
]
}
en jquery-ui-base64.css cambié todas las imágenes de la carga de URL a algo como esto:
url(chrome-extension://__MSG_@@extension_id__/chrome-extension://__MSG_@@extension_id__/images/ui-bg_flat_75_ffffff_40x100.png)
url(chrome-extension://__MSG_@@extension_id__/chrome-extension://__MSG_@@extension_id__/images/ui-bg_highlight-soft_75_cccccc_1x100.png)
pero sigo recibiendo los errores:
Denying load of chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/images/ui-bg_flat_75_ffffff_40x100.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Denying load of chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/images/ui-bg_highlight-soft_75_cccccc_1x100.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
las imágenes están en el directorio de imágenes y puedo ver los íconos en el diálogo JQuery que creé.
EDITAR 1)
El siguiente código funciona para todos los archivos de fondo / relacionados con DOM y css
manifest.json
Estructura json simple con todos los permisos definidos
{
"name": "My extension",
"version": "1.0",
"permissions": [
"http://*/*", "tabs", "https://*/*"
],
"browser_action": {
"default_icon": "icon.jpg",
"default_popup":"popup.html"
},
"manifest_version": 2
}
popup.html
Hoja de estilo vinculada para la acción del navegador Ventana emergente
<html>
<head>
<link rel="stylesheet" href="styles.css"></link>
</head>
<body>
</body>
</html>
styles.css
url usado () para la ruta de la imagen
body{
width : 500px;
height: 500px;
background-image: url(''img/icon.jpg'');
}
Avíseme si aún falla
EDITAR 2)
Para inyectar imágenes a través de contenido
Solución a)
Con este convertidor , convierte su imagen a cadenas base64 y puede usarlas como
{background-image: url (data: image / png; base64, iVBORw ........};
Solución b)
El siguiente código no funcionará porque
{
background-image:url(chrome.extension.getURL(''img/icon.jpg''));
}
chrome.extension.getURL () no está definido para css.
Entonces, usé js para la inyección de imágenes de fondo / cualquier URL de imagen (porque tienen URL dinámicas)
manifest.json
Estructura json simple con todos los permisos definidos para scripts de contenido y CSS
{
"name": "My extension",
"version": "1.0",
"permissions": [
"http://*/*", "tabs", "https://*/*"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js":["content.js"],
"css": ["styles.css"]
}
],
"web_accessible_resources": [
"img/icon.jpg"
],
"manifest_version": 2
}
content.js
Como caso de uso trivial, se preparó un div y se agregó una propiedad de Imagen de fondo
var newdiv = document.createElement(''div'');
newdiv.setAttribute("id", "moot450");
document.body.appendChild(newdiv);
document.getElementById(''moot450'').style.backgroundImage = "url(" + chrome.extension.getURL(''img/icon.jpg'') + ")";
styles.css
inyectó otro CSS para refinar inyectado div
#moot450{
position:absolute;
width:500px;
height:500px;
/*background-image:url(chrome-extension://faaligkhohdchiijdkcokpefpancidoo/img/icon.jpg);*/
}
SALIDA
Captura de pantalla tomada de Google Page después de la inyección
Avíseme si necesita más información o si falla.