chrome插件研发手册

chrome插件研发手册

一：需求前景

                对于研发的小伙伴来讲，总会遇到这样的需求，想要经过代码操做已有网站的行为动做，如：自动填充表格内容（表单内容太多，想一键将表单内容填充）；自动登陆网站（网站登陆密码总是忘记，或者用户名密码太长，想一键登陆）……；对于这些需求均可以经过浏览器插件的方式解决，咱们这里就以chrome插件来论述

二：参考资源

                http://open.chrome.360.cn/extension_dev/overview.html

三：跟我学

1.如何打包

（参考：http://open.chrome.360.cn/extension_dev/packaging.html）

点击如图所示位置打包项目文件夹（第一次打包对应的秘钥不须要提供，打包完成后会自动生成，以后在打包就须要这个生成的秘钥了）

 

2.如何调试

（参考：http://open.chrome.360.cn/extension_dev/tut_debugging.html）

打开chrome://extensions/，并保证是开发者模式，点击如图所示地方，就能够转到插件调试位置

调试popup：对这插件鼠标右键选择inspect popup

，调试它由于它的初始化是在插件安装到浏览器上时就初始化了，全部从新加载这个popup达到调试的目的须要在console执行parent.location.reload();从新刷新此页面

调试background：须要插件配置了background，再打开下面所示位置

调试contentscript：在配置的指定页面打开开发者页面就能够看到你所插入的contentscript脚本了，contentscript与页面本来的js脚本是两个独立环境，不能相互调用对方方法的

3.插件中popup,background,contantscript消息传递机制

                        总结：background会一直在后台运行，contantscript通过配置加载在指定页面，但在指定页面关闭时，对应脚本就不会运行了，popup脚本会一直运行；他们之间消息的传递规则以下（一直要运行的脚本通常放在background中，popup通常做为插件页面展现）

参考：https://blog.csdn.net/summerxiachen/article/details/78698878

            4.如何解决popup页面中的跨域访问

                        主要原理：popup不能跨域只能插件中发送接收消息，可是background，contantscript就能够跨越操做（须要在配置文件中添加上指定域的地址）

                        参考：https://blog.csdn.net/summerxiachen/article/details/78698878

            5. 在popup中建立tab,同时页面定位到新tab页，回调函数不会被触发

参考：https://stackoverflow.com/questions/37089887/callback-of-chrome-tabs-create-is-not-triggered-in-a-popup

 四：follow me demo

                个人例子：搭建一个单点登陆（一个认证中心，一个插件客户端用来实现自动登陆效果的）SSO方案v2.0.docx