chrome 插件开发心得
最近一个多月都在开发chrome的插件, 从无到有, 算是了解部分了! 说下chrome开发前需要具备的基本东西吧:
- H5的前端基础, js一定要会, 这个是必须的, 不说精通熟练, 但是至少要掌握.
- 基本的英文阅读能力, 因为很多东西要官方文档, 虽然360有翻译了官方文档, 但是是2013的了, 可以对照起来看!
- 有足够的耐心.
在做插件时 我的H5是属于基本不会的! 也是查阅大量的资料, 边做边学,才终于将公司要的插件开发出来!
说下插件开发吧
怎么才知道我需要什么文件 background.js, content_script.js, popup.js文件的创建是根据实际情况的
- 需要和网页交互的, 比如要获取或者更改当前DOM里面的元素,就需要创建content_script.js
- 需要在插件里面显示内容, 需要创建popup.HTML和popup.js两个文件,
- 需要做数据的保存的话可以创建background.js
在这之前 先要在manifest.json里面获取权限
"permissions" : ["alarms","tabs","https://*/*","*://*/*","http://*/*"],"content_scripts":[{"matches":["https://*/*","*://*/*",],"js":["lib/jquery-2.0.0.min.js", "content_script.js"],"run_at": "document_end"}]
复制代码
background.js, content_script.js, popup.js文件之间的通讯, 这里只是做讲了发送一次消息的. 发送多次消息,也就是长连接和这个区别不大, 只是改了部分等下,这个百度是可以搜索到的,我就不说了
#content_script.js可以做的事情
###1. content_script.js向background.js发送消息
// 这里要先获取在那个标签页面
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {// 这里也可以知道当前标签页的URL tabs[0].urlchrome.tabs.sendMessage(tabs[0].id, { message: "begin"}, function (response) {});});;
复制代码
###2. content_script.js向popup.js发送消息
// 这里使用的是extension
chrome.extension.sendMessage({msg: "message"},function (response) {// response 是background 收到消息后的返回数据if (response !== undefined) {}});
复制代码
###3. content_script.js接收来自popup和background的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) {// request 你收到的内容,// sender 可以获取到你的tab的url// sendRequest 收到消息后回调发送消息的人 也就是上面response得到东西
});
复制代码
#background.js可以做的事情
###1. background向content_script.js发送消息
// 这里使用的是runtime
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {chrome.tabs.sendMessage(tabs[0].id, { message: "begin"}, function (response) {});});;
复制代码
###2. background 向popup.js发送消息
// 在background里面定义变量data
var data = "我是数据"
复制代码
// 在popup.js里面
// popup.js是可以直接获取到background里面的数据
var data = chrome.extension.getBackgroundPage().data;
console.log(data);
复制代码
###3. background接收来自popup和content_script.js的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) {// request 你收到的内容,// sender 可以获取到你的tab的url// sendRequest 收到消息后回调发送消息的人 也就是上面response得到东西
});
复制代码
#popup.js可以做的事情
###1. popup.js向content_script.js发送消息
// 这里要先获取在那个标签页面
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {// 这里也可以知道当前标签页的URL tabs[0].urlchrome.tabs.sendMessage(tabs[0].id, { message: "begin"}, function (response) {});});;
复制代码
###2. popup.js 向background发送消息
chrome.extension.sendMessage({msg: "message"},function (response) {// response 是background 收到消息后的返回数据if (response !== undefined) {}});
复制代码
###3. popup接收来自content_script.js的消息
//使用extension
chrome.extension.onMessage.addListener(function(request, sender, sendRequest) {// request 你收到的内容,// sender 可以获取到你的tab的url// sendRequest 收到消息后回调发送消息的人 也就是上面response得到东西
});
复制代码
更新当前页面的url
chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {chrome.tabs.update(tabs[0].id, {url: "https: www.baidu.com"});});
复制代码
以上内容基本可以解决插件开发的基本问题了, 其他的api 可以进入Google的开发者网站查询!
转载于:https://juejin.im/post/5a41ae82f265da431876fdbe
chrome 插件开发心得相关推荐
- chrome 插件开发各种功能demo_Chrome 插件开发全攻略
Chrome 浏览器相信大家都用得比较多,有很多的优点,比如简洁.强大的开发者工具等,但是更让大家映像深刻的是有各种各样有趣.有用的插件,今天要给大家推荐的开源项目是 Chrome 插件开发全攻略,你 ...
- vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
- chrome插件开发记录(1)——解决问题“清单文件缺失或不可读”
chrome插件开发记录(1)--解决问题"清单文件缺失或不可读" 参考文章: (1)chrome插件开发记录(1)--解决问题"清单文件缺失或不可读" (2) ...
- Chrome 插件开发-右键菜单开发实战演示,浏览器页面右键菜单选项设置,插件右键菜单点击插件名跳转主页设置
Chrome 插件开发 - 菜单选项 浏览器页面右键菜单选项设置 ① 核心代码演示 ② 效果展示 ③ 详细参数文档 插件右键菜单点击插件名跳转主页设置 ① 核心代码演示 ② 演示效果图 浏览器页面右键 ...
- Chrome插件开发之一: 搭建基本结构
Chrome插件开发之一: http://gdfans.net/?p=14 搭建基本结构 作者:cmdbuf 发布时间:2010年05月28日 发表评论 (6) 4阅读评论 欢迎喜爱Chrome的谷友 ...
- Chrome 插件开发与本地程序交互流程
Chrome 插件开发与本地程序交互流程 一. 将本地程序写入注册表 可以采用bat的方式写入注册表 REG ADD "HKCU\Software\Google\Chrome\NativeM ...
- Chrome插件开发-右键菜单开启页面编辑
开发一个执行js脚本改变页面DOM的Chrome插件,manifest_version版本为3. Chrome插件基本知识 Chrome插件通常由以下几部分组成: manifest.json 该文件为 ...
- Chrome插件开发--后台监控网页并自动刷新,点击页面元素
2015年6.17号,在线旅游网站蚂蜂窝出现了抢粽子活动:页面会出现一些粽子,点击粽子,即抢到.很明显,这是一个重复性的劳动,可以代码自动刷新页面,点击页面上的粽子. 本方案中选择了开发一款Chrom ...
- 浙大教务网登录验证码自动填充--chrome插件开发
浙大教务网登录验证码自动填充--chrome插件开发 一.前言 二.验证码图像识别 三.chrome插件开发 四.插件使用和结果展示 五.未来展望 六.提示 一.前言 女朋友说"教务网每次登 ...
最新文章
- php mms,PHP代码示例_PHP账号余额查询接口 | 微米-中国领先的短信彩信接口平台服务商...
- python装饰器教学_Python装饰器学习(九步入门)
- mysql int(40)_MySQL Integer类型与INT(11)
- 多个asp.net程序共用Session(sso程序的外设接口)
- UCOS中断函数的编写
- 计组-CISC/RISC小节
- html5input输入框设置无边框_芯片充电两大改变,无看点的iPad8,上手体验发现并不简单!...
- 浅谈Vue内置component组件的应用场景
- HTML --- 简单的标签
- SpringBoot整合Shiro实现权限控制,验证码
- 在设计四人抢答器中灯全亮_数字电子技术课程设计报告(四人抢答器).doc
- python numpy中bool变量转为1或0
- 你缺的不是时间而是专注力
- 怎么快速批量修改图片大小?
- linux 设置 用户 密码,Linux系统怎么设置开机密码?Linux设置开机密码的方法
- 【Effective C++】总结
- OPENCART之兼容多种浏览器的加入收藏夹扩展功能插件(CROSS-BROWSER BOOKMAR
- 陪你一起看草原 在线Flash,在线歌曲
- java 字体大小 像素_字体的大小(pt)和像素(px)如何转换?
- 各种手机处理器排行榜_手机处理器排行前十位,分别是什么?