Не получается написать простейший юзерскрипт

Я плохо знаю javascript и не люблю его, но мне хотелось бы написать простейший юзерскрипт, который на сайте https://libretranslate.com переключает второй язык на русский при загрузке страницы.

Вот собственно единственная строчка кода, которая это делает:

document.getElementsByTagName("select")[1].value = "ru"

Этот код прекрасно работает из консоли браузера, но не работает из расширения Violentmonkey для Firefox.

Я подозреваю что проблема в событии onload(), но перепробовав множество вариантов, мне ничего не помогло. Главная непонятность заключается вот в чём:

Когда я прошу покрасить селект в красный цвет, он красится:

document.getElementsByTagName("select")[1].style.backgroundColor = "red"

т.е. он существует в документе, но поменять его value по какой-то причине нельзя.


Ответы (1 шт):

Автор решения: Dmitriy Surkov

Сам не силен в js, получилось что-то вроде этого:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://libretranslate.com/
// @icon         https://www.google.com/s2/favicons?domain=libretranslate.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function fireEvent(element,event){
        if (document.createEventObject){
            let evt = document.createEventObject();
            return element.fireEvent('on'+event,evt)
        }
        else{
            let evt = document.createEvent("HTMLEvents");
            evt.initEvent(event, true, true );
            return !element.dispatchEvent(evt);
        }
    };

    let observer = new MutationObserver(resetTimer);
    let timer = setTimeout(action, 0, observer);
    observer.observe(document, {childList: true, subtree: true});

    function resetTimer(changes, observer) {
        clearTimeout(timer);
        timer = setTimeout(action, 0, observer);
    }

    function action(observer) {
        let el = document.getElementsByTagName("select")[1]
        if(el) {
            observer.disconnect();
            el.selectedIndex = 16;
            fireEvent(el, 'change');
        }
    }
})();

Там помимо того, что подгружается элемент, еще грузится с сервера список с языками. Которые в свою очередь подставляются в select после загрузки. Нужно как то дождаться изменения в select и после этого уже изменять наш элемент.

→ Ссылка