Giao diện người dùng của tiện ích bổ sung dành cho trình chỉnh sửa
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Tiện ích bổ sung của trình chỉnh sửa cho phép người dùng tương tác thông qua các trình đơn, hộp thoại và thanh bên tuỳ chỉnh. Các đường liên kết sau đây cung cấp thông tin về cách tạo các loại giao diện này.
Trình đơn tiện ích bổ sung được tạo bằng dịch vụ Ui cơ bản của Apps Script.
Các mục trong trình đơn cung cấp điểm bắt đầu ban đầu để sử dụng tiện ích bổ sung, nhưng bạn phải thiết kế các mục này để tính đến vòng đời uỷ quyền của tiện ích bổ sung.
Thanh bên và hộp thoại được tạo bằng dịch vụ HTML của Apps Script. Dịch vụ này cho phép bạn xác định cấu trúc và giao diện bằng HTML và CSS.
Hãy xem phần Tạo và phân phát HTML để biết thêm thông tin.
- Bạn cũng có thể thiết lập các lệnh gọi giao tiếp giữa máy khách và máy chủ để các hành động của người dùng trong giao diện dẫn đến các hành động được thực hiện trên máy chủ của Google nơi tệp trình chỉnh sửa cư trú hoặc ngược lại.
- Apps Script cũng cung cấp một cú pháp mẫu để giúp bạn dễ dàng tạo giao diện động.
Khi tạo giao diện HTML cho các tiện ích bổ sung của Trình chỉnh sửa, bạn nên sử dụng gói CSS tiện ích bổ sung của Trình chỉnh sửa để giúp tiện ích bổ sung của bạn có giao diện giống như các trình chỉnh sửa Google Workspace mà tiện ích bổ sung đó mở rộng.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-07-31 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-07-31 UTC."],[[["\u003cp\u003eEditor add-ons enhance user interaction with custom menus, dialogs, and sidebars, built using Apps Script's UI and HTML services.\u003c/p\u003e\n"],["\u003cp\u003eAdd-on menus initiate add-on usage and should be designed considering the add-on authorization lifecycle.\u003c/p\u003e\n"],["\u003cp\u003eSidebars and dialogs, created with HTML service, allow for defining the add-on's interface structure and appearance using HTML, CSS, and client-server communication for dynamic interactions.\u003c/p\u003e\n"],["\u003cp\u003eThe Editor add-on CSS package ensures visual consistency with Google Workspace editors.\u003c/p\u003e\n"]]],["Editor add-ons allow user interaction via custom menus, dialogs, and sidebars. Menus, built with the Ui service, serve as starting points, requiring design consideration for the add-on authorization lifecycle. Sidebars and dialogs, created using the HTML service, utilize HTML and CSS for interface design. Client-server communication enables actions on the server based on user interface interactions. The editor add-on CSS package maintains a consistent look and feel with Google Workspace editors. Dynamic interface creation is supported via a template syntax.\n"],null,["# Editor add-on user interfaces\n\n[Editor add-ons](/workspace/add-ons/concepts/types#editor_add-ons)\nenable user interaction through customized menus, dialogs, and\nsidebars. The following links provide information building these types of\ninterfaces.\n\n- [Add-on menus](/workspace/add-ons/concepts/menus) are created using\n Apps Script's base [Ui service](/apps-script/reference/base/ui).\n Menus items provide initial starting points for using your add-on,\n but you must design them to take into account the add-on\n [authorization lifecycle](/workspace/add-ons/concepts/editor-auth-lifecycle#the_complete_lifecycle).\n\n- [Sidebars and dialogs](/workspace/add-ons/concepts/dialogs) are created using\n Apps Script's [HTML service](/apps-script/reference/html). This service\n lets you define the interface structure and appearence using HTML and CSS.\n See [Create and serve HTML](/apps-script/guides/html) for more details.\n\n - You can also set up [client-server communication](/apps-script/guides/html/communication) calls so that user actions in the interface result in actions taken on the Google servers where the editor file resides, or vice versa.\n - Apps Script also provides a [template syntax](/apps-script/guides/html/templates) to make building dynamic interfaces easier.\n- When building HTML interfaces for Editor add-ons, you should use the\n [Editor add-on CSS package](/workspace/add-ons/guides/css) to help your add-on\n look and feel like the Google Workspace editors\n they extend."]]
