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

程序员杨叔

已于 2024-05-19 09:45:10 修改

阅读量4k

点赞数 4

分类专栏：测试知识常见问题处理 Java 文章标签： chrome java 测试工具

于 2022-07-29 10:00:00 首次发布

本文链接：https://blog.csdn.net/baidu_28340727/article/details/125956446

版权

测试知识同时被 3 个专栏收录

15 篇文章 3 订阅

订阅专栏

Java

12 篇文章 4 订阅

订阅专栏

常见问题处理

4 篇文章 0 订阅

订阅专栏

一、背景

假设我们在日常的测试过程中，有很多页面需要经常访问，一种方式是我们可以直接把这些页面添加为书签，但这种方式必须记录完整的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的：