edge扩展开发-Extjs

发布时间 2023-06-07 23:27:31作者: wstong

插件的一个按钮的功能是对一个网站的搜索框进行补充,该搜索框输入了内容之后,会进行模糊搜索,想使用jquery对这个input的value直接进行修改发现没有用,试了一下触发了change也没用,在查看事件侦听器后,发现模糊搜索是发生了keyup事件,但是使用jquery的trigger触发keyup事件没什么用。

在查看以及分析了许久之后,发现该网站是使用了extjs,该组件keyup的内容为

remoteField.on('keyup', function(obj, e) {
    var key = e.getKey();
    //在这里处理keyup事件
});

使用getCmp获取对象,使用fireEvent来触发keyup

var remoteField = Ext.getCmp('remoteField')
remoteField.fireEvent('keyup', remoteField, event)

然后就发现,在控制台触发这个keyup事件确实可以触发,但是要直接修改搜索框的内容还是比较麻烦的,在查阅了更多资料后,发现可以使用下面的方法来获取组件对象

Ext.getCmp(组件id)

然后发现搜索框的value值果然存储的值和输入框的值是不一样的,使用Ext.getCmp()对value值直接进行修改就可以了。
然后后面又又又出现问题了,在扩展编写的js里,Ext.getCmp()用不了,一直获取不到界面的组件对象,在控制台却可以,因此想到应该是页面环境和扩展的环境不一样导致的。
继续查阅资料,发现确实是这样,不过扩展可以访问页面的dom对象,因此想到可以利用这点让页面来执行Extjs相关的函数。
最后代码如下:

function execute_page_script(code) {
    const script = document.createElement('script');
    script.innerHTML = code;
    script.className = 'wstong_class'
    document.body.appendChild(script);
    $("script[class='wstong_class']").remove();  // 执行完毕删除该标签
}