准備工作
如果你的郵箱搭建在 Exchange Server 上，則可以創建郵件應用程序（Mail Add-in）來擴展Office本身的功能，使用 Office Add-in Model 開發的 Mail Add-in 可以運行在 Outlook 富客戶端、Outlook Web App 和 適用於各種設備（如 IOS）的 OWA 上。在開發之前，你需要一個有效的郵箱賬號和密碼（如你在公司內部的 工作郵箱）。
創建 Mail Add-In 項目
Step 1
在 Visual Studio 中（如下圖），點擊 文件>>新建>>項目，在彈出的窗口中，展開左側的項目模板，依次點擊 Visual C# >> Office/SharePoint >> Apps >> App for Office。
注意：本文使用的 VS 版本號為 Visual Studio Ultimate 2013 Version 12.0.30723.00 Update 3，項目模板中你所看到的“Office Add-Ins”是指基於 VSTO 技術創建 Office 擴展應用的項目模板。而在最新的 Office Developer Tools for Visual Studio 中的命名中，Office Add-ins 已經被 Office VSTO Add-ins 替換；相應的， Apps 也已被 Office Web AddIn 所替換（詳情請查看 https://msdn.microsoft.com/en-us/library/fp161507.aspx#bk_newname）。
另外，如果在項目模板下沒有找到 Office/SharePoint，請先下載相應VS版本的 Office Developer Tools for Visual Studio( https://www.visualstudio.com/en-us/features/office-tools-vs.aspx)，如針對Visual Studio 2013的Office Developer Tools for Visual Studio 2013.（下載地址：http://aka.ms/OfficeDevToolsForVS2013）。
Step 2
選擇要創建的 Add-In 類型，選擇 “Mail”。你可以通過 Office Apps 類型及平台支持 看到Office Add-in 有哪些類型。
Step 3
選擇 Mail add-in在郵件的哪些狀態（只讀、編輯）下出現，這里我們只希望 add-in 在用戶讀郵件或者約會時出現。
Step 4
在該項目中找到 Home.html（Office Developer Tools For Visual Studio 2013 為 Mail Add-in 生成的項目中包含這個頁面，並且是 add-in 的首頁面，如果你沒有找到，可以根據下文 manifest 的介紹找到主頁面然后繼續），粘貼如下代碼將原有內容覆蓋。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <title></title> <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js" type="text/javascript"></script> <link href="../../Content/Office.css" rel="stylesheet" type="text/css" /> <script src="//appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script> <link href="Home.css" rel="stylesheet" type="text/css" /> <script src="Home.js" type="text/javascript"></script> </head> <body> <div id="content-main"> <div class="padding"> <p><strong>Add home screen content here.</strong></p> <p>For example, this app was activated with following details:</p> <table id="details"> <tr> <th>Subject:</th> <td><span id="subject"></span></td> </tr> <tr> <th>From:</th> <td><span id="from"></span></td> </tr> </table> </div> </div> <div id="content-footer"> <div class="padding"> <a target="_blank" href="https://go.microsoft.com/fwlink/?LinkId=276814">Find more samples online...</a> </div> </div> </body> </html>
Step 5
找到並修改 Home.js 文件（類似Step 4，如果你的項目中沒有它，可以找到add-in 主頁，然后在主頁相同路徑下創建 Home.js，然后繼續），粘貼如下代碼將原有內容覆蓋
// The Office initialize function must be run each time a new page is loaded Office.initialize = function (reason) { $(document).ready(function () { displayItemDetails(); }); }; // Displays the "Subject" and "From" fields, based on the current mail item function displayItemDetails() { var item = Office.cast.item.toItemRead(Office.context.mailbox.item); $('#subject').text(item.subject); var from; if (item.itemType === Office.MailboxEnums.ItemType.Message) { from = Office.cast.item.toMessageRead(item).from; } else if (item.itemType === Office.MailboxEnums.ItemType.Appointment) { from = Office.cast.item.toAppointmentRead(item).organizer; } if (from) { $('#from').text( "DisplayName: " + from.displayName + ", Email Address:" + from.emailAddress); } }
Step 6
點擊綠色箭頭按鈕啟動並選擇瀏覽器，VS 會用該瀏覽器彈出一個網頁（類似如下頁面，不用太在意它）
Step 7
此時，在這台開發機上的 Outlook 客戶端或者網頁端上 打開任意一封郵件，會發現 ZanApp 的鏈接：
點擊 ZanApp 之后，add-in 開始運行如下，此時這封郵件的 subject 和發送人會在 add-in 里顯示出來。
調試 AddIn 的代碼
項目文件介紹
此時，你在Visual Studio中會看到類似於下圖中的兩個項目：第一個項目是用來管理該add-in的配置文件，第二個項目則是該add-in的實現（也就是網站）。
當我們點擊了綠色箭頭按鈕啟動了項目之后，VS 會要求你輸入你的郵箱用戶名和密碼，然后它通過如下步驟完成部署用於調試：
1. 將當前add-in的manifest（add-in的配置文件）上傳到當前開發者所登陸的exchange 服務器上。
你可通過修改第一個項目中的配置文件來修改 add-in 的主頁及其他基本信息。下面是一個 Manifest 舉例，大家可以通過它認識到 Add-in 的哪些屬性可以定制。更詳盡的官方文檔信息在 Office Add-ins XML manifest。
<?xml version="1.0" encoding="UTF-8"?> <!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9--> <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="MailApp"> <Id>c425abba-72d8-4343-a960-0e30291217d0</Id> <Version>1.0.0.0</Version> <ProviderName>[Provider name]</ProviderName> <DefaultLocale>en-US</DefaultLocale> <DisplayName DefaultValue="ZanApp" /> <Description DefaultValue="ZanApp"/> <AppDomains> <AppDomain>https://login.microsoftonline.com/common/oauth2/authorize</AppDomain> <!--當add-in網頁需要redirect任何其他域名下的網頁時，需要將該域名加入到AppDomains中--> </AppDomains> <Capabilities> <Capability Name="Mailbox" /> </Capabilities> <DesktopSettings> <SourceLocation DefaultValue="https://localhost:44306/addin/appread/home/home.html" /> <!—add-in 加載時的主頁 --> <RequestedHeight>300</RequestedHeight> <!—add-in在郵件中顯示的高度--> </DesktopSettings> <Permissions>ReadItem</Permissions> <!—當前add-in需要的對郵箱的權限--> <Rule xsi:type="RuleCollection" Mode="Or"> <Rule xsi:type="ItemIs" ItemType="Message"/> <Rule xsi:type="ItemIs" ItemType="Appointment"/> </Rule> <DisableEntityHighlighting>false</DisableEntityHighlighting> </OfficeApp>
2. 把當前add-in的實現（其實就是一個網站）用iisexpress host 起來。（注意，郵件應用程序需要 host 在支持 https 的 URL 下，The apps for Office platform requires that all source files are hosted on secure (HTTPS) sites.詳情請參考Tips to develop a great mail app for Office）
這樣我們就可以通過諸如 https://localhost:44304/appread/home/home.html 來訪問該add-in 中的home網頁了。
而此時，如果你在當前機器上的郵件客戶端中打開任一封郵件，便可以看到add-in的入口鏈接了。（其他用戶則無法看到處於調試階段的add-in）
Debugging -- 如何調試add-in的代碼實現
Add-in需要運行在郵件客戶端（如outlook）上，所以即使我們開發add-in用的都是JavaScript代碼，我們也無法利用瀏覽器F12開發者工具進行調試 (除非你使用網頁版郵箱OWA打開)。接下來我們將通過一個實例介紹如何利用Visual Studio調試”寄宿並運行於” Outlook界面(中的iframe)里的add-in 代碼，如JavaScript。
0. 啟用 IE debugging 選項， 將“Disable script debugging（Internet Explorer） 和 Disable script debugging (Other)” 選項去掉（uncheck)。
首先，有必要再提一下，add-in實際上是運行在outlook讀郵件界面上嵌入的iframe中，所以最終還是被瀏覽器（IE）解析並運行的。如果要調試這些代碼，我們需要找到運行代碼的瀏覽器進程號。
1. 利用Fiddler查詢運行add-in的瀏覽器進程號
打開任意一封郵件，點擊add-in入口鏈接，add-in顯示類似如下界面：
打開fiddler，可以看到如下圖綠色框住的部分，點擊鼠標左鍵並將其挪到上圖的add-in顯示區域內，fiddler將發現並顯示運行該add-in的瀏覽器進程號。
2. 使用 VS Attach 到該進程
打開另一個 Visual Studio 2013 程序，不用打開任何項目
依次點擊 Debug>> Attach to Process，如下圖所示，找到對應的瀏覽器進程，點擊attach。
3. 開始調試
接下來，運行在瀏覽器進程中的 js 等文件被顯示在 Solution Explorer中，你可以雙擊打開文件，並為之添加斷點。然后就可以通過必要的途徑觸發該斷點（如reload add-in頁面或者點擊add-in中的按鈕）進行調試了。
這種調試方法同樣適用於開發 Word、Excel、PPT上的 任務面板 Add-In 和 內容 Add-in。
參考資料
- What's new in Office Developer Tools for Visual Studio 2013 -- https://msdn.microsoft.com/en-us/library/office/jj220049.aspx
- Office Developer Tools -- https://www.visualstudio.com/en-us/features/office-tools-vs.aspx
- Office Add-ins XML manifest -- https://msdn.microsoft.com/en-us/library/office/fp161044.aspx
- Office Apps 類型及平台支持 -- http://simpeng.net/oai/oai-chapter-1/office-addin-types-and-current-platoform-supporting.html?s=oai-chapter-1-section-3
- Tips to develop a great mail app for Office -- http://blogs.msdn.com/b/officeapps/archive/2013/10/16/tips-to-develop-a-great-mail-app-for-office.aspx
- 使用 Visual Studio 為 Outlook 創建第一個郵件應用程序 -- https://msdn.microsoft.com/zh-SG/library/fp142159
如需轉載，請注明出處 http://www.cnblogs.com/simpeng/p/4691508.html，謝謝。