chrome扩展应用实例
chrome extensions 基本组成,唯一必要的文件就是manifest.json这个应用的配置清单
manifest.json中前三个参数为必要参数,其他的可选:
{
"name ":"your extensions name ",
"version":"1.0.0.1", //扩展应用版本,自定义
"manifest_version":2, //清单文件的版本,现在都应该写2
"icons":{ //图标,暂时也没加载成功
”16“:”imgs/icon.png",
"48":"imgs/icon48.png",
"128":"imgs/icon128.png"
},
"background":{ //扩展的后台页面,持续运行,一般是只需要写js文件就可,如果需要也可写page
//"page":"background.html",
"scripts":["background.js"]
},
"permissions":[ //允许在background,popup内访问的网站,或页面的其他信息权限,如网页上的右键菜单
"http://*/*", //这个表示所有的http网页
“notifications" //通知
],
”browser_action":{ //扩展应用的的三种形式之一,出现在浏览器右上角的图标
"default_icon":"imgs/icon19.png",
"default_title":"my extension",
"default_popup":"popup.html" //点击右上角的图标时出现的页面
},
“content_scripts": // 可以操纵页面的js,但不能调用与被调用 页面中的js变量,方法交互
[{
"js":["jquery-3.3.1.min.js","my_content_script.js"], //js脚本列表,这里把jquery加进去,在其他content_scripts中就可以使用jquery语法了
"css":[],
"matches":["*://*.cnblog.com/*","*://*.tmall.hk/*"], //这些js作用于哪些页面
”run_at":"document_end" //在什么时候执行,这里表示页面加载完成后执行
}],
"web_accessible_resources":["images/*.png","images/*.gif","echarts.js"] //在页面上可以直接访问的资源列表,相当于静态文件
}
这里我主要用到的就是content_scripts和background.
content_scripts可以直接改变页面的元素,增删改,但是权限有限,需要与background通信,交换信息,再改造页面。
background 是一个持续存在与浏览器后台的页面,不可见,可以进行跨站访问,获取数据
popup也与background具有相同的功能,但是只用当用户点击时才被激活,下次被点击时又是初始状态
在 my_content_script.js中,
var echar_src=$("<script type='text/javascript' src="+chrome.extension.getURL('echarts.js')+" </script>");
这里chrome.extension.getURL('echarts.js'), echarts.js在web_accessible_resources中列出了,所以页面可以直接访问该资源
$('#content').append(echar_src)
conten_scripts与background 通讯,这是有问有答的多次通讯,建立一个专用端口,然后在端口上通讯,如果只需发送一次性消息,可用其他简单写法
var port = chrome.runtime.connect({name: "敲门"});
port.postMessage({joke: "敲门"});
console.log('I AM content script, had send message:'+JSON.stringify({joke: "敲门"}));
port.onMessage.addListener(function(msg) {
if (msg.question == "是谁?"){
port.postMessage({answer: "数据",name:c5_name,site:"c5"});
console.log('i answer bkgrd.js for data ');
}
else if (msg.question == "ok")
{
console.log('i got data :'+JSON.stringify(msg.data));
var pricenode=$("#content");
exe_ele=$("<script>var jsdata="+JSON.stringify(msg.data)+"; hotlineLine(jsdata);</script>") ;
pricenode.append(exe_ele);
console.log('i am after the data insert ');
}
});
在background.js中
function httpRequest(url,callback){ //这里定义一个请求方法,url必须是manifest.json的参数permissions中所列出的地址
var xhr=new XMLHttpRequest();
xhr.open("GET",url,true);//初始化一个请求,采用异步
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
callback(xhr.responseText); //XMLHttpRequest.responseText 请求的返回值,类型为string
}
}
//发送数据
xhr.send();
}
chrome.runtime.onConnect.addListener(function(port) { //监听port.name=="敲门"这个端口中消息
console.assert(port.name == "敲门");
port.onMessage.addListener(function(msg) {
if (msg.joke == "敲门")
port.postMessage({question: "是谁?"});
else if (msg.answer == "女士")
port.postMessage({question: "哪位女士?"});
else if (msg.answer=='数据'){
httpRequest(MY_DATA_URL, function(res){
port.postMessage({question:'ok',data:JSON.parse(res)});
});
}
});
});
在 扩展应用的 组建间通讯时,可以认为发送的消息 json形式的对象都是自动转换成string发送出去,收到的消息也是自动右string转换成json对象。但是从外面请求来的数据,需要用JSON.parse()来将其转换成json对象。
chrome扩展应用实例的更多相关文章
- 清除页面广告?身为前端,自己做一款简易的chrome扩展吧
大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...
- Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
- Chrome扩展开发之一——Chrome扩展的文件结构
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
- chrome扩展写法
最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展,但是由于不经常写,也没做积累也都忘记了,现在重新回顾一下. 一.chrome扩展基本概念 chrome扩展 ...
- 如何写chrome扩展
转载:http://www.cnblogs.com/pingfan1990/p/4560215.html 最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展, ...
- 自己做一款简易的chrome扩展--清除页面广告
大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...
- Chrome扩展,应用开发学习笔记之2---恶搞百度一下
Chrome扩展,应用开发学习笔记之2 恶搞百度一下 前面我们介绍了一个最简单的chrome扩展时钟,如今我来介绍一下一个恶搞百度一下的chrome扩展程序. 前面说过,manifest.json文件 ...
- chrome扩展程序开发
首先,明确两个概念的区别:chrome扩展程序和Web Apps.具体参考:http://www.chromi.org/archives/10106 本文只讨论chrome扩展程序. 最好的开发教程莫 ...
- 一起来做chrome扩展《可配置的代理》
一.本文主要涉及相关内容: chrome.proxy pacScript browser_action popup localStroage 二.预览 (代理运行截图,图中的代理服务器有防火墙,暂不对 ...
随机推荐
- 【Linux】Tomcat安装及一个服务器配置多个Tomcat
安装环境 :Linux(Ubuntu 版) 安装软件 : apache-tomcat-9.0.0.M1.tar.gz(下载地址http://tomcat.apache.org/) 步骤一 Tomcat ...
- Sitecore开发 IP地理定位服务入门
如果您是营销人员或开发人员,并且有兴趣在Sitecore安装中使用Sitecore IP Geolocation服务,那么本文就是为您准备的. 借助Sitecore IP地理定位服务,您网站的访问者可 ...
- Java多态(注意事项)
多态:相同类型的变量.调用同一方法时呈现出多种不同的行为特征,这就是多态. 1.引用变量在编译阶段只能调用其编译时类型所具有的方法,但运行时则执行它运行时类型所具有的方法,因此编写Java代码时.引用 ...
- Linux 文件系统结构、磁盘的管理
1.linux文件系统内没有文件的创建时间. 2.个人版RHEL8.0,RHEL9.企业版RHEL5U4,RHEL5U5. 3.cat /etc/issue查看系统版本的文件. 4.ext2无法灾难恢 ...
- golang中 "下划线" 的用法
1.忽略返回值 这个应该是最简单的用途,比如某个函数返回三个参数,但是我们只需要其中的两个,另外一个参数可以忽略,这样的话代码可以这样写: v1, v2, _ := function(...) 2.用 ...
- Redis主主复制、主从复制
Redis主从复制(master-slaves配置)可以更好地读写分离 先关防火墙 主(master)服务器先不做任何操作, 进入从(slave)服务器, redis-3.2.1目录下的redis.c ...
- 【HAOI 2012】高速公路
Problem Description \(Y901\) 高速公路是一条重要的交通纽带,政府部门建设初期的投入以及使用期间的养护费用都不低,因此政府在这条高速公路上设立了许多收费站. \(Y901\) ...
- 在 Linux 上使用 VirtualBox 的命令行管理界面
VirtualBox 拥有一套命令行工具,你可以使用 VirtualBox 的命令行界面 (CLI) 对远程无界面的服务器上的虚拟机进行管理操作.在这篇教程中,你将会学到如何在没有 GUI 的情况下使 ...
- dropna(thresh=n) 的用法
thresh=n,保留至少有 n 个非 NA 数的行
- 力扣(LeetCode)804. 唯一摩尔斯密码词
国际摩尔斯密码定义一种标准编码方式,将每个字母对应于一个由一系列点和短线组成的字符串, 比如: "a" 对应 ".-", "b" 对应 &q ...