Javascript help for a Chrome extension

Question

First of all, I am not a programmer. I do not know Javascript at all. I'm trying to create a Chrome extension that modifies my browser tab's title, by taking a specific string on a webpage. I know how to create Chrome extensions (just barely) and I just need to modify the Javascript to do what I want (which I do not know how).

I found the following script online and am trying to modify it but can't figure out how to get it working. Here is the script:

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

And here's the website viewed in developer mode. I would like to get the text "blahhhh" and use that for the title of my browser tab.

Below is a different webpage and the difference here is that the "div class" names will change. The numbers in those class will change to different numbers, but the structure and the overall name remains the same. For example, "ms-Button-label label- 549 " may change to "ms-Button-label label- 640 ". This happens whenever you refresh the page. I found that the "viewport" id name doesn't change though, so I think if we can use that as a reference and then just look at the nested div classes and reference them and extract the value (in this case Crystal Mountain).

Answer 1

Fixing your code

You got like 95% of everything you need.
The one thing you are missing right now is that the fact that an input element does not posses an "innerHTML" (That is why it isn't closed like this: <input>renderedText</input> ). Instead you want to check for it's value:

document.title = bannerTextLine[0].value;

Some Improvements:

Search by ID
You have a well defined input which can be more easily obtained by looking it up using the id:

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

End result:

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

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

This is the entire JS code. Note that I changed the event to blur which activates when the form is left, this should be optimal for your case.