Seleccionando <option> de un <select> de un script de contenido de la extensión de Chrome

Question

Jul 08, 2012, 03:15 PM

google-chrome-extension google-chrome content-script jquery javascript-events

Seleccionando <option> de un <select> de un script de contenido de la extensión de Chrome

Estoy tratando desesperadamente de activar un evento change () desde un script de contenido de Chrome. He pasado por el sitio web y las publicaciones de Google, pero todavía nada funciona.

Aquí hay una descripción de lo que estoy tratando de lograr

Considere la siguiente página web (accesible a través dehttp://www.gilzu.com/TFF/select.html si alguien es tan amable de ayudar):

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#woot').die('change');
            $('#woot').live('change', function () {
                $('#description').text(jQuery('#woot').val());
                });
            console.log("window ready");       


            $("#meh").click(function() {
                $('#woot').val(15);
                $('#woot').change();
            });

            $('#woot').val(21);
            $('#woot').change();
        });
    </script>
</head>
<body>
    <p>
        <select id="woot">
            <option id="Option1" value="15">a</option>
            <option id="Option2" value="16">b</option>
            <option id="Option3" value="17">c</option>
            <option id="Option4" value="18">d</option>
            <option id="Option5" value="19">e</option>
            <option id="Option6" value="20">f</option>
            <option id="Option7" value="21">g</option>
        </select>
    </p>

    <p id="description"></p>
    <p><input type="button" id="meh" /></p>
</body>
</html>

qué funciona: 1. en el inicio, el cambio () se activa y actualiza el cuadro de selección a 21 y muestra el valor correcto en el div. 2. presionando el botón #meh, cambia el cuadro de selección a 15, activa el evento change () que muestra el valor correcto en la pantalla.

ninguna sorpresa hasta ahora

Así que me dirijo al script de contenido a través de:

$(document).ready(function () {
                $('#woot').val(17);
                $('#woot').change();
                });

así que la etiqueta de selección se actualiza, pero el evento change () no se dispara.

He leído el foro sobre los mundos aislados de la extensión de Chrome y he puesto a prueba esta teoría:

$(document).ready( function() {
    $("#meh").click();
});

y de hecho, activa el evento de clic Y el evento de cambio del cuadro de selección.

También, para contradecir otra publicación que afirma que el código de inyección del js funciona:

$(document).ready( function() {
    var x = $("<script type='text/javascript' />");
    $(x).text("$('#woot').val(18); $('#woot').change();");
    $("head").append(x);        
});

emite el mismo efecto: las actualizaciones del cuadro de selección pero el evento de cambio no se dispara.

También he intentado lo siguiente: 1. crear un botón como el #meh del ejemplo con un evento de clic adjunto que desencadena el cambio de la etiqueta seleccionada (). Sólo las actualizaciones seleccionadas, no se dispara ningún evento. 2. cambiando el valor del cuadro de selección a través de attr (), prop (), val () solo las actualizaciones seleccionadas, no se dispara ningún evento. 3. activando el evento a través de change (), trigger ('change') y selectedIndex solo las actualizaciones seleccionadas, no se dispara ningún evento. 4. retrasando el comando a través de js 5. usando focus () otro control, este control o incluso desenfoque () el cuadro de selección como sugieren algunas publicaciones.

tu ayuda será muy apreciada