Extensión de Chrome Dev: modificar el DOM usando jQuery
google-chrome-extension (2)
DE ACUERDO. Así que he leído sobre el contenido de las secuencias de comandos y similares, incluyendo varios otros artículos de SO que agregaré a continuación, ¡pero esto todavía no funciona!
Mi _manifest.json_ :
{
"name": "name",
"version": "1.0",
"description": "desc",
"browser_action": { "default_icon": "icon.png" },
"permissions": [ "tabs", "http://*/*" ],
"background_page": "background.html",
"content_scripts": [ {
"all_frames": true,
"js": [ "content.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ]
}
Mi _background.html_ :
<!doctype html>
<html>
<head>
<title>Background Page</title>
<script src="jquery.min.js"></script>
<script src="content.js"></script>
</head>
<body>
<script>
chrome.browserAction.onClicked.addListener(function(tab)
{
chrome.tabs.executeScript(null, {file:"content.js"});
});
</script>
</body>
</html>
Mi _content.js_ :
$(''body'').prepend(''<h1>Testing!</h1>'');
$(''body'').css(''background'', ''#f00 !important'');
Por ahora, solo estoy tratando de modificar el color de fondo del cuerpo de una pestaña. He agregado el detector de clics para ejecutar mi archivo background.html, pero no funciona. He interrumpido la llamada al script en el archivo background.html cuando la depuración y el evento executeScript se alcanzan, pero el punto de interrupción del archivo content.js no se ve afectado. Pensé que tener el archivo content.js debajo de "content_scripts" en mi archivo manifest.json era suficiente, pero si elimino mi archivo background.html no pasa nada.
¡¿Puede alguien ayudarme a modificar el contenido de una pestaña de alguna manera ?! Siento que me estoy perdiendo algo, porque siento que estoy haciendo esto más difícil de lo que es. Si hay una forma más fácil de lo que estoy tratando de hacer, estoy abierto a cualquier sugerencia / mejores prácticas.
Artículos tan investigados
La página de fondo es como la de un mini servidor: es una página completamente aislada que no tiene nada que ver con las páginas que visita un usuario. Se utiliza para controlar el resto de componentes de extensión, ya que siempre se ejecuta en segundo plano.
Los scripts de contenido son piezas de código javascript que se inyectan en las páginas reales que un usuario visita y pueden acceder y modificar el DOM de la página principal.
Así que para que tu extensión funcione debes remover
<script src="jquery.min.js"></script>
<script src="content.js"></script>
desde la página de fondo, e inyectar jquery como un script de contenido a través de manifiesto:
"content_scripts": [ {
"all_frames": true,
"js": [ "jquery.min.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ]
o con chrome.tabs.executeScript :
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file:"jquery.min.js"}, function() {
chrome.tabs.executeScript(null, {file:"content.js"});
});
});
content.js está intentando usar jQuery, sin embargo, no ha inyectado jQuery en la pestaña junto con su script de contenido. El error en la consola es "Uncaught ReferenceError: $ no está definido".
Hay dos opciones que podrías usar para inyectar jQuery:
1) Especifique en manifest.json para inyectar automáticamente jQuery y su script de contenido:
"js": [ "jquery.min.js", "content.js" ],
o,
2) Inyectar jQuery a través de background.html :
chrome.tabs.executeScript(null, {file:"jquery.min.js"}, function() {
chrome.tabs.executeScript(null, {file:"content.js"});
});
Entonces, presionando el botón de acción de su navegador funcionará.