在JS注入中获取并修改Kendo DropDownList索引的问题

我正在用Scripty开发一款Chrome扩展脚本，用来自动填充表单，目前卡在修改KendoDropDownList的选中索引这一步——要么找不到正确的元素，要么没法复用网站自身的JS逻辑实现功能。

当前尝试的代码及问题 #

我写了每秒执行一次的脚本（适配窗口变化和多页面场景），但运行时出现了问题：

var dropDownList = document.getElementById("DocumentType");
if (!dropDownList) {
    console.log("Could not find Document Type Drop Down List");
    return;
} // 这部分能正常执行
dropDownList.select(5); // 无报错，但完全没效果
var dataVar = dropDownList.data("kendoDropDownList"); // 抛出异常：".data( is not a function"
if (!dataVar) {  // 从来没成功获取到这个变量
    console.log("Element did not contain data set.");
    return;
}
if ((dropDownList.data("kendoDropDownList").index()) != 5) {
    console.log("Changing index of drop down list to Identity Proof.")
    dropDownList.data("kendoDropDownList").select(5);
}

控制台可正常运行的代码 #

下面这段代码在浏览器控制台和网站自身的JS里都能正常执行，直接修改选中索引：

$("#DocumentType").data("kendoDropDownList").select(0);

核心问题 #

我对JS不太熟悉，搞不懂为什么扩展注入的脚本不能像控制台那样用$查找元素，也不知道怎么才能正确获取KendoDropDownList实例并修改它的索引。

解决方案 #

问题根源 #

Chrome扩展的内容脚本和页面本身的JS环境是完全隔离的：

• 页面里的$是网站引入的jQuery，内容脚本里没有这个变量；
• KendoDropDownList的实例存在页面上下文的data缓存里，内容脚本无法直接访问。

所以必须把操作Kendo的代码放到页面的JS上下文中执行，而不是在内容脚本里直接调用。

方案1：注入脚本到页面上下文执行 #

通过创建<script>标签，把操作Kendo的代码注入到页面中运行，这样就能复用网站的jQuery和Kendo实例：

function updateDropDownIndex() {
    // 创建脚本元素
    const script = document.createElement('script');
    script.textContent = `
        // 这段代码会在页面的JS环境中执行
        const dropDown = $("#DocumentType").data("kendoDropDownList");
        if (dropDown && dropDown.index() !== 5) {
            console.log("Changing index to Identity Proof.");
            dropDown.select(5);
        }
    `;
    // 注入到页面并执行
    document.head.appendChild(script);
    // 执行完成后移除脚本
    script.remove();
}

// 保持每秒执行一次的逻辑
setInterval(updateDropDownIndex, 1000);

方案2：不依赖jQuery，用Kendo全局方法获取实例 #

如果页面没有暴露jQuery，但加载了Kendo的全局对象，可以用kendo.widgetInstance来获取元素对应的下拉列表实例：

function updateDropDownIndex() {
    const script = document.createElement('script');
    script.textContent = `
        const dropDownElement = document.getElementById("DocumentType");
        // 获取Kendo DropDownList实例
        const dropDown = kendo.widgetInstance(dropDownElement, kendo.ui.DropDownList);
        if (dropDown && dropDown.index() !== 5) {
            dropDown.select(5);
        }
    `;
    document.head.appendChild(script);
    script.remove();
}

setInterval(updateDropDownIndex, 1000);

补充说明 #

这种注入脚本的方式是Chrome扩展中跨上下文访问页面JS对象的标准做法，因为内容脚本的沙箱机制不允许直接访问页面的全局变量和第三方库实例。

内容的提问来源于stack exchange，提问作者C_States