chrome 插件 抓取网页qq聊天记录(chrome插件插件的开发方法及开发插件开发技巧)

　　chrome 插件 抓取网页qq聊天记录(chrome插件插件的开发方法及开发插件开发技巧)

　　针对公司内部需求，我开发了一个chrome插件，可以自动登录第三方网站。于是我对chrome插件的开发有了一个简单的了解。让我分享一下我在开发过程中学到的东西。请指出什么是错的。希望大家回复，互相学习。.

　　什么是chrome插件？

　　通过公司给我的这个需求，我了解到chrome插件其实就是一段js代码，当你打开相应的网页时会执行（你可以设置插件作用于哪些网页，但不能用于那些网页）。也许理解是片面的，你也可以补充！

　　chrome插件中要执行的js有自己的作用域，不会和你打开的网页的作用域冲突。您也可以对本网页中的 DOM 进行操作，以达到您想要达到的目的。

　　需要准备什么？

　　Chrome 浏览器、文本编辑器和程序员。

　　chrome插件开发需要哪些文件？

　　-- manifest.json 可以理解成插件的配置文件，入口

-- html

-- popup.html 点击插件图标时显示的页面（我觉得理解成一个小弹窗更合适）

-- js

-- popup.js popup.html页面引用的js文件

-- 该文件夹下也可以存放你引用的别的js文件

-- images

-- icon.png 图标显示成什么样就看你这个图片了，也可以不引入，chrome会提供默认的图标的

　　manifest.json 文件的配置

　　{

"manifest_version": 2, //这是一个必须写的字段，固定值为2

"name": "plugin name", //插件的名字

"version": "1.0", // 插件的版本号

"description": "plugin description",//插件的描述信息

"background_page": "background.html",

//browser_action和page_action只能添加一个

"browser_action": { //浏览器级别行为，所有页面均生效

"default_icon": "images/custom/16x16.png",//图标的图片

"default_title": "Hello ELSE", //鼠标移到图标显示的文字

"default_popup": "html/popup.html" //单击图标后弹窗页面

},

"page_action":{ //页面级别的行为，只在特定页面下生效

"default_icon":{

"24":"images/custom/24x24.png",

"38":"images/custom/38x38.png"

},

"default_popup": "html/popup.html",

"default_title":"Hello ELSE"

},

"content_scripts": [ //页面注入配置，就是说插件在在什么地方起作用

{

"matches": ["https://www.baidu.com/*"],//需要注入的脚本页面的url，支持正则表达式

"js": ["js/jquery-1.6.1.js", "js/login_script.js"],//注入的脚本文件，相对路径

"run_at":"document_start",//注入的位置文档的开始,也可以是文件的中间个结尾处

"all_frames":true//是否全frame注入

}

],

"permissions" : [//插件需要的权限，支持正则匹配 允许该插件访问的url

"tabs", //访问浏览器选项卡

"history", //读取修改用户的浏览记录

"cookies", //读取修改Cookie

"events", //监控事件，让你感兴趣的事发生是可以得到通知

"downloads", //监视，操纵，搜索下载的文件

"http://*/*" //访问的权限*/

],

"icons" : {//表示图标，这个一共有且只有三种尺寸，分别是16*16，48*48和128*128,这三种，分别用于显示信息栏上，扩展程序上的图表和安装插件时显示，但是上面设置了默认图表，这个可有可无。

"48" : "images/icon-48.png",

"128" : "images/icon-128.png"

}

}

　　content_script.js

　　这个js文件就是注入到指定的网站并执行的脚本。在这个脚本中，可以操作指定网站中的DOM，但是这个脚本无法访问我们制作的网站中定义的函数和变量。例如：在content_script中定义了一个变量a，在指定的网站中也有一个变量a，但这两个变量互不干扰。了解了这一点后，就可以操作指定的网站了。.

　　背景.js

　　这个脚本指的是chrome插件运行的环境。在这个脚本中，可以使用 chrome 独有的 API。

　　跨域请求

　　当我们使用jQuery进行跨域请求时，会用到以下方法：

　　$.ajax({

url : 'https://www.baidu.com/..',

type : 'GET',

dataType : 'jsonp',

jsonp : 'callback',

jsonpCallback : 'success_jsonpCallBack'

}).done(function(res){

console.log(res)

}).fail(function(err){

console.log(err)

})

　　但是，在chrome插件中完全没有必要。如果在插件中也进行了上述跨域请求，那么多插件的功能就会大打折扣，所以如果插件需要进行跨域请求，直接请求即可。

　　$.ajax({

url : 'https://www.baidu.com/..',

type : 'GET',

dataType : 'json',

}).done(function(res){

console.log(res)

}).fail(function(err){

console.log(err)

})

　　结束语

　　以上就是我在写插件的过程中遇到的所有大坑。希望能给小白一些有用的信息。由于是第一次在知乎上发表文章，肯定有很多不足。希望大家多多指点，共同交流，共同进步。