Chrome 擴展程序的 Javascript 幫助

Question

首先，我不是程序員。 我根本不懂 Javascript。 我正在嘗試創建一個 Chrome 擴展程序，通過在網頁上獲取特定字符串來修改我的瀏覽器選項卡的標題。 我知道如何創建 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


}

}， 錯誤的）;

這是在開發人員模式下查看的網站。 我想獲取文本“blahhhh”並將其用作瀏覽器選項卡的標題。

下面是一個不同的網頁，這里的區別在於“div 類”名稱會改變。 這些類中的數字將更改為不同的數字，但結構和總體名稱保持不變。 例如，“ms-Button-label label- 549 ”可能會更改為“ms-Button-label label- 640 ”。 每當您刷新頁面時都會發生這種情況。 我發現“viewport”id 名稱並沒有改變，所以我認為我們是否可以將其用作參考，然后查看嵌套的 div 類並引用它們並提取值（在本例中為 Crystal Mountain）。

Answer 1

修復你的代碼

你得到了你需要的一切的 95%。
您現在缺少的一件事是input元素不具有“innerHTML”這一事實（這就是為什么它沒有像這樣關閉： <input>renderedText</input> ）。 相反，您想檢查它的值：

document.title = bannerTextLine[0].value;

一些改進：

按 ID 搜索
您有一個定義明確的輸入，通過使用 id 查找它可以更容易地獲得：

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

最終結果：

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

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

這是整個JS代碼。 請注意，我將事件更改為模糊，當表單離開時激活，這應該最適合您的情況。