开发一个chrome小插件

经常使用google查资料，由于大家都知道的问题，每次点击链接可能不能正常跳转，但其实都是可以打开的链接。以前好像见过一个插件，来解析google的结果链接，直接跳转到目标链接，但现在想用却找不到了。本来自己用python写了一个工具来解析，但实在是copy起来难受，想想，干脆自己写一个插件算了。

首先做个入门：

网上教程也挺多的，官方的资料也是很全面的。

插件相关教程：

https://developer.chrome.com/extensions/

http://open.chrome.360.cn/extension_dev/overview.html

先要做的就是了解如何去开发，如何入手，可以有哪些实现。

为了实现我现在这个需求，那么只需要扩展右键菜单就行，能取到当前的url，并从url中获取到实际路径，并在新标签中打开提取的url。

开始做了：

建manifest.json插件描述文件，这个是必须的（具体参数可以看看http://open.chrome.360.cn/extension_dev/manifest.html）。

里面内容：

{

     "name": "google url",

     "version": "0.5",

     "description": "直接访问google搜索结果url.",

     "icons": {

          "128": "google.png",

          "16": "google.png"

     },

     "permissions": [

          "contextMenus",

          "tabs"

     ],

     "background": {

         "scripts": ["contentscript.js"]

     },

     "manifest_version": 2

}

图标随便找一个，一个图片就够了，但16的配置一定要。

权限要contextMenus和tabs

通过background参数来注册我们的右键菜单内容。指定js文件 "scripts": ["contentscript.js"] ，还可以指定page，那就可以在菜单上显示内容了。

新建contentscript.js，这个js名称没有要求，自己随便写。

contentscript.js中的内容：

var id = chrome.contextMenus.create({

     "title": "open url",

     "contexts": ["link"],

    "onclick": openUrlWindow});



function openUrlWindow(info, tab) {

     var url = info['linkUrl'];

     url =  getQueryString(url, 'url');

     chrome.tabs.create({"url":url, "active": false});

}



function getQueryString(url, name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

    var r = url.match(reg);

    if (r != null) return unescape(r[2]); return null;

}

chrome.contextMenus函数创建参数中的tilte和onclick比较好理解，contexts是指，在什么内容上点击右键才出现此内容，这里是设置为"link"。

chrome.contextMenus 和 onclick触发函数中的info和tab具体参数和属性看文档就知道了。当然你还可以通过alert(JSON.stringify(info))来看看。

官方对于右键菜单扩展有个样例 https://developer.chrome.com/extensions/examples/api/contextMenus/basic.zip

实际效果：

转载于:https://my.oschina.net/ruben/blog/92813