1.现界面窗口开发比较艰难,如:窗口开发配置环境困难,知识点学习难,调试困难,无法和ai智能软件结合起来
网页界面开发较简单,调试简单,可以和ai智能软件结合起来
2.通过现有的方式开发的界面窗口过于简单,无法满足一些样式的界面美化,有点美中不足
网页界面样式多,美化网页快速,可以增强、丰富、窗口界面
3.界面开发的整体逻辑为:1.表单收集数据 2.表格展示数据 3.界面刷新数据 4.表单按钮运行动作,调用子程序 5.界面美化表格或表单
现有浏览器控制插件可以通过qk控制浏览器,实际也可以通过浏览器网页借助浏览器插件控制qk获取数据,运行动作,运行子程序
4.现浏览器控制插件和浏览器结合起来可以解决以上问题
需要简单构造一下现浏览器插件和浏览器的调用方式就可以实现界面之间的数据传递,数据刷新,等待界面,运行子程序(感觉应该不是太难,但实现的效果对界面开发有巨大提升)
5.例子
1.网页表单收集数据展示(网页就是简单的表单,就是最后接收一下数据变量)
演示动作构造,不能直接运行,需要自己写网页 需要打开浏览器 连接插件
https://getquicker.net/Sharedaction?code=d7cb5185-dc84-4256-a70b-08dde22d8eb3
2.网页按钮循环调用子程序(简单的网页按钮,就最后接收一个数据变量)
演示动作构造,不能直接运行,需要自己网网页,需要打开浏览器,连接插件:
https://getquicker.net/Sharedaction?code=3fb8b8d6-4a0c-40b6-a70c-08dde22d8eb3
1.不知是否可以通过在浏览器插件中".\content\content.js"文件里插入以下代码实现通过chrome.runtime.sendMessage方式向".\background\background.js"后台发送信息,
进而向qk发送信息调用子程序等 (不知qk是否支持这样调用子程序,读取变量)
2.在网页js代码中通过sessionStorage向浏览器插件js环境传递信息,使用eval转化a2函数,调用a2函数方式传递需要调用的子程序和参数
如:a2=eval(sessionStorage.getItem('cc')); a2("子程序","参数");
(实际可以在.\content\content.js文件里一步完成,向网页main中注入js)
3.思路就是:通过浏览器插件向网页中注入一个按钮在右上角(可以隐藏),再通过-调用a2()函数-使用sessionStorage方式传递信息和模拟点击该按钮向后台传递网页中的数据信息
模拟测试注入quickerSp函数 动作: https://getquicker.net/Sharedaction?code=fc666f29-7dc1-49d5-875e-08dde5f827a6
// 检查是否已初始化
if (typeof quicker_id === 'undefined') {
// 使用const声明常量
const button = document.createElement('button');
button.id = 'quicker_id';
// 使用模板字符串优化样式
button.style.cssText = `
position: fixed;
top: 0;
right: 0;
padding: 3px 5px;
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 26px;
color: #FFF;
z-index: 99999999;
background-color: #096;
`;
// 初始化点击计数器(闭包保护)
let clickCount = 0;
// 更新按钮文本的函数
const updateButtonText = () => {
button.textContent = ++clickCount;
};
// 初始化按钮文本
updateButtonText();
// 事件监听器(使用箭头函数保持this指向)
button.addEventListener('click', () => {
updateButtonText();
// 从sessionStorage获取数据
const aa = sessionStorage.getItem('aa'); sessionStorage.setItem('aa', null);
const bb = sessionStorage.getItem('bb'); sessionStorage.setItem('bb', null);
//发送信息到后台
chrome.runtime.sendMessage({ text: aa });
chrome.runtime.sendMessage({ text: bb });
console.log(aa,bb);
});
//这个是实现函数调用的关键方式
const a1 = `function a2(aa, bb) {
sessionStorage.setItem('aa', aa);
sessionStorage.setItem('bb', bb);
document.getElementById('quicker_id').click();}
a2;
`;
sessionStorage.setItem('cc', a1);
// 添加到DOM
document.body.appendChild(button);
// 全局引用(保持兼容性)
window.quicker_id = button;
}
4.实现类似WebView2模块中调用子程序的方式,感觉WebView2模块打开网页,有点慢