【chrome】插件开发-教程00(如何开发插件)
一 chrome浏览器插件的基础知识
1.认识chrome插件文件:
chrome插件的扩展名是:.crx,可以在chrome官方的应用商店下载(https://chrome.google.com/webstore/category/extensions?hl=zh-CN),从网上下载的插件安装成功后,插件的源文件会被自动删除,chrome插件的安装后的默认位置是:~/Library/Application Support/Google/Chrome/Default/Extensions/文件夹下面,想要打开这个文件夹,通常都需要通过fiddler的前往文件夹输入路劲功能,因为资源文件夹大多时候是隐藏的,需要设置才能在fiddler中看到。.crx文件实际上是一个压缩文件,解压后发现里面的内容就是js,css,html等web文件和图标以及manifest文件,应用(扩展)可以与Web页面交互,或者通过content script或cross-origin XMLHttpRequests与服务器交互。应用(扩展)还可以访问浏览器提供的内部功能,例如标签或书签等。插件解压后的文件列表如下图:
2.chrome插件分类:
chrome插件分为两种:一种是出现在浏览器工具栏中的Browser Actions,另一种就是出现在地址栏中的Page Actions,这两者的区别是:BA插件的功能对所有的页面都可以使用,但是PA插件只会对一些特定的页面地址才会生效的插件,所以它对于不生效的页面是隐藏不显示的。
3. 动手开发一个很很简单的demo
a. 新建一个文件夹,然后在该文件夹下面增加一个manifest.json文件,文件内容如下:
{"name": "myfirstExtension","version": "0.0.1","manifest_version": 2,"description": "a extension demo","browser_action": {"default_icon": "48x48.png","default_title": "demo title","default_popup": "popup.html"} } |
其中name代表应用程序名,version代表版本号,description代表功能描述。这些在安装扩展后就能看到,browser_action代表工具栏扩展,它会定义图标地址、标题(也就是鼠标悬停提示)和默认的popup页面。我们这里定义的popup页面为popup.html。
b. 接下来开始定义popup.html显示,它不需要使用<html>、<head>和<body>标签,可以直接写上样式、脚本和html。我们的popup.html源码为:
<meta charset="utf-8" /> <style> *{margin: 0; padding: 0;} .main{padding: 50px;background-color: #ccc; color:green;} .content{color: red; line-height: 30px;font-size: 22px;} </style> <div class="main"><h1>女神高圆圆哪里去了</div><div class="content">好好撸代码,高圆圆嫁人了</div><img src="gyy.jpeg" /> </div> |
c. 把需要的静态资源添加到该目录下面,准备好之后打开浏览器,然后在地址栏输入:chrome://extensions 进入chrome的扩展页面,点击页面上的“加载已解压的扩展程序..”,然后选择我们的文件目录,然后ok了,浏览器右上角的工具栏就会出现插件图标,点击就打开了插件。
4.插件配置文件详解
插件里面有个重要的配置文件就是manifest.json配置文件,这里面配置了插件的类型、资源和功能逻辑的入口等,具体看看这个文件长什么样:
//这个json是用来给chrome读取的,json左右两边都要加"" {"manifest_version": 2, // 这个当前基本就是写死的了,指定manifest的版本"name": "My Extension", // 插件的名称,和下面的version,description都能在chrome://extension设置中看到"version": "versionString","default_locale": "en","description": "A plain text description","icons": { // 在插件商店和安装目录中看到的图标"16": "images/icon16.png","48": "images/icon48.png","128": "images/icon128.png"},// 和下面的page_action只能二选一"browser_action": {"default_icon": { // 显示在浏览器右侧工具栏中的图片,大部分显示的都是48对应的图片"19": "images/icon19.png","38": "images/icon38.png"},"default_title": "Extension Title", // 鼠标悬停在插件图标上显示的文案"default_popup": "popup.html" // 点击插件图标弹出的页面},"page_action": {"default_icon": { // 显示在浏览器地址栏右侧的图标 其余的信息同上,但是这个图标只会在生效的页面中显示,否则是隐藏的"19": "images/icon19.png","38": "images/icon38.png"},"default_title": "Extension Title","default_popup": "popup.html"},//需要数据保存程序中,如果当前用户关闭popup,就需要Background Pages来进行相应的操作"background": {"scripts": ["background.js"]},//需要和网页交互,那么他就需要一个内容脚本(Content scripts),内容脚本常由JavaScript编写,会在网页载入完成后调用"content_scripts": [{"matches": ["http://www.google.com/*"],"css": ["mystyles.css"],"js": ["jquery.js", "myscript.js"]}],//选项页面"options_page": "options.html",//跨域权限许可,权限"permissions": ["*://www.google.com/*"],//web可访问资源"web_accessible_resources": ["images/*.png"] } |
5.chrome插件结构介绍
先上图:
manifest作为插件的配置文件,也可以看成是插件的入口文件;
popup:就是插件弹出页面的主要显示的内容,相当于插件的view视图层,运行环境如上图的绿色背景区域;他虽然和background script同处插件运行环境,但是他们直接也是不能直接访问的,需要特定的方法获取;
background script:chrome开辟的一块独立运行环境,在后台运行插件的逻辑,这个不是必须的,如果你的插件设计到在页面一直运行,就算插件关闭后也要运行的,才需要使用这个(pages action需要这个);
content script :这个就是大多数插件的数据提供者,它是我们注入到页面中的脚本,插件允许我们向当前打开的网页中注入代码,这个功能是在太强大了,也太危险了,让我们可以干预页面上的显示内容,窃取页面信息等等;不过浏览器对其增加了一些限制,能直接访问的只是页面的dom,原页面上的js是访问不了的,反之,页面的js也不能访问content script中的js,不会和原页面的js发生冲突,因为浏览器会专门开辟一套content script运行的环境,上图中浅红色背景的区块代表content的,浅蓝色背景的代表页面原有的js运行环境。content script 是在网页加载完了和页面脚本 执行完了运行,但是这个是可以改变的,具体可以参考https://developer.chrome.com/extensions/content_scripts.html ,查看其中的“run_at”。
二、插件操作页面资源
1.插件popup环境操作页面dom
通过上面介绍我们知道插件操作原页面DOM必须通过content script,所以我们需要首先把content script插入到页面里面去,方法如下:
// 具体意思就是把名字为content_script的js文件插入到浏览器页面的content script环境中去 // 这行代码若要生效必须要在manifest中的permissions中添加tabs; // 此方法的第一个参数是tabid,我们其实就想向当前激活(显示)的页面注入脚本,所以,我们第一个参数传null,这样就会用默认的值(active tab),但是要这个生效需要增加权限 // 就像你猜到的,在manifest的permissions中添加:activeTab // 接口文档:https://developer.chrome.com/extensions/tabs#method-executeScript // chrome.tabs的值有哪些呢,查阅:https://developer.chrome.com/extensions/tabs // 执行content script文件 chrome.tabs.executeScript(null, {file: "content_script.js"}); // 接听content script传过来的数据 chrome.extension.onRequest.addListener(function(request, sender, senderResponse) {if(request){new PerformanceData(request);}}); |
2.操作页面dom的content script文件
var msg = {type: "aaaa",data: "bbbb" } chrome.extension.sendRequest(msg, function (response) {console.dir(response); }); |
就是这么简单,到此浏览器插件的骨骼就完成,剩下的就是你根据自己想获取页面那些数据,以及对这些数据做些怎么样的处理等等,进一步来丰富自己的组件。
转载于:https://www.cnblogs.com/northmountain/p/7656715.html
【chrome】插件开发-教程00(如何开发插件)相关推荐
- WordPress插件开发教程1:开发第一个WordPress插件
一.创建一个插件 第一步:在 wp-content \ plugins 目录新建一个目录,随便起个名字,比如:my-first-plugin. 第二步:进入 my-first-plug ...
- chrome 插件 页面请求转发_入门chrome插件开发教程和经验总结,一篇就搞掂!
前言 关于chrome extension的开发经验总结或说明文档等资料很多,很多人在写,然而,我也是一员.但是,也许这篇文章,可能给你一些不一样的感受. 这里介绍的是80%你要开发扩展会碰到的问题 ...
- 入门chrome插件开发教程和经验总结,一篇就搞掂!
前言 关于chrome extension的开发经验总结或说明文档等资料很多,很多人在写,然而,我也是一员.但是,也许这篇文章,可能给你一些不一样的感受. 这里介绍的是80%你要开发扩展会碰到的问题 ...
- android sdk插件开发教程,Android Studio Plugin 插件开发教程(二) —— 插件SDK中的常用对象介绍...
项目源码 系列教程 先树立一个概念,AS里项目的一切都可以视为对象,比如整个项目,项目里的每个文件,文件里的每个方法.每行语句等等都是一个对象.我们插件SDK的开发,主要工作就是针对这一个个的对象的分 ...
- [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...
- [js插件开发教程]定制一个手风琴插件(accordion)
本文带来一个垂直方向的手风琴插件开发,可以定制的功能如下: contentClass : 'panel', //面板样式navClass : 'nav', //导航样式activeClass : 'a ...
- Chrome 插件开发-右键菜单开发实战演示,浏览器页面右键菜单选项设置,插件右键菜单点击插件名跳转主页设置
Chrome 插件开发 - 菜单选项 浏览器页面右键菜单选项设置 ① 核心代码演示 ② 效果展示 ③ 详细参数文档 插件右键菜单点击插件名跳转主页设置 ① 核心代码演示 ② 演示效果图 浏览器页面右键 ...
- 西安天气html5插件,Chrome 插件开发——本地天气
经常在Chrome应用商店下载扩展程序也就是插件,有时候在想可不可以自己也开发一个插件用用呢?本文就是在这样的背景下产生的,以一个生活必需的简单获取天气的插件作为开发演示,下面就开始我们的Chrome ...
- [原创插件] [服务端插件] [新手开发者必看]优秀插件开发教程列表 欢迎回复讨论
插件开发者专享套餐 声明:此集锦意在提升插件开发者的姿势水平, 插件版版主邀请编程版的海螺编写的,并非错版,请勿举报. 入门以前 在开始写插件之前,你需要知道插件基于 Java,所以请先学习 Java ...
最新文章
- php如何word转html格式文件,PHP将上传word文件,转化为Html格式,(多种转换方式)
- vue打包后axios返回html,vue项目封装axios并访问接口
- python初学者之网络爬虫_Python初学者之网络爬虫(二)
- WPF 基础到企业应用系列1——开篇故意
- Sqlserver 错误日志太大导致硬盘空间不足
- POJ 3461 KMP
- systemctl常用命令
- 2.3 《计算机组成原理》之浮点数的表示(基本格式、规格化[左规右规]、表示范围、IEEE754标准详解)
- AT4378-[AGC027D]ModuloMatrix【构造】
- wyse WES系统操作
- Using Java SecurityManager to grant/deny access to system functions
- pycharm 激活
- winpcap基本原理及常见应用_锁相放大器的基本原理(Part 1)
- 标准工时分析软件VIOOVI,适配现代化工业的人工智能软件
- 2018国赛数学建模B题两道工序代码
- 基于SSM框架的人力资源管理系统毕业设计源码060936
- vue-request发起网络数据请求
- 高精度BMI088姿态传感器
- 国内工业级3D打印机品牌的应用领域拓展
- mysql workbench自动增长点击不了
热门文章
- python迭代器一般包含_python 迭代器
- 脉歌蓝牙耳机线评测_漂亮的高音质蓝牙耳机 脉歌MACAW TX-90评测
- pdf内容怎么复制到word文档里_PDF转Word要收费?这4种免费实用的方法送你,一分钟统统能搞定...
- mysql8.0数据回滚_大企业数据库服务首选!AliSQL这几大企业级功能你不可不知
- python变量赋值给数组_python 变量,数组,字符串
- 高中电子技术——二极管的类型和作用
- opencv 识别长方形_利用opencv识别并提取图片中的矩形
- Linux终端输出链接
- Windows核心编程_注册表操作和小练习程序关联
- MongoDB的正确使用姿势