2 min read

浏览器插件项目复盘

Chrome浏览器插件的开发基本上算是网页前端开发的范畴,技术栈相同。自己前端开发是入门级的水平,对相关的技术都有了解,开发过程虽然磕磕绊绊,但都没有大的问题。项目中碰到的难点是插件的消息通信和JS的一个知识点。

消息通信

由于插件中使用了Content Script,而Content Script运行在网页的上下文中,和插件的其他部分的环境隔离,因为涉及到和其他部分通信的问题。

项目开始时我还没有读过Chrome插件的开发者文档,因而当需要实现消息通信的功能时,只好临时抱佛脚,检索资料。 过程中,有找到官方文档,然而文档太长了,我根本没耐心,只想快点找到一个Quick Fix,解决问题。整个过程就像苍蝇乱撞一般,想找个出路。虽然在Stack Overflow找到了现成的代码,但想要在项目中实现,需要对Chrome插件的架构、Content Script的调试方法都有所了解,而我这些都很茫然,因而又是一番曲折后,才是弄好。

模拟列表的点选操作

Content Script要做的一件功能就是用JS脚本模拟一个select列表的点选操作,选择后界面会发生改变,Google后找到一段jQuery代码:

$('#menu').val('option').trigger('change');

但是在浏览器终端执行后没有出现该有的界面变化,想要去找该事件对应JS代码,而代码经过了混淆,很难找到。束手无策之下,找同事求救,同事抛来一段JS代码:

document.getElementById("#menu").value = "option";
document.getElementById("#menu").dispatchEvent(new Event('change'));

运行后竟然成功了!不清楚jQuery类似的代码为什么不行。

经验教训

阅读文档很重要,文档相当于地图,技术细节不必精通,但知识地图一定要清楚。这样,遇到问题才能按图索骥。而triggerdispatchEvent两个方法的区别,算是隐性知识,只能靠实践获取,另一方面也怪我JS的基础太差,不知道尝试下原生的写法。

之前有想学过Chrome插件开发,但是打开文档看了一点就放弃了,心想:东西好多,等到用的时候再学吧。结果真到用的时候,也没时间学。那是如果抱着获取知识地图的态度去学,相信会更有动力。