chrome插件开发

这两天有一个浏览器插件的需求：

在网页上右键图片，可以把图片上传到指定的服务器！

其实后端的开发还比较简单，拿到一个图片的路径，下载下来，调用服务器接口上传，比如上传到了七牛。

主要在于前端怎么获取。插件开发网上有教程，首先有几个文件需要：manifest.json，index.html，

配置文件：manifest.json

这个文件设置了插件所需要的显示页面、后台js、图标等

{

"manifest_version": 2, //固定的

"name": "图片上传", //插件名称

"version": "1.0", //插件使用的版本

"description": "这个是图片上传的描述信息",

"browser_action": { //插件加载后生成图标

"default_icon": "icon.png",//图标的图片

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

"default_popup": "index.html" //单击图标执行的文件

"permissions": [ //允许插件访问的url

"http://*/",

"bookmarks",

"tabs",

"contextMenus"

"background":{//background script即插件运行的环境

//"page":"background.html"

"scripts": ["js/operate.js"]//数组.chrome会在扩展启动时自动创建一个包含所有指定脚本的页面

"icon":{

"16": "icon.png", "48": "icon.png", "128": "icon.png"

}

"content_scripts": [{ //对页面内容进行操作的脚本

"matches": ["http://*/*","https://*/*"], //满足什么条件执行该插件

"js": ["js/jquery-1.9.1.min.js", "js/js.js"],

"run_at": "document_start", //在document加载时执行该脚本

}]

}

里面有几个点：

1、index.html 就是右上角出现的你的插件点击显示

2、因为功能就在写右键，所以permissions里面一定要有contextMenus

3、background里面的js就是后台页面要显示的，什么是后台，就是插件运行过程中另一个console结果，它的js和content_scripts里面的js不可以重复

4、background里面有一个page和一个scripts，不能同时使用

5、因为需求在于右键功能，其他的配置就不多说了

前台页面：index.html

右上角出现的你的插件点击后，会显示的页面

后台js：operate.js

这个页面就是重点了，首先参考文档，要知道怎么去添加一个右键信息

function genericOnClick(info, tab) {

var img_url = info.srcUrl;

console.log('图片地址：'+img_url);

}

var contexts = ["image"];

for (var i = 0; i < contexts.length; i++) {

var context = contexts[i];

var title = "保存图片到cms";

var id = chrome.contextMenus.create({title: title, contexts:[context], onclick: genericOnClick});

console.log("'" + context + "' item:" + id);

}

这里用到一些api，简单来说就是一个create，里面的参数可以看文档自定义，在genericOnClick中可以获取到图片地址，然后再上传就是需要后端同学的协助了，这里可以调一些接口什么的。

最后，在扩展中添加，当然你也可以打包，然后其他人就可以用了
参考：
http://os.51cto.com/art/201609/517668.htm

http://open.chrome.360.cn/extension_dev/samples.html#contextMenus