jQuery change работает только в консоли, а не в расширении content_scripts или browser.tabs.executeScript - PullRequest
Новая
       13

jQuery change работает только в консоли, а не в расширении content_scripts или browser.tabs.executeScript

0 голосов
/ 02 декабря 2018

Я пишу расширение для Firefox / Chrome, которое автоматически заполняет формы.

У меня есть тестовая страница, подобная этой: 

```
<html>
<head>
    <script src="jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
    <td>Select1</td>
    <td>
        <select id="select1" name="select.1">
            <option value="">Select an option</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </td>
</tr>
<tr>
    <td>Select2</td>
    <td>
        <select id="select2" name="select.2">
            <option value="">Select an option</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </td>
</tr>
<tr>
    <td>Select3</td>
    <td>
        <select id="select3" name="select.3">
            <option value="">Select an option</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
        </select>
    </td>
</tr>
</table>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script src="select2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        function n(n) {
        $("#s2id_" + n).children().first().removeClass("select2-required")
    }

    function t(n) {
        var t = $(n.currentTarget).attr("required") === "required";
        t && n.currentTarget.value === "" && $("#s2id_" + n.currentTarget.id).children().first().addClass("select2-required")
    }

    $("select").select2({placeholder: "Select an Option", allowClear: !0, minimumResultsForSearch: 20, dropdownAutoWidth: !0})
        .on("change", function (i) {
            var r = $(i.currentTarget).attr("required") === "required";
            r && i.val === "" ? t(i) : (n(i.currentTarget.id), $("#s2id_" + i.currentTarget.id).children().first()
                .removeClass("select2-required"))
        }).on("select2-opening", function (t) {
        n(t.currentTarget.id)
    }).on("select2-blur", function (n) {
        t(n)
    })
    }
</script>
</body>
</html>
```

, и код расширения, такой как: 

```
// popup.js
...
browser.tabs.query({active: true, windowId: 
browser.windows.WINDOW_ID_CURRENT})
                .then(tabs => browser.tabs.get(tabs[0].id))
                .then(tab => {
                    console.info("current tab.id: " + tab.id);

                    browser.tabs.executeScript(tab.id, {file: "/content_scripts/fill.js"})
                        .then(function () {
                            console.log("Executed!");
                        })
                        .catch(function () {
                            console.error("Execute error");
                        });
                });
....

// fill.js
$('select option:contains("No")').attr('selected', 'selected').parent().val('No').change();
```

Приведенный выше код работает без каких-либо ошибок и опция выбора выбрана правильно.Но состояние select по-прежнему равно «Select a option».

Если я выполню этот код jquery в консоли браузера, состояние select изменится на «No».

Любой, кто знает, почему $ ('selector') .change () не работает в сценарии, но работает в консоли?

Сначала я поместил этот код в сценарий расширения содержимого, и он не работает.Я обнаружил, что это работает в консоли, поэтому я попытался выполнить сценарий на вкладке, а журнал находится в консоли вкладки, но выбор все еще не изменился.

Выбор выглядит неизменным из-за того, что onchange не запущен, и стиль, выбранный для выбора, может 'не обновляется.

...