希望大家能点个赞，点个关注，支持下，谢谢
前言
最近接一个需求，老板要求开发一个PPT加载项，用户点击加载项，就可以在PPT里插入公司的网页，老实说在接到这个需求之前，我连PPT加载项是啥都不知道，更别说开发了。
于是我第一反应是拒绝的，后来在领导的细（威）心（逼）安（利）诱（诱）排下，我接手了这个项目。
先看下我的开发效果，然后再说技术细节和开发过程。
效果
效果如上图，新建一个空白ppt后，点击【插入】【加载项】选择对应的加载项。就可以在PPT里插入一个web页面，在这个页面，可以看公司的案例，也可以登录，请求接口调取用户自己新建的案例，然后把案例插入到ppt里。
效果应该还是不错的吧。
艰辛的开始
接下来说下艰难的开发过程。
我相信在座的各位，知道“Office 加载项”的应该很少很少。我周围的朋友都没人听说过。当我开始开发这个的时候，我想在网上找个案例瞧瞧。但是翻遍了几个技术网站，能找到的文章寥寥无几。有价值的文章几乎没有。翻墙找Google 也找不到什么案例。
于是只能硬着看office的开发文档。“office 加载项”开发文档见末尾。
这个文档让人评价的话，就是一堆shit。写的非常乱，非常别扭。当然也不排除是我个人理解能力有限导致的。结合这文档和微软提供的几个简单的案例，大概知道了office加载项是个什么东西。
今天咱也当会布道者，给在座广大朋友，科普下这个东西。说得不对的地方，还望指正。
Office 加载项的本质是什么
Office加载项可以理解为Office插件，可以同时在PPT、word、Excel等多个Office项目里使用，执行特定的功能。
Office加载项本质就个web网页，由html、css、js组成，可以使用原生js、jQuery、Vue、React、angular等常见框架开发。
使用Office加载项的时候，Office会开一个webview，用来运行加载项，所以能在浏览器里运行的，几乎都能在Office加载项里实现。
为了与Office进行交互，office提供了一个API，用来操作office中的文档。
看到这里，你应该就明白了，Office 加载项的开发很简单，就是照着以前的网页开发就行，无非就是多引入了一个office api而已。我当初不知道，看文档一团晕，直到差不多读了2遍相关文档才知道这是个什么东西。
Office 加载项的两种类型。
office加载项分两种，一种是taskpan，一种是content。
taskpan
taskpan，又叫taskpanApp,翻译成中文叫任务窗格。
taskpanApp，可以在顶部添加一个ribbon btn（固定在开始菜单），通过点击ribbon btn调出右侧的任务窗格。如下图所示。
也可以不添加ribbon btn。而是将加载项添加到右键菜单，通过右键，选择对应菜单，调出任务窗格。
还可以，通过点击【插入】【我的加载项】【xxx加载项】直接调出任务窗格。
任务窗口就是个webview，在里面你可以执行一些js代码。上图的那个案例，点击【Say hello
】按钮，就可以在PPT里插入“hello world”
content
content又叫contentApp。 跟taskpanApp相比，contentApp的调用非常简单，就一种，点击【插入】【我的加载项】然后选择对应的加载项即可。
contentApp不能添加ribbon btn，也不能添加到右键。
点击后页面会添加一个弹窗，这个弹窗就是一个webview。在里面就可以执行你对应的代码。
在开发的时候，taskpanApp和contentApp，只能选项一种，不能同时存在。具体是哪个你可以根据自己的需求决定。开发的时候选哪个，由manifest.xml文件中的OfficeApp标签决定。
这是我的项目的目录结构。
打开manifext.xml文件，查看其中的OfficeApp标签，xsi:type就是用来定义加载项类型的。
不得不吐槽下微软的技术文档，这么重要的东西，微软只用了一行小字来说明。
从0开发一个office 加载项
友情提示：以下会包含大量的外部链接，你可以看完全文后，再分别看对应的链接。
设置开发环境
你可以按照官方文档说的，配置开发环境。
不过官网文档说的有些复杂。我建议就是直接下载一个官网demo，在demo上开发，就当普通的web项目开发就行。demo里有很多代码是没用的，可以自行删掉。
项目结构
taskpan
taskpan项目的src文件夹下，包含“commands”和“taskpane”文件夹，每个文件夹下包含了各自的html、css、js（ts）文件。
commands文件夹包含commands.html、commands.js(ts)文件。
commands.html文件目前发现唯一的作用就是引入commands.js文件，别的就没啥用。commands.js里定义了点击ribbon btn时执行什么操作。
taskpan文件夹包含taskpan.html、css文件，js(ts)文件。定义了任务窗格需要显示的内容和功能。
content
content项目结构如下，只有一个content文件夹，没有taskpan和commands文件夹。有taskpan和commands也没用，会被直接忽略。
开发和调试
offiece 加载项的开发，就是普通的web开发。最复杂的就是调试了。
可以参考官方文档。
测试 Office 加载项 - Office Add-ins | Microsoft Learn
官网提供的方法，可以说非常的不好用，尤其是在windows上，会时不时中断，报一些解决不了的wanning。可以说调试起来非常心累。但是还是能调试下去。
一个比较简单的方式，就是在office365网页版上调试。
shell端执行
1 | npm run dev-server |
然后在网页版中选择【插入】【加载项】【上传我的加载项】上，上传我们项目里的manifest.xml。上传完就可以看到加载项的效果。
修改配置
office加载项里，最最重要的一个文件就是他的manifest.xml文件（配置清单）
office配置清单，可以查看这个文档，我就不写了。
也可以参考官方文档。
发布
我的项目还没开发完，所以还没发布。发布可以参考官方文档，看起来也不难。
部署和发布 Office 加载项 - Office Add-ins | Microsoft Learn
参考文档
Office 加载项平台概述 - Office Add-ins | Microsoft Learn
