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扩展应用实例的更多相关文章

  1. 清除页面广告?身为前端,自己做一款简易的chrome扩展吧

    大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...

  2. Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  3. Chrome扩展开发之一——Chrome扩展的文件结构

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  4. chrome扩展写法

    最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展,但是由于不经常写,也没做积累也都忘记了,现在重新回顾一下. 一.chrome扩展基本概念 chrome扩展 ...

  5. 如何写chrome扩展

    转载:http://www.cnblogs.com/pingfan1990/p/4560215.html 最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展, ...

  6. 自己做一款简易的chrome扩展--清除页面广告

    大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...

  7. Chrome扩展,应用开发学习笔记之2---恶搞百度一下

    Chrome扩展,应用开发学习笔记之2 恶搞百度一下 前面我们介绍了一个最简单的chrome扩展时钟,如今我来介绍一下一个恶搞百度一下的chrome扩展程序. 前面说过,manifest.json文件 ...

  8. chrome扩展程序开发

    首先,明确两个概念的区别:chrome扩展程序和Web Apps.具体参考:http://www.chromi.org/archives/10106 本文只讨论chrome扩展程序. 最好的开发教程莫 ...

  9. 一起来做chrome扩展《可配置的代理》

    一.本文主要涉及相关内容: chrome.proxy pacScript browser_action popup localStroage 二.预览 (代理运行截图,图中的代理服务器有防火墙,暂不对 ...

随机推荐

  1. Maven 编译跳过检查

    Maven 编译跳过检查 使用maven打包的时候指令:clean package, 但过程可会有提示检测错误,如果想跳过检查,需加上:-Dmaven.test.skip=true 完整指令: cle ...

  2. 前端JS常见面试题(代码自撸)

    题目一示例: 适用于子数组等长度及不等长度. let arr = [ [1,2,3], [5,6,7,8], [9,10,11,12,13] ] function arrayDiagonal(arr) ...

  3. .Net Core创建Docker镜像

    1..Net Core项目[Lails.Server.Demo]发布到目录下Lails.Server.Demo\bin\Release\netcoreapp2.1\publish 2.上面目录下新建文 ...

  4. poj3155 最大密度子图

    求最大密度子图 记得在最后一次寻找的时候记得将进入的边放大那么一点点,这样有利于当每条边都满流的情况下会选择点 #include <iostream> #include <algor ...

  5. mysql的一些指令

    说起来mysql,mysql其实是特别简单操作的数据库.它有一下几方面的特点,亦或者是说优点,1,支持多语言:2.移植性比较好:3,我觉得最重要的一点就是它是开源的,因为开源,所以使用广泛,4.效率比 ...

  6. Kubernetes持久化存储1——示例

    目录贴:Kubernetes学习系列 一.简介 存储管理与计算管理是两个不同的问题.Persistent Volume子系统,对存储的供应和使用做了抽象,以API形式提供给管理员和用户使用.要完成这一 ...

  7. UValive4195 Heroes of Money and Magic

    斜率优化 想骂人了,马格吉最后调了半小时 TMD造数据的人是SB吧? 我写  while(scanf("%d%d",&n,&m)!=EOF&&n) ...

  8. Twisted简介

    Twisted是用Python实现的基于事件驱动的网络引擎框架,Twisted支持许多常见的传输及应用层协议,包括TCP.UDP.SSL/TLS.HTTP.IMAP.SSH.IRC以及FTP.就像Py ...

  9. Linux 查看磁盘读写速度IO使用情况

    # 查看io进程 命令:iotop 注:DISK TEAD:n=磁盘读/每秒              DISK WRITE:n=磁盘写/每秒. 注:标黄的可查看磁盘的读写速率,下面可以看到使用的io ...

  10. Linux TCP并发请求溺出 调优

    TCP并发请求溺出 调优:系统开启某个监听端口后,当多个TCP请求连接监听端后,会把多个请求交给backlog的默认监听队列由socket server一并处理,backlog有自己的队列长度默认12 ...