Chrome开发自定义右键菜单实现快速跳转到指定页面

一、背景

假设我们在日常的测试过程中，有很多页面需要经常访问，一种方式是我们可以直接把这些页面添加为书签，但这种方式必须记录完整的URL。如果我们有多套环境，比如有测试环境、UAT环境、线上环境，每套环境有20个常用的页面，那总共就需要建60个书签，并且不同环境下容易弄混淆。

今天我们介绍另外一种实现方式：通过Chrome开发自定义右键菜单的方式，实现一套菜单在多套环境下快速访问常用的页面。先来看看效果：

网上也有一些介绍自定义右键菜单的文章，但大多都说得比较简单，只介绍到一级菜单直接指定地址，本文会直接讲到怎么添加二级菜单，以及一套菜单在多套环境下快速访问常用的页面。话不多说，下面直接上详细的代码解释~

二、扩展程序工程目录

工程文件目录如下：

非常简单，只需要一个manifest.json文件，一个Right-click.js文件，一个icon.png图片。

manifest.json文件主要定义一些基础信息，包括自定义菜单的图片、调用哪个js文件、允许的权限。
Right-click.js文件主要定义具体的菜单跳转，哪一级的哪个菜单跳转到哪个URL地址。
icon.png图片就是作为自定义菜单的图片。

三、具体代码实现

manifest.json代码如下：

{
    
    "manifest_version": 2,
    "name": "测试工具",
    "version": "1.0.0",
    "description": "Demo to use Vue in Chrome extension.",
    "icons":
    {
    
        "16": "img/icon.png",
        "48": "img/icon.png"
    },

    "background":
    {
    
        "scripts": ["js/Right-click.js"]
    },

    "permissions":
    [
        "contextMenus", 
        "tabs",
        "notifications", 
        "webRequest",
        "webRequestBlocking",
        "storage", 
        "cookies",
        "activeTab",
        "http://*/*",
        "https://*/*"
    ]
}

关键代码解释：

• “icons”：下面指定右键菜单的图片icon路径，16的是右键菜单用的icon，48的是Google扩展程序那里用的icon。
• “background”: 下面指定右键菜单用哪个js文件。
• “permissions”: 下面指定右键菜单跳转URL有哪些权限，就照着我上面这样写就OK。

Right-click.js代码如下：

chrome.contextMenus.create({
    
    title: "右键快捷菜单", //菜单的名称
    id: '10',//一级菜单的id
    contexts: ['page'], // page表示页面右键就会有这个菜单，如果想要当选中文字时才会出现此右键菜单，用：selection
});

chrome.contextMenus.create({
    
    title: '百度', //菜单的名称
    id: '1101',//二级菜单的id
    parentId: '10',//表示父菜单是“右键快捷菜单”
    contexts: ['page'],
});


chrome.contextMenus.create({
    
    title: 'CSDN', //菜单的名称
    id: '1102',
    parentId: '10',//表示父菜单是“右键快捷菜单”
    contexts: ['page'],
});


chrome.contextMenus.create({
    
    title: '百度新闻',
    parentId: '1101',//1101就是上面定义的二级菜单“百度”的id
    onclick: function (params) {
    
        chrome.tabs.getSelected(null, function (tab) {
    
            window.open("http://news.baidu.com/#index/cxPurchaseinfo/cxGoodsPurchases", "百度新闻", "");
        });
    }
});



function getUrl(str) {
    
    var according = "/#/";
    var url = str.split(according)[0];//以#号做分隔，获取分隔后的前半段url内容，即得到域名
    return url;
};


chrome.contextMenus.create({
    
    title: '个人资料',
    parentId: '1102',
    onclick: function (params) {
    
        chrome.tabs.getSelected(null, function (tab) {
    
            var tabUrl = tab.url;//获取当前页面的url
            //通过getUrl方法把域名提取出来，适用于在一个管理系统下做很多个右键菜单，跳转该管理系统下不同子页面的需求
            var urls = getUrl(tabUrl);
            //域名+子页面的url
            window.open(urls + "/#/user-center/profile", "个人资料", "");
        });
    }
});

chrome.contextMenus.create({
    
    title: '浏览历史',
    parentId: '1102',
    onclick: function (params) {
    
        chrome.tabs.getSelected(null, function (tab) {
    
            var tabUrl = tab.url;//获取当前页面的url
            //通过getUrl方法把域名提取出来，适用于在一个管理系统下做很多个右键菜单，跳转该管理系统下不同子页面的需求
            var urls = getUrl(tabUrl);
            //域名+子页面的url
            window.open(urls + "/#/user-center/history", "浏览历史", "");
        });
    }
});

关键代码解释：
chrome.contextMenus.create就是创建右键菜单的方法，代码从上往下定义一级、二级、三级菜单：

• 一级菜单为：右键快捷菜单
• 二级菜单为：百度、CSDN
• 三级菜单为：百度》百度新闻，CSDN》个人资料，CSDN》浏览历史

getUrl(str)方法用于从当前tab页的URL地址中提取出域名地址。比如我进入的页面是CSDN的个人中心页面：https://i.csdn.net/#/user-center/profile， 那么getUrl(str)方法就是用于以“/#/”号做为分隔，提取出域名地址：https://i.csdn.net。

这样后面跳转到个人中心》浏览历史的代码：urls + “/#/user-center/history”，实际就是域名https://i.csdn.net+“/#/user-center/history”，拼装成完整的URL: https://i.csdn.net/#/user-center/history 。

这样做的好处就是文章开头说的，如果有多套环境，比如CSDN的：

• 测试环境是: https://testi.csdn.net/#/user-center/history
• UAT环境是: https://uati.csdn.net/#/user-center/history
• 线上环境是: https://i.csdn.net/#/user-center/history

每套环境我都是进入CSDN的个人中心页面后，右键菜单选择“浏览历史”菜单，就可以进入对应环境的“浏览历史”页面了。而不需要分别记录3个书签地址。

一方面页面多了之后书签数量呈几何倍数增长，另一方面，也是最重要的方面，不会出现搞混淆访问错页面的情况，比如在测试环境测试的时候错误的点到了线上环境的书签地址，改到了线上的配置导致线上事故。这就是相比Chrome书签而言，用这种右键菜单的方式最大的优点了。

代码非常简单，配合我上面的注释应该很好看懂，然后照着样子添加自己想要的右键菜单代码~

四、添加项目文件夹到Chrome

打开Chrome设置》更多工具》扩展程序：

打开开发者模式，加载已解压的扩展程序：

选择我们上面的右键菜单的工程文件夹加载，能成功加载，看到这个扩展程序面板则说明代码没问题，可以正常使用了：

最后的效果如下图，在页面上右键，就会出现我们自定义的“右键快捷菜单”：

以上就是本次的全部内容，如果对你有帮助，欢迎关注我的微信公众号：程序员杨叔，各类文章都会第一时间在上面发布，持续分享全栈测试知识干货，你的支持就是作者更新最大的动力~