Chrome Extension ContextMenus 创建 适配Manifest3

Manifest3 之后 ContextMenus也进行了升级。
Manifest3配置如下：

  "background": {
    "service_worker": "background.ts"
  },
  "permissions": [
    "contextMenus",
  ]

background中的scripts改成了service_worker。
Manifest3的文档地址https://developer.chrome.com/docs/extensions/mv3/intro/
ContextMenus调用只能在background配置的service_worker里边，页面脚本只能使用部分chrome extension方法。
contextMenus的文档地址https://developer.chrome.com/docs/extensions/reference/contextMenus/
写法如下：

chrome.contextMenus.create({
  'id': 'download all image',
  'title': '下载页面中图片',
  'contexts':['page'],
})

chrome.contextMenus.create({
  'id': 'download same image',
  'title': '下载同类图片',
  'contexts':['image'],
})

// 事件回调都放到了统一一个地方监听。
chrome.contextMenus.onClicked.addListener((info, tab) => {
  console.log(info ,tab)
  if (info.menuItemId == 'download all image') {
    console.log('download all image')
  } else if (info.menuItemId == 'download same image') {
    console.log('download same image')
  }
})

这样就能在页面里边显示出右键的菜单了。