Javascript справка для расширения Chrome

Question

Прежде всего, я не программист. Я вообще не знаю Javascript. Я пытаюсь создать расширение Chrome, которое изменяет заголовок вкладки моего браузера, используя указанную строку c на веб-странице. Я знаю, как создавать Chrome расширения (просто), и мне просто нужно изменить Javascript, чтобы делать то, что я хочу (что я не знаю, как).

Я нашел следующий скрипт в сети и пытаюсь его изменить, но не могу понять, как заставить его работать. Вот сценарий:

https://pastebin.com/dY1LSdjT

// Fire this event any time the mouse is moving.  Sucks for performance, but it's a better experience

document.addEventListener ("mousemove", function () {

// This will get us the banner
let bannerTextElements = document.getElementsByClassName("dijitReset dijitInputField dijitInputContainer");

 console.log(bannerTextElements);
 console.log(bannerTextElements[0]);

if (bannerTextElements[0]) {

     console.log("ok!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
     console.log(bannerTextElements[0].innerHTML);

    // This will get us the text
    let bannerTextLine = bannerTextElements[0].getElementsByClassName("dijitReset dijitInputInner");

     console.log(bannerTextLine);

document.title = bannerTextLine[0].innerHTML


}

}, false);

А вот и сайт, просмотренный в режиме разработчика. Я хотел бы получить текст «бла» и использовать его в качестве заголовка вкладки моего браузера.

Ниже приведена другая веб-страница, и разница здесь в том, что имена "div class" будут изменены. Числа в этом классе изменятся на разные числа, но структура и общее имя останутся прежними Например, «Метка метки кнопки MS- 549 » может измениться на «Метка метки кнопки MS- 640 ». Это происходит всякий раз, когда вы обновляете sh страницу. Я обнаружил, что имя идентификатора «viewport» не меняется, поэтому я думаю, что если мы сможем использовать это как ссылку, а затем просто посмотреть на вложенные классы div и сослаться на них и извлечь значение (в данном случае Crystal Mountain).

Answer 1

Исправление вашего кода

Вы получили около 95% всего, что вам нужно.
Единственное, чего вам не хватает сейчас, так это того факта, что элемент input не обладает "внутренним *". 1025 * "(вот почему оно не закрывается так: <input>renderedText</input>). Вместо вы хотите проверить его значение:

document.title = bannerTextLine[0].value;

Некоторые улучшения:

Поиск по идентификатору
У вас есть четкое определение входные данные, которые легче получить, посмотрев его с помощью идентификатора:

let bannerTextLine = document.getElementById('lanDeviceIndex_searchBox');

Конечный результат:

const bannerTextLine = document.getElementById('lanDeviceIndex_searchBox');

bannerTextLine.addEventListener("blur", function() {
    if (bannerTextLine != null) {
        document.title = bannerTextLine.value;
    }
});

Это весь код JS. Обратите внимание, что я изменил событие на blur , которое активируется при выходе из формы, это должно быть оптимальным для вашего случая.