记浏览器帐号登录插件开发遇到的问题

背景

 

        由于负责公司帐号相关工作，经常和各个业务有着千丝万缕的关系。最近，一个业务向我了解了一下帐号登录相关的问题，突然脑子里萌发了一个想法：为什么我作为负责帐号的前端，不自己实现一个方便业务的插件呢？于是乎，开始准备开发一个内部使用的chrome浏览器插件，这个插件的功能是：帮助开发者或者测试快速切换帐号进行登录，只关注功能相关的事情，并且展示了帐号相关信息设置或者修改的入口，加快开发和测试的效率。

 

开始准备

 

        由于这个想法就是个人的想法，并结合了业务之前反馈的有的问题。就自己把主要功能点和应该怎么呈现稍微的想了一下。当这个内部产品的雏形出现之后，就开始技术准备啦。首先这个是chrome浏览器的插件，很显然要查看插件开发的相关文档，这里找到了chrome官方文档还有官方文档的译文。很显然，我的能力来说译文更容易入手。简单的看了一下入门和一些主要功能有了大致的了解。看了不少文档，个人感觉（ https://crxdoc-zh.appspot.com/extensions/index） 翻译和制作的比较清晰，看着很舒服。如果你也开发chrome插件的话，建议可以参考这个文档，在这里对作者表示感谢！如果看不到的话，也可以来这里（ https://lmk123.duapp.com/extensions/devguide），一个不需要FQ的地址。

    

动手过程

 

        看了入门文档（ https://lmk123.duapp.com/extensions/getstarted）的例子，很轻松的就成功的制作了例子上的插件，瞬间自信心爆棚，感觉写插件挺简单的呀。当自己动手写我的插件的时候却发现，太痛苦啦。各种报错，各种不能运行。下面介绍一下，在这个过程中存在的比较突出的问题，可能对大家特别是新手有借鉴意义。

• manifest.json中content_scripts的配置

            这里可以配置需要注入页面上的js或者是css文件，并且还有其他配置选项，这些配置说明可以参考文档，我这里就不多作说明了。需要注意的是：

• 引入的js必须是本地文件，不能是线上的资源；
• 控制注入的js的权限在那些域名下有效；
• 开发过程中，要确保要注入页面的js确实已经注入成功，再进行调试；
• content_scrpit配置的js和chrome。tabs.excuteScript(tabId, {file: 'xxx.js'}, callback)属于相同的功能
• 页面的js和插件的js执行环境是独立的，不能使用对方的变量或方法
• 插件里请求的跨域问题

            插件索要发送的请求，不能使用第三方库（如：jquery）的请求方法，因为这样发送的请求，会跨域。解决方案：使用  XMLHttpRequest解决，这里需要注意的是，受到安全的限制，无法通过setRequestHeader设置Reffer。可以自己封装一个方法，以后就可以很方便的使用了。在这里还要注意的是，所要发送的请求地址，必须在manifest.json中的permissions就行配置，不然也会出现错误的。

• 插件和页面之间的通信

            页面之间通信的方式很多，接口也都不一样，当然适用场景也有却别。比较痛苦的时，这些接口在chrome的不同版本才能使用，所以是使用的时候需要注意一下。这里（ https://lmk123.duapp.com/extensions/devguide）对各个接口说明的比较详细。我使用的通信方法是：

    chrome.tabs.sendRequest(tabId, {}, function(response){});

    chrome.extension.onRequest.addListener(function(message, sender, sendResponse){});

通过上面的方式就行消息的传输，其他的方式可以参考文档进行使用。

 

遗留问题

 

    遇到了一个很奇怪的现象，有的页面无法注入js，一直没有出来原因，也希望有了解的可以分享一下，不胜感激，

 

插件功能展示

 

    已登录帐号信息展示、相关功能修改入口

 

    登录帐号

 

展现测试帐号列表，然后一键登录，其中帐号列表是服务端维护，可以保证更新帐号列表信息。

 

 

        由于是第一次开发，分享的也是自己的一些感受，难免会有问题，也感谢各位能不吝赐教。

 

参考资料：

    

https://lmk123.duapp.com/extensions/devguide

http://open.se.360.cn/open/extension_dev/getstarted.html

https://developer.chrome.com/extensions