Создание первой надстройки Outlook

В этой статье описан процесс создания надстройки области задач Outlook с помощью Yo Office, отображающей по крайней мере одно свойство выбранного сообщения.

Предварительные условия

• Node.js (последняя версия LTS). Посетите сайтNode.js , чтобы скачать и установить правильную версию для вашей операционной системы.

• Последняя версия Yeoman и генератора Yeoman для надстроек Office. Выполните в командной строке указанную ниже команду, чтобы установить эти инструменты глобально.

  npm install -g yo generator-office
  

  Примечание.

  Даже если вы уже установили генератор Yeoman, рекомендуем обновить пакет до последней версии из npm.

• Пакет Office, подключенный к подписке Microsoft 365 (включая Office в Интернете).

  Примечание.

  Если у вас еще нет Office, вы можете получить подписку разработчика на Microsoft 365 E5 в рамках программы microsoft 365 для разработчиков. Дополнительные сведения см. в разделе Часто задаваемые вопросы. Кроме того, вы можете зарегистрироваться для получения бесплатной пробной версии на 1 месяц или приобрести план Microsoft 365.

• Outlook в Интернете, новый Outlook для Windows, Outlook 2016 или более поздней версии в Windows (подключенной к учетной записи Microsoft 365) или Outlook на Mac.

Создание проекта надстройки

1. Выполните следующую команду, чтобы создать проект надстройки с помощью генератора Yeoman. Папка, содержащая проект, будет добавлена в текущий каталог.

   yo office
   

   Примечание.

   При выполнении команды yo office может появиться запрос о политиках сбора данных генератора Yeoman и средств CLI надстройки Office. Используйте предоставленные сведения, чтобы ответить на запросы подходящим образом.

   При появлении запроса предоставьте следующую информацию для создания проекта надстройки.

   • Выберите тип проекта - Office Add-in Task Pane project
   • Выберите тип сценария - JavaScript
   • Как вы хотите назвать свою надстройку? - My Office Add-in
   • Какое клиентское приложение Office должно поддерживаться? - Outlook
   • Какой манифест вы хотите использовать? — выберите или Unified manifest for Microsoft 365Add-in only manifest

   Примечание.

   Единый манифест для Microsoft 365 позволяет объединить надстройку Outlook с приложением Teams в качестве единого блока разработки и развертывания. Мы работаем над расширением поддержки унифицированного манифеста для Excel, PowerPoint, Word, пользовательской разработки Copilot и других расширений Microsoft 365. Дополнительные сведения об этом см. в статье Надстройки Office с унифицированным манифестом. Пример объединенного приложения Teams и надстройки Outlook см. в разделе Предложения скидок.

   Мы любим получать ваши отзывы о едином манифесте. Если у вас есть какие-либо предложения, создайте проблему в репозитории библиотеки JavaScript для Office.

   В зависимости от выбранного манифеста запросы и ответы должны выглядеть следующим образом:

   

   

   После завершения работы мастера генератор создаст проект и установит вспомогательные компоненты Node.

2. Перейдите в корневую папку проекта веб-приложения.

   cd "My Office Add-in"
   

Знакомство с проектом

Генератор Yeoman создает проект в папке с выбранным именем проекта. Проект содержит пример кода для очень простой надстройки области задач. Ниже приведены наиболее важные файлы.

• Параметры и возможности надстройки определяются в файле ./manifest.json или ./manifest.xml в корневом каталоге проекта.
• Файл ./src/taskpane/taskpane.html содержит разметку HTML для области задач.
• Файл ./src/taskpane/taskpane.css содержит код CSS, который применяется к содержимому области задач.
• Файл ./src/taskpane/taskpane.js содержит код API JavaScript для Office, который упрощает взаимодействие между областью задачи и Outlook.

Проверка

Примечание.

• Надстройки Office должны использовать HTTPS, а не HTTP, даже во время разработки. Если после выполнения одной из следующих команд вам будет предложено установить сертификат, примите запрос на установку сертификата, который предоставляет генератор Yeoman. Кроме того, вам может потребоваться запустить командную строку или терминал с правами администратора, чтобы внести изменения.

• Если вы впервые разрабатываете надстройку Office на компьютере, в командной строке может появиться запрос на предоставление Microsoft Edge WebView исключения замыкания на себя ("Разрешить замыкания на себя локальный узел для Microsoft Edge WebView?"). При появлении запроса введите Y , чтобы разрешить исключение. Обратите внимание, что вам потребуются права администратора, чтобы разрешить исключение. После этого вам не следует запрашивать исключение при загрузке неопубликованных надстроек Office в будущем (если вы не удалите исключение с компьютера). Дополнительные сведения см. в разделе "Не удается открыть эту надстройку из localhost" при загрузке надстройки Office или с помощью Fiddler.

  

1. Выполните следующую команду в корневом каталоге своего проекта. При выполнении этой команды запускается локальный веб-сервер, и надстройка загружается неопубликованно.

   npm start
   

   Примечание.

   Если надстройка не была автоматически загружена неопубликованным приложением, следуйте инструкциям в разделе Загрузка неопубликованных надстроек Outlook для тестирования, чтобы вручную загрузить надстройку неопубликованного приложения в Outlook.

2. В Outlook просмотрите сообщение в области чтения или откройте сообщение в отдельном окне.

3. Нажмите кнопку Показать область задач, чтобы открыть область задач надстройки. Расположение кнопки надстройки зависит от используемого клиента Outlook.

   • Outlook в Интернете и новый Outlook в Windows: на панели действий сообщения выберите Приложения. Затем выберите Моя надстройка> OfficeПоказать область задач.
   • Классический Outlook в Windows: выберите вкладку Главная (или вкладку Сообщение , если вы открыли сообщение в новом окне). Затем на ленте выберите Показать область задач .
   • Outlook на Mac: выберите Моя надстройка Office на ленте, а затем выберите Показать область задач. Для просмотра надстроек может потребоваться нажать кнопку с многоточием (...) на ленте.

   На следующих снимках экрана показано, как надстройка отображается в классической версии Outlook в Windows.

   

4. При появлении запроса с диалоговым окном Остановка при загрузке веб-представления выберите ОК.

   Примечание.

   После нажатия кнопки Отменадиалоговое окно не будет отображаться в процессе работы с этим экземпляром надстройки. Однако при перезапуске надстройки диалоговое окно снова появится.

5. Прокрутите область задачи в самый низ и перейдите по ссылке Выполнить, чтобы написать тему сообщения в области задач.

   

   

6. Если вы хотите остановить локальный веб-сервер и удалить надстройку, следуйте применимым инструкциям:

   • Чтобы остановить сервер, выполните следующую команду. Если вы использовали npm start, следующая команда также должна удалить надстройку.

     npm stop
     

   • Если вы вручную загрузили неопубликованную надстройку, см. статью Удаление неопубликоченной надстройки.

Дальнейшие действия

Поздравляем! Вы успешно создали свою первую надстройку для области задач Outlook! Теперь воспользуйтесь руководством по надстройкам Outlook, чтобы узнать больше о возможностях надстроек Outlook и создать более сложную надстройку.

Устранение неполадок

• Убедитесь, что ваша среда готова к разработке в Office, следуя инструкциям в разделе Настройка среды разработки.

• В некоторых примерах кода используется ES6 JavaScript. Это несовместимо с более старыми версиями Office, которые используют подсистему браузера Trident (Интернет-Обозреватель 11). Сведения о поддержке этих платформ в надстройке см. в разделе Поддержка более старых веб-представлений Майкрософт и версий Office. Если у вас еще нет подписки Microsoft 365 для разработки, вы можете получить право на Microsoft 365 E5 подписку разработчика в рамках программы microsoft 365 для разработчиков. Дополнительные сведения см. в разделе Вопросы и ответы. Кроме того, вы можете зарегистрироваться для получения бесплатной пробной версии на 1 месяц или приобрести план Microsoft 365.

• Автоматическое npm install выполнение шага Yo Office может завершиться ошибкой. Если при попытке запустить npm startвы видите ошибки , перейдите в только что созданную папку проекта в командной строке и вручную запустите npm install. Дополнительные сведения о Yo Office см. в статье Создание проектов надстроек Office с помощью генератора Yeoman.

• Если сообщение об ошибке "Не удается открыть эту надстройку с localhost" появляется в области задач, выполните действия, описанные в статье по устранению неполадок.

Примеры кода

• Надстройка Outlook "Hello мире". Узнайте, как создать простую надстройку Office с манифестом, веб-страницей HTML и логотипом.

См. также

• Надстройки Office с манифестом только надстройки
• Использование Visual Studio Code для публикации