时间戳

首页 > 解决方案 > Chrome 扩展的 Javascript 帮助

javascript - Chrome 扩展的 Javascript 帮助

问题描述

首先，我不是程序员。我根本不懂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 ”。每当您刷新页面时都会发生这种情况。我发现“视口”的 id 名称并没有改变，所以我想我们是否可以将其用作参考，然后只需查看嵌套的 div 类并引用它们并提取值（在本例中为 Crystal Mountain）。

在此处输入图像描述

标签： javascriptgoogle-chrome-extension

解决方案

修复你的代码

你得到了你需要的一切的 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 代码。请注意，我将事件更改为在离开表单时激活的模糊，这应该最适合您的情况。

推荐阅读