编写 Chrome 扩展——contextMenus 的快捷创建

1 写在前面

最近使用 typescript 与 angular 编写 chrome 扩展， 对繁复的 contextMenus 创建步骤进行了提炼，并总结一个类

2 重构思路

2.1 一般方法

在编写 chrome 扩展中的 contextMenu 中，一般的思路是定义一个 JSON，并且遍历这个JSON数据并且以此创建 menu, 如：

const menu = {
  "menus": [
    {"id": "main", "visible": true, "title": "main"},
    {"id": "sub1", "visible": true, "title": "sub1", "parentId": "main"},
    {"id": "sub11", "visible": true, "title": "sub11", "parentId": "sub1"},
    {"id": "sub12", "visible": true, "title": "sub12", "parentId": "sub1"},
    {"id": "sub2", "visible": true, "title": "sub2", "parentId": "main"}
  ]
};

const createMenu = () => {
  menu.menus.forEach(value => {
    chrome.contextMenus.create(value);
  })
};
createMenu();

2.2 重构

在 menu 的个数很少的情况下，上述的传统方式可能不会构成问题，但在选项多的场景下（如编写工具类扩展），contextMenu 的可读性就变得极差

2.2.1 编写 Menu 类

因此我们将用 typescript 来构建一个层次结构清晰的类以组合编排 父-子 menu 的层次结构， 类的结构如下:

interface Menu {
  createProperties: CreateProperties;
  children?: Menu[];
}

这个类的结构很简单，但是已经足以代表需要创建 ContextMenu 的数据

现在上边使用过的 json 数据现在可以重写为：

const defaultMenu: Menu = {
  createProperties: {
    id: 'main',
    visible: true,
    title: 'main'
  },
  children: [
    {
      createProperties: {
        id: 'sub1',
        visible: true,
        title: 'sub1',

      },
      children: [
        {
          createProperties: {
            id: 'sub11',
            visible: true,
            title: 'sub11',
            parentId: 'sub1'
          }
        },
        {
          createProperties: {
            id: 'sub12',
            visible: true,
            title: 'sub12',
            parentId: 'sub1'
          }
        }
      ]
    },
    {
      createProperties: {
        id: 'sub2',
        visible: true,
        title: 'sub2',
        parentId: 'main'
      }
    }
  ]
};

结构似乎很清晰，但是不够完善，我们不想手动管理 menu 之间的父子关系，现在，删掉所有的 parentId 属性，我们将在接下来的节点来讲述如何动态维护关系

2.2.2 编写 collectMenuCreateProperties 方法

在上一节点中，我们创建了一个足以涵盖创建 contextMenu 的类 Menu，但是 chrome.contextMenus.create(property); 要求我们每次传入一个 CreateProperties 类，因此我们需要一个工具类从 Menu 类中抽取所有的 CreateProperties 信息，并且不要忘记了该方法必须能够动态维护 menu 间的父子关系（设置子menu 的 parentId 为上一层的 menu 的 id）

function collectMenuCreateProperties(parent: Menu): CreateProperties[] {
  if (parent.createProperties.id === undefined) {
    throw  new Error('parent contextMenu must has id');
  }
  let result: CreateProperties[] = [];
  result.push(parent.createProperties);
  if (parent.children) {
    parent.children.forEach(child => {
      // 确保每一层的层级关系
      child.createProperties.parentId = parent.createProperties.id;
      result = result.concat(collectMenuCreateProperties(child));
    });
  }
  return result;
}

2.2.3 编写 createMenu 方法

一切就绪，我们需要创建一个 contextMenu，这里有一些注意的点：

• 如果在文件manifest.json 中对 background.js 设置了属性 "persistent": false ，可能会出现多次创建同一个menu
• 我们的 menu 只需要创建一次，比如扩展初次安装的时候就很合适
• 当调用者忘记传入构建源 Menu 时，需要确保运行不出错，这一点我们将采用ts中的默认值

function createMenu(menu: Menu = defaultMenu): void {
  chrome.runtime.onInstalled.addListener(details => {
    const properties: CreateProperties[] = collectMenuCreateProperties(menu);
    // alert(JSON.stringify(properties));
    properties.forEach(property => {
      chrome.contextMenus.create(property);
    });

  });
}

最后，别忘了在顶层导出

export {Menu, defaultMenu};
export {createMenu};
export {collectMenuCreateProperties};

附：

 完整的代码

import CreateProperties = chrome.contextMenus.CreateProperties;

export {Menu, defaultMenu};
export {createMenu};
export {collectMenuCreateProperties};


/**
 *  一系列创建 {@link contextMenus} 需要的数据
 *  @see defaultMenu
 */
interface Menu {
  createProperties: CreateProperties;
  children?: Menu[];
}

/**
 *  默认的的数据  ：
 *  [{"id":"main","visible":true,"title":"main"},
 *  {"id":"sub1","visible":true,"title":"sub1","parentId":"main"},
 *  {"id":"sub11","visible":true,"title":"sub11","parentId":"sub1"},
 *  {"id":"sub12","visible":true,"title":"sub12","parentId":"sub1"},
 *  {"id":"sub2","visible":true,"title":"sub2","parentId":"main"}]
 */
const defaultMenu: Menu = {
  createProperties: {
    id: 'main',
    visible: true,
    title: 'main'
  },
  children: [
    {
      createProperties: {
        id: 'sub1',
        visible: true,
        title: 'sub1',

      },
      children: [
        {
          createProperties: {
            id: 'sub11',
            visible: true,
            title: 'sub11',
          }
        },
        {
          createProperties: {
            id: 'sub12',
            visible: true,
            title: 'sub12',
          }
        }
      ]
    },
    {
      createProperties: {
        id: 'sub2',
        visible: true,
        title: 'sub2',
      }
    }
  ]
};


/**
 * 主要方法
 * 创建 contextMenus
 * 1 监听 {@link  chrome.runtime}事件，事件的实体可能是：（"install", "update", "chrome_update", or "shared_module_update"）
 * 2 移除之前创建的所有 {@link  chrome.contextMenus}
 * 3 执行创建
 *
 * @param menu 执行创建的上下文信息
 * @see Menu
 * @see defaultMenu
 */
function createMenu(menu: Menu = defaultMenu): void {
  chrome.runtime.onInstalled.addListener(details => {
    const properties: CreateProperties[] = collectMenuCreateProperties(menu);
    // alert(JSON.stringify(properties));
    properties.forEach(property => {
      chrome.contextMenus.create(property);
    });

  });
}

/**
 * 递归方式返回 parent 中包含的{@link CreateProperties} 对象，
 * 每一层的 {@link CreateProperties.id} 必须不为空
 * 并以编码的方式保证： 第二层开始， {@link CreateProperties.parentId} 被正确设置
 *
 * @param parent 顶层
 */
function collectMenuCreateProperties(parent: Menu): CreateProperties[] {
  if (parent.createProperties.id === undefined) {
    throw  new Error('parent contextMenu must has id');
  }
  let result: CreateProperties[] = [];
  result.push(parent.createProperties);
  if (parent.children) {
    parent.children.forEach(child => {
      // 确保每一层的层级关系
      child.createProperties.parentId = parent.createProperties.id;
      result = result.concat(collectMenuCreateProperties(child));
    });
  }
  return result;
}

用例：

import {Component, OnInit} from '@angular/core';
import {createMenu} from './contextMenus';

@Component({
  selector: 'app-event-page',
  templateUrl: './event-page.component.html',
  styleUrls: ['./event-page.component.css']
})

/**
 * @author siweipancc
 * @version 1.0.0
 */
export class EventPageComponent implements OnInit {
  ngOnInit() {
    createMenu();
  }

}