Mailvelope - 技术栈

0x1 谷歌插件介绍

谷歌工具条是Google公司推出的一款免费的IE浏览器工具栏插件，于2000年12月11日推出 [9]。它与IE浏览器工具栏集成，用户可直接输入关键词调用Google搜索，而无需访问Google主页 [4]，并提供查看PageRank、阻止自动弹出窗口、自动填写表单、关键字高亮等功能。

谷歌插件的基本构成，一般来讲，谷歌插件包含Manifest文件、后台脚本、内容脚本、图标等多个文件构成。

谷歌插件及ChormeExtensions是一个小型的程序，它可以修改并增强chrome浏览器的功能。可以使用web技术（如HTML，CSS，JavaScript）来编写。一个扩展就是一个压缩的包，里面有HTML、CSS、JavaScript、图片或者任何你需要的资源。从本质上来讲，扩展就是一个web页面，它也可以使用浏览器为web页面提供的API

2 插件基础

2.1 创建manifest.json文件

任何谷歌插件都必须拥有的文件，这个文件的作用简单来说就是这个插件的组成清单，在这个清单上大约能看的这个插件的大体作用

下面是manifest.json的配置项

（1）Icons

插件的程序图标，可以一个或多个16的是插件页面图标48是管理界面图标

128是安装界面图标

（2）brower_action和page_action

这两个功能都是用来处理扩展在浏览器工具栏上的表现

区别是前者啥地方都能用后者是特定页面才能用

（3）default_popup

在用户点解扩展图标时可以设置弹出一个popup页面这个页面可以说是一个简单的网页也可以有自己的js脚本点击图标时运行此脚本

（4）Permissions

在background里使用一些chrmoeapi，需要授权才能使用。

2.2 background

background可以认为是插件运行是在浏览器中的一个后台脚本，与当前浏览页面无关。

Backgropund包括（page，scripts，persistent）

Page是后台网站的主页（不一定要求有）

Scripts就是后台引入的脚本文件

Persistent就是后台程序是否持久运行

2.3 content script

这部分脚本，简单来说是插入到网页中的脚本。它具有独立而富有包容性。所谓独立，指它的工作空间，命名空间，域等是独立的，不会说跟插入到的页面的某些函数和变量发生冲突。所谓包容性，指插件把自己的一些脚本（content script）插入到符合条件的页面里，作为页面的脚本，因此与插入的页面共享dom的，即用dom操作是针对插入的网页的，在这些脚本里使用的window对象跟插入页面的window是一样的。

主要用在消息传递上（使用postMessage和onmessage）

后台脚本，一般命名为 background.js，是插件的主要工作区域，可以监听浏览器事件，执行长时间运行的任务。

内容脚本，一般命名为 content.js，可以注入到符合指定匹配规则的网页中，用于操作网页的 DOM 节点、修改网页内容、与网页脚本进行交互等。

部署插件也比较简单，我们只需要在谷歌浏览器中打开网站：chrome://extensions/，找到加载已解压的扩展程序，就可以把我们调试中的插件部署到谷歌浏览器中查看结果。

调试起来也非常简单，可以按F12打开开发者工具，找到控制台，查看控制台的输出是否有异常，另外，插件本身也会在扩展程序的界面里显示自己出现的错误。

参考https://baike.baidu.com/item/%E8%B0%B7%E6%AD%8C%E5%B7%A5%E5%85%B7%E6%9D%A1/8728440

https://zhuanlan.zhihu.com/p/7460436407

https://cloud.tencent.com/developer/article/1695308

0x2 文件结构

0x3 Manifest介绍分析

Manifest文件的示例，它声明了插件的名称、描述、版本、权限等关键信息。

这个文件的作用简单来说就是这个插件的组成清单，在这个清单上大约能看的这个插件的大体作用

javascript 复制代码

//配置文件
{
//根据浏览器语言读取对应的messages.json
  "name": "__MSG_ext_name__",
//拓展名字短名称
  "short_name": "Mailvelope",
//替换版本号，版本号占位符
  "version": "@@mvelo_version",
//拓展描述
  "description": "__MSG_ext_description__",
//官方网站
  "homepage_url": "https://mailvelope.com",
  "author": "info@mailvelope.com",
  "manifest_version": 3,
  "minimum_chrome_version": "122",
//用户界面相关
  "action": {
//图标设置
    "default_icon": {
//不同大小
      "16": "img/Mailvelope/logo_signet_16.png",
      "24": "img/Mailvelope/logo_signet_24.png",
      "32": "img/Mailvelope/logo_signet_32.png",
      "48": "img/Mailvelope/logo_signet_48.png"
    },
    "default_popup": "components/action-menu/actionMenu.html",
    "default_title": "__MSG_ext_name__"
  },
//各种尺寸
  "icons": {
    "32": "img/Mailvelope/logo_signet_32.png",
    "48": "img/Mailvelope/logo_signet_48.png",
    "64": "img/Mailvelope/logo_signet_64.png",
    "96": "img/Mailvelope/logo_signet_96.png",
    "120": "img/Mailvelope/logo_signet_120.png",
    "128": "img/Mailvelope/logo_signet_128.png",
    "152": "img/Mailvelope/logo_signet_152.png",
    "180": "img/Mailvelope/logo_signet_180.png"
  },
//后台脚本，重点
  "background": {
    "service_worker": "background.bundle.js"
  },
//安全策略
//限制了扩展自己页面（如弹窗、选项页）可以加载的资源：
  · default-src 'self'：所有资源（脚本、图片等）默认只能从扩展自身加载。
  · style-src 'unsafe-inline'：允许内联样式。
  · img-src data:：允许使用 data: 协议的图片（例如 base64 编码的小图标）。
  · connect-src https:：允许通过 HTTPS 与服务器通信（如 API 调用）。

  "content_security_policy": {
    "extension_pages": "default-src 'self'; style-src 'unsafe-inline'; img-src data:; connect-src https:;"
  },
//国际化语言
  "default_locale": "en",
//允许访问所有网站url
  "host_permissions": [
    "*://*/*"
  ],
//协议
  "oauth2": {
//插件在谷歌api注册的客户端id
    "client_id": "119074447949-cvf898un7sfnv2ib7r4hvunqd56jm4c4.apps.googleusercontent.com",
//申请权限范围，权限设置
    "scopes":[

//userinfo.emai权限控制
//https://www.googleapis.com/auth谷歌所有api公用权限
//在谷歌中获取邮箱地址
      "https://www.googleapis.com/auth/userinfo.email",
//只读
      "https://www.googleapis.com/auth/gmail.readonly",
//读写
      "https://www.googleapis.com/auth/gmail.send"
    ]
  },
//可选权限，允许拓展与原生应用通信
  "optional_permissions": [
    "nativeMessaging"
  ],
//拓展选项页面
  "options_page": "app/app.html",
//声明必须的权限
  "permissions": [
    "alarms",
    "identity",
    "offscreen",
    "scripting",
    "storage",
    "tabs",
    "webNavigation"
  ],
//声明扩展可以直接被网页访问
  "web_accessible_resources": [{
    "resources": [
      "client-API/mailvelope-client-api.js",
      "components/decrypt-message/decryptMessage.html",
      "components/generate-key/genKey.html",
      "components/key-backup/backupKey.html",
      "components/restore-backup/backupRestore.html",
      "components/editor/editor.html",
      "components/encrypted-form/encryptedForm.html",
      "res/fonts/*.woff2",
      "img/edit_add-22.png",
      "img/key-24.png",
      "img/key-icon-blue96.png",
      "img/loading.gif",
      "img/mail_locked_96.png",
      "img/mail_signed_96.png",
      "img/mail_open_96.png",
      "img/mail_new.png",
      "img/ok48.png",
      "img/verify-24.png",
      "main.css"
    ],
//可以被所有网站访问
    "matches": ["*://*/*"]
  }]
}

00x1 oauth2

OAuth2.0是OAuth协议的延续版本，但不向下兼容OAuth 1.0(即完全废止了OAuth1.0)。 OAuth 2.0关注客户端开发者的简易性。要么通过组织在资源拥有者和HTTP服务商之间的被批准的交互动作代表用户，要么允许第三方应用代表用户获得访问的权限。同时为Web应用，桌面应用和手机，和智能家居设备提供专门的认证流程。

OAuth 2.0 是一套关于授权的行业标准协议。

OAuth 2.0 允许用户授权第三方应用访问他们在另一个服务提供方上的数据，而无需分享他们的凭据（如用户名、密码）

OAuth 2.0的应用场景非常广泛，包括但不限于：

第三方应用访问用户在其他服务上的信息，例如，一个应用通过OAuth 2.0访问用户在github.com上的数据。（只读）
第三方应用代表用户执行操作，例如，一个邮件客户端应用通过OAuth 2.0发送用户的电子邮件。（有授权才可以读写）
第三方应用使用OAuth 2.0实现用户的单点登录，例如，用户可以使用Github账号登录其他应用。（得那个应用支持github账号登录才行）

参考

https://cloud.tencent.com/developer/article/2418791