Extensión de Chrome Dev: Modificar el DOM con jQuery

ACEPTAR. Por lo que he leído sobre el contenido de secuencias de comandos y similares, incluyendo varios otros artículos que voy a añadir a continuación, pero esto todavía no está funcionando!

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, sólo estoy tratando de modificar el color de fondo del cuerpo de una ficha. He añadido el oyente haga clic en ejecutar mi background.html archivo, pero no funciona. He breakpointed en la llamada de secuencia de comandos en el background.html archivo de depuración, y la executeScript evento es golpeado, pero mi content.js archivo de punto de interrupción no ser golpeado. Pensé que tener la content.js archivo bajo el «content_scripts» en mi manifiesto.archivo json fue suficiente, pero si puedo quitar mi background.html archivo no pasa nada.

Alguien me puede ayudar a modificar el contenido de una ficha de alguna manera?! Se siente como que me estoy perdiendo algo, porque me siento como que estoy haciendo esto más difícil de lo que es. Si hay una forma más fácil de lo que yo estoy tratando de hacer, estoy abierto a cualquier sugerencia/las mejores prácticas.

LO Investigado Artículos

2 Kommentare

  1. 26

    De fondo de la página es como un mini servidor es completamente aislado de la página que no tiene nada que ver con las páginas que un usuario visita. Se utiliza para controlar el resto de componentes de extensión como siempre se está ejecutando en segundo plano.

    Secuencias de comandos de contenido son piezas de código javascript que están siendo inyectados en real de páginas que un usuario visita y puede acceder y modificar la página principal del DOM.

    Por lo que para obtener su extensión el trabajo que usted necesita para eliminar

    <script src="jquery.min.js"></script>    
    <script src="content.js"></script>

    de fondo de la página, y se inyecta a jquery como un contenido de la secuencia de comandos a través del 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"});
        });
    });
  2. 1

    content.js está tratando de usar jQuery, sin embargo, no ha inyectado jQuery para la ficha junto con el contenido de la secuencia de comandos. El error en la consola es «Uncaught ReferenceError: $ no está definido».

    Hay dos opciones que puede utilizar para inyectar jQuery:

    1) Especificar en manifiesto.json automáticamente inyectar jQuery y su contenido guión:

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

    A continuación, presionando su navegador botón de acción va a trabajar.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea