chrome插件研发手册

摘要:
Chrome插件研发手册1:需求前景对于研发合作伙伴来说,总是有这样一种需求,他们希望通过代码来操作现有网站的行为,例如自动填写表单内容;自动登录网站

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

chrome插件研发手册第1张,调试它因为它的初始化是在插件安装到浏览器上时就初始化了,所有重新加载这个popup达到调试的目的需要在console执行parent.location.reload();重新刷新此页面

调试background:需要插件配置了background,再打开下面所示位置

chrome插件研发手册第2张

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

chrome插件研发手册第3张

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

免责声明:文章转载自《chrome插件研发手册》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇mount的新问题《弟子规》下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

React Native调试技巧与心得

转自:http://blog.csdn.net/quanqinyang/article/details/52215652 在做ReactNative开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。 D...

自定义滚动条样式jquery.tinyscrollbar.min.js 插件

-jquery.tinyscrollbar.min.js 自定义滚动条样式 代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="htt...

Chrome 错误代码:ERR_UNSAFE_PORT

最近在用Nginx发布多个站点测试,使用了90、95端口, 90端口访问正常,95端口就怎么也访问不了, 搜索了一下,Firefox也有类似的端口限制,不想修改浏览器设置的就改用其它端口吧 如果非要使用类似的端口,我们要做的是允许访问非常规端口地址,解决办法:选中Google Chrome 快捷方式,右键属性,在”目标”对应文本框添加: --explic...

CSS3实现10种Loading效果(转)

CSS3实现10种Loading效果 原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> <sp...

CSS3的新增选择器

一、兄弟选择器:选择E元素所有兄弟元素F。 <style> p~p{ color:#f00;} </style> </head> <body> <div><!--该div是父元素--> <p>中国十大杰出人物</p>...

Android开发 GridLayout网格布局

属性介绍本身属性 android:alignmentMode 说明:当设置alignMargins,使视图的外边界之间进行校准。可以取以下值: alignBounds – 对齐子视图边界。 alignMargins – 对齐子视距内容。 android:columnCount 说明:GridLayout的最大列数 android:rowCount 说明:...