原

Outlook WebAddin初探

1776人阅读 2023/9/11 18:31 总访问：2993330 评论：0 收藏：0 手机

分类: .net后台框架

![](https://img.tnblog.net/arcimg/hb/202a141f29e64a16b5e8ee16c56dd5e7.png)
>#Outlook WebAddin初探
[TOC]

安装前提
------------

tn2>首先，确保你的计算机上已安装Node.js和npm。
你可以在[官方网站](https://nodejs.org/)下载并安装它们。

![](https://img.tnblog.net/arcimg/hb/f471c91139e64e3f8bd0b7e0481517ab.png)


### VS Code安装Teams Toolkit

tn2>在vscode扩展组件中安装Teams Toolkit组件。

![](https://img.tnblog.net/arcimg/hb/cf5181c068d14bd48d3cb79e82f5a341.png)

创建项目
------------

tn2>首先点开Teams这个图标点击。

![](https://img.tnblog.net/arcimg/hb/6541d5458a03462b813aecd87b93b8f7.png)

tn2>点击`Create a New App`进行创建一个新的项目。

![](https://img.tnblog.net/arcimg/hb/f97eda3860c7477598d186710cfa0c3e.png)

tn2>然后选择`Outlook Add-in`-->`Taskpane`-->选择项目保存的地址-->输入项目名，就创建好了。

![](https://img.tnblog.net/arcimg/hb/428c024487ae412dbb61643e25b809e0.png)

![](https://img.tnblog.net/arcimg/hb/427c84ae80424e60bf3b7d6b50890542.png)

![](https://img.tnblog.net/arcimg/hb/728d70520cee42449a2327932b0d4f56.png)

tn2>项目创建完成后，我们需要安装依赖包。
在项目目录打开一个控制窗口，执行`npm install`进行安装相关依赖包。

![](https://img.tnblog.net/arcimg/hb/5c009666eacd46898d2d4e6d9f467ece.png)

![](https://img.tnblog.net/arcimg/hb/17f1b4fe6d004a07acb27c2fd564ff9c.png)

tn2>然后我们还需要确认，登录Microsoft 365，点开Teams图标点击Microsoft 365，我这里已经登录好了可以看到。

![](https://img.tnblog.net/arcimg/hb/63bfdcf5a5494d95aa1a75fa80981ffe.png)

运行项目
------------

tn2>在VSCode中直接按`F5`就可以了，它会自动执行如下两个命令。

```bash
npm install
npm run start
```

![](https://img.tnblog.net/arcimg/hb/0f1ae1591a564a039e84206f52f7b6b5.png)

![](https://img.tnblog.net/arcimg/hb/fd69d6e8d1e64725b35dd6ff6bd06a82.png)

tn>注意：中途可能会弹出需要你安装开发者证书，点击Yes就行了。
在运行前请关闭Outlook。

tn2>项目启动后，对外开放的端口为`3000`，并且会自动打开outlook添加好插件。

![](https://img.tnblog.net/arcimg/hb/247bb61b5a2a40f499c08ed158a1dbeb.png)

tn2>随后我们点开有个邮件，再点我们的按钮就会弹出如下内容：

![](https://img.tnblog.net/arcimg/hb/3acf7eff16e04e978d6764fec578811f.png)

向功能区添加自定义按钮
------------

tn2>将自定义按钮添加到功能区，用于将文本插入到邮件正文中。
在代码编辑器中，打开文件 `./src/command/command.ts`，并将以下代码添加到文件末尾。
此函数将 `insertHelloWorld` 插入到邮件正文中的光标点。

```javascript
function insertHelloWorld(event: Office.AddinCommands.Event) {
  Office.context.mailbox.item.body.setSelectedDataAsync("Hello World", {coercionType: Office.CoercionType.Text});

  // Be sure to indicate when the add-in command function is complete
  // 确保在添加器命令函数完成后发出信号
  event.completed();
}

// Register the function with Office
// 将函数注册到 Office
Office.actions.associate("insertHelloWorld", insertHelloWorld);
```

tn2>当我们需要写入邮件时，需要提高加载项的权限。
将`authorization.permissions.resourceSpecific[0].name`属性值更改为`MailboxItem.ReadWrite.User`。

```javascript
"authorization": {
        "permissions": {
            "resourceSpecific": [
                {
                    "name": "MailboxItem.ReadWrite.User",
                    "type": "Delegated"
                }
            ]
        }
    },
```

tn2>当外接程序命令运行代码而不是打开任务窗格时，它必须在运行时中运行代码，该运行时独立于任务窗格代码运行的嵌入式 Web 视图。 因此，清单必须指定其他运行时。
我们在 `extension.runtimes` 下添加对象到 `runtimes` 数组。<br/>
`actions[0].id` 属性的值必须与添加到 `commands.ts` 文件的函数名称完全相同，在此情况中为 `insertHelloWorld`。
在后面的步骤中，将按此 ID 引用项目。

```javascript
{
    "id": "ComposeCommandsRuntime",
    "type": "general",
    "code": {
        "page": "https://localhost:3000/commands.html",
        "script": "https://localhost:3000/commands.js"
    },
    "lifetime": "short",
    "actions": [
        {
            "id": "insertHelloWorld",
            "type": "executeFunction",
            "displayName": "insertHelloWorld"
        }
    ]
}
```

tn2>由于我们需要修改邮件内容，所以在`ribbons`下的`contexts`中应该设置为`mailCompose`而不是`mailRead`，这样就在输入邮件时显示我们的软件。当然如果你希望二者并存可以这样。

```javascript
"contexts": [
    "mailCompose",
	"mailRead"
],
```

tn2>然后添加上我们的按钮。

```javascript
{
    "id": "HelloWorldButton",
    "type": "button",
    "label": "Insert text",
    "icons": [
        { "size": 16, "file": "https://localhost:3000/assets/my-icon-16.png" },
        { "size": 32, "file": "https://localhost:3000/assets/my-icon-32.png" },
        { "size": 80, "file": "https://localhost:3000/assets/my-icon-80.png" }
    ],
    "supertip": {
        "title": "Insert text",
        "description": "Inserts some text."
    },
    "actionId": "insertHelloWorld"
}
```

tn2>最后运行一下，打开一个新的邮件，输入内容后选中所选的内容再点击我们新添加的按钮`Insert text`，它将会进行改变为`Hello World`。

![](https://img.tnblog.net/arcimg/hb/f0b86c2656c14511b119e70a7c8366ab.png)

![](https://img.tnblog.net/arcimg/hb/0e9803281bde40a0bf972c9b31bc20be.png)

调用API
------------

### 修改分组栏的名字

tn2>在`manifest.json`中找到以下节点，对label标签进行更改。
我将`label`这里改成了`Oerlikon`,分组框就编程了`Oerlikon`,大家随意更改。
然后我们F5查看一下。

```json
    "extensions": [
        {
            "ribbons": [
                {
                    "tabs": [
                        {
                            "builtInTabId": "TabDefault",
                            "groups": [
                                {
                                    "id": "msgReadGroup",
                                    "label": "Oerlikon",
```

![](https://img.tnblog.net/arcimg/hb/72f05d740a034d28ac545304b6e515c0.png)


### 更换图标

tn2>我在阿里云矢量图标库上找到`16x16`、`32x32`、`64x64`、`80x80`、`128x128`的图片进行下载，并放到的`assets`目录下。
并对所有的icons进行修改（这里我举例一部分）。

![](https://img.tnblog.net/arcimg/hb/f683c9072c9f44909fd691b07be069e7.png)

```json
"label": "Oerlikon",
"icons": [
	{
		"size": 16,
		"file": "https://localhost:3000/assets/my-icon-16.png"
	},
	{
		"size": 32,
		"file": "https://localhost:3000/assets/my-icon-32.png"
	},
	{
		"size": 80,
		"file": "https://localhost:3000/assets/my-icon-80.png"
	}
],
```

![](https://img.tnblog.net/arcimg/hb/89459e0ee9404615ae86e0838fc2f3f0.png)

### 函数列表

| 函数名  | 描述  |
| ------------ | ------------ |
| `Office.context.mailbox.item.body.setSelectedDataAsync`  | 可以将修改的文本内容进行替换。  |
| `Office.context.mailbox.item.notificationMessages.replaceAsync`  | 可以弹出对邮件处理的消息。(按照官方示例点击第二个按钮像这样![](https://img.tnblog.net/arcimg/hb/61f816878dfb42d8adcc5af83547ff84.png) )  |

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

尘叶心繁

这一世以无限游戏为使命！

博主信息

排名

文章

粉丝

文章类别

.net后台框架 178篇

linux 18篇

linux中cve 1篇

windows中cve 0篇

资源分享 10篇

Win32 3篇

前端 28篇

传说中的c 5篇

Xamarin 9篇

docker 15篇

容器编排 101篇

grpc 4篇

Go 15篇

yaml模板 1篇

理论 2篇

Outlook WebAddin初探

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}