浏览器插件项目复盘

Winter Wang -

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类似的代码为什么不行。

经验教训

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

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