谷歌、火狐浏览器扩展开发
一、组成部分
开发浏览器扩展最重要的是manifest.json文件,需要在文件中定义一系列关系。
来看看manifest.json文件5大组成部分
1、标题名称、版本号等,其中manifest_version必须配2
2、browser_action
可以定义扩展图标和点击图标弹出页面
3、content_scripts
内容脚本,嵌入到浏览器页面。可以引入js、css文件,及加载时机。该内容定义js可以监听到后台发送的消息进行交互,同时也可以主动发送消息。
4、background
类似后台,发送消息(可以找消息驱动了解)。
5、permissions
权限定义
{"name": "浏览器扩展测试例子", // 扩展的名称"manifest_version": 2, "version": "1.0.0", //扩展的版本"description": "浏览器扩展测试例子", //扩展的描述//图标"browser_action": { //制定扩展的图标放在Chrome的工具栏中"default_icon": "img/title.png" , // 图标文件的位置"default_title": "浏览器扩展测试例子",//当鼠标悬停于扩展图标上所显示的文字"default_popup": "title.html" // 用户单击扩展图标时所显示页面的文件位置}, //内容"content_scripts": [ //需要直接注入页面的JS,content-scripts和原始页面共享DOM,但是不共享JS{"matches": ["<all_urls>"], //表示匹配所有地址。抓取特定网页的数据,只需要写该网站即可//多个JS按顺序注入"match_about_blank": true,"js": ["js/jquery/jquery-3.5.1.min.js",//jquery"js/self/content-script.js" , //content_scripts的主要逻辑内容"js/self/common.js"//业务逻辑], "css":[],"run_at":"document_start", // 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一 个表示页面空闲时,默认document_idle"all_frames":false //定义的脚本是否会注入到嵌入式框架中}],//后台"background":{//"page":"background.html""scripts": ["js/self/background.js"],"persistent":true},//权限"permissions":["activeTab","contextMenus", // 右键菜单"tabs", // 标签"<all_urls>","webRequest", // web请求"webRequestBlocking",//"storage",// 插件本地存储"http://*/*", // 可以通过executeScript或者insertCSS访问的网站"https://*/*" // 可以通过executeScript或者insertCSS访问的网站]
}
二、测试步骤
1.首先在后台backgroud定义(右键菜单、消息监听)
1)测试创建右键菜单,创建菜单之后,在浏览器添加扩展后,打开新页面,鼠标右键可以明显看到你注册到的按钮
//type 类型,可选:["normal", "checkbox", "radio", "separator"],默认 normal
//title 显示的文字,除非为“separator”类型否则此参数必需,如果类型为“selection”,可以使用%s显示选定的文本
//contexts 上下文环境,可选:["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"],默认page
//
chrome.contextMenus.create({id:'smq',type: 'normal', title: '测试右键按钮(ALT+W)', contexts: ['all'],onclick: function(params){//点击事件sendMessage({rightSmq:true });//为了兼容其他浏览器不使用getSelected、sendRequest/*chrome.tabs.getSelected(null , function(tab){chrome.tabs.sendRequest(tab.id, {rightSmq: true});}); */ }
});
2)消息监听,这里消息,可以监听到content_scripts和browser_action发来的消息
chrome.runtime.onMessage.addListener(function(res, sender, sendResponse){console.log(res);//来自alt + s快捷的事件if (res.listenerAlt83){sendMessage("快捷键 alt + s触发的");}sendResponse();return true;
});
3)后台发送消息方式(由content_scripts定义消息监听)
//发送消息
function sendMessage(paramObject){chrome.tabs.query({active: true, currentWindow: true}, function(tabs){chrome.tabs.sendMessage((tabs.length ? tabs[0].id : null) , paramObject , function(response){});});
}
2.browser_action
1)title定义,简单的在页面上添加一个按钮,注意点:title页面不能写内嵌脚本,只能引用脚本。
title.js
$(function(){//获取后台对象, title可以获取到后台对象操作消息var backGroundObject = chrome.extension.getBackgroundPage();$("#testButton").click(function(){//这个消息最终在content-script backGroundObject.sendMessage({test:"hhahahah"});});});
过程: 按钮点击发送消息(backGroundObject.sendMessage({test:"hhahahah"});,被content-script 中的chrome.runtime.onMessage.addListener监听到打印消息{test:"hhahahah"}。 另外,这个过程你会发现在title中console.log、alter是无效的。
3.content-script
//接收background/popup传来的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){console.log(request);sendResponse();return true;
});//监听页面键盘
$(document).keydown(function(e){var keycode = e.keyCode || e.which; //监听alt + sif (e.altKey && keycode == 83){chrome.runtime.sendMessage({listenerAlt83:true}, function(response){});}
});
简单的监听接收后台发送的消息,同时在这个js可以添加事件监听,这里我注册了alt + s 监听,当你按照快捷时候,浏览器控制台输出“快捷键 alt + s触发的”,当然也可以通过浏览的注册监听。其实这个js就是被嵌套在页面的js,可以访问得到页面的dom结构(backgroud、browser_action是不可以操作dom的)。
到此,backgroud、browser_action、content_scripts之间交互已经完毕。
4.浏览器添加扩展,以谷歌为例(火狐有点特别)
在浏览器找到更多工具 -> 扩展程序 选择你开发扩展的目录,添加之后右上角就会出现图标了,打开新页面测试扩展功能,在此页面石触发不了的
总结
1、消息机制
在浏览器扩展中,很明显想要各模块调用其它模块方法需要通过消息传递触发。
2、content_scripts与browser_action、backgroud不同
通过观察会发现content_scripts会被添加到页面上,可以顺利访问页面元素。但是在browser_action、backgroud是做不到的
其它
1、浏览器扩展还可以添加系统消息,有兴趣可以了解怎么把消息发送到系统桌面。
2、谷歌和狐火扩展开发过程差不多,但是有内置函数的区别,如果想要兼容,就找一些共同的公函,但是它们有各自api
3、我的一个二维码识别插件GitHub - sakyoka/QrCodeDemo: 二维码识别浏览器扩展
4、本章例子浏览器扩展开发测试例子-Javascript文档类资源-CSDN下载
谷歌、火狐浏览器扩展开发相关推荐
- Firefox火狐浏览器web开发调试开启强制刷新缓存模式
Firefox火狐浏览器web开发调试开启强制刷新缓存模式 最近做项目的时候,在火狐浏览器发现缓存难清理,用Ctrl+F5 Ctrl+R 等在谷歌和IE浏览器的快捷键没用,搜索了一下,发现火狐清理缓存 ...
- 常见浏览器扩展开发笔记(chrome firefox 360 baidu qq sougou liebao uc opera)
浏览器扩展开发貌似时下很冷门啊,但是不少企业还是有类似的应用,360的抢票插件啊,笔者最近在做的网页翻译扩展之类的.笔者在开发的过程中,遇到了不少坑,说是坑,说白了就是各个厂商支持的API不统一导致的 ...
- 谷歌火狐浏览器限制的端口
最近新项目,开了新端口进行测试,端口号是6666,却发现火狐和谷歌浏览器均不能访问. 火狐提示如下: 此地址使用了一个通常用于网络浏览以外目的的端口.出于安全原因,Firefox 取消了该请求. 谷歌 ...
- Firefox(火狐)浏览器扩展开发初探
最近开发一个FF的扩展,自动完成公司的订餐操作,主要完成的功能很简单:登陆网站,执行一个特定操作,并在ff的状态栏内显示执行的成功或者失败的状态.以前没有写过FF扩展,需要从头学习,在完成这个扩展过程 ...
- 谷歌——火狐浏览器及插件
谷歌浏览器: Xmarks Bookmark Sync 1.0.26 Backup and sync your bookmarks, passwords and open tabs across co ...
- 用burpsuite抓包,谷歌 / 火狐浏览器 该怎么设置BurpSuite代理?——超详细教程——CTF Web小白入门基础篇
以下是我自己操作过的,理一理思路. 使用BurpSuite的套路是:先浏览器设置BurpSuite代理-->BurpSuite 调至on状态-->访问web程序-->进行抓包分析 最 ...
- 菜鸟入门之火狐浏览器扩展和插件使用指南
相信大家对火狐浏览器已经非常熟悉,今天宏锦软件爱好者给大家讲解火狐的插件的安装及使用,火狐的附加组件系统,分为扩展和插件.大家平时安装的Adblock等均属于扩展,为火狐提供更好的功能,更方便的使用方 ...
- Firefox OS 2.0 模拟器 – 使用官方火狐浏览器扩展无痛完美模拟体验火狐手机系统
在移动设备(手机)越来越红火的今天,除了 Android.iOS.Windows Phone 这些我们熟悉的操作系统之外,一些新生的系统也在蠢蠢欲动了,譬如我们曾经介绍过的 FireFox OS 系统 ...
- 浏览器扩展开发系列教程(一)
以谷歌内核的浏览器扩展,包括 edge chrome ,还有我们常用的国产浏览器都能使用 浏览器扩展是一种软件,以增强Chrome内核浏览器的功能.浏览器扩展使用HTML.JavaScript.CSS ...
- 一、如何创建一个状态栏扩展(火狐插件扩展开发教程)
因为项目的需要,一些功能需要在火狐上面实现,一点也不了解火狐插件的开发,网上的中文资料也少得可怜, 没办法,只好自己研究一下英文文档,慢慢开发了,在这里备份一下. 学编程,当然是从Hellow,wor ...
最新文章
- HTML5十五大新特性
- python字符编码导致dict中key不同
- SAP 电商云 Spartacus UI 根据 CMS Component uid 获取数据
- 生产者-消费者模式的实现
- python换循环颜色_python – 增加matplotlib颜色循环
- 异常在哪一层处理_WiFi速度慢,信号不稳定,除了重启路由器外,自己能怎么处理?...
- python 中del 的用法
- ModalPopupExtender控件主要有两种使用方式:客户端使用方式和服务器端使用方式
- Write operations are not allowed in read-only mode (FlushMode.MANUAL)
- python监控服务器信息进行可视化_Python实现数据可视化,看如何监控你的爬虫
- oracle指定过个时间点 job_SQL SERVER 快速恢复:生成指定时间点的恢复脚本
- zookeeper学习之环境搭建
- mysql 查询指定日期的上一周的最后一天
- 手机网页form表单样式_超全面!13种表单样式的设计方式都在这了
- 纸上谈兵_JESD204B
- maya! board_教你玩转MAYA的四十二精华造诣(第二期)
- Netfilter学习之NAT类型动态配置(三)MASQUERADE内核空间的实现
- 算法:URL短地址压缩算法-短网址映射。
- 【论文写作——投稿和审稿】
- php聊天动图,聊天室技术 -- 贴图的实现_PHP教程