🧩 打造專屬 Discord 個人檔案小工具

2253 字
11 分鐘
本文章最後更新於 0 天前,其中某些資訊可能已經過時,請謹慎使用!
🧩 打造專屬 Discord 個人檔案小工具

前言#

Discord Widget(小工具)可以讓你在 Discord 個人檔案中展示更多客製化資訊,不只能讓 Profile 看起來更有特色,也能呈現原本個人簡介放不下的內容,例如社群連結、遊戲資料、個人作品或動態資訊。

這篇教學會帶你從建立 Discord Application、解鎖 Widget Editor、設計版面,到最後傳送資料並把 Widget 加入個人檔案。

NOTE

Discord Widget v2 目前仍屬於實驗功能,部分設定需要使用尚未公開在一般介面中的功能,因此 Discord 未來可能修改、限制或移除相關操作。


1. 建立 Discord Application#

首先,你需要準備一個 Discord 帳號和 Google Chrome 瀏覽器。首先,你需要準備一個 Discord 帳號和 Google Chrome 瀏覽器。前往 Discord Developer Portal 並登入帳號,登入後,點選左側的「應用程式」,接著按右上角的「新建應用程式」,輸入應用程式名稱、勾選相關條款,再按下「建立」。

建立完成後,點選左側「遊戲」選單中的 Social SDK。Social SDK 是 Discord 用來整合社交功能的一套開發工具,而 Widget v2 就包含在這個功能架構中。進入頁面後,Discord 會要求你填寫公司名稱、團隊所在地、姓名與其他基本資訊。這些資料不會影響 Widget 的外觀設計,但仍建議填寫合理且正確的內容,完成後按下提交。


2. 解鎖 Widget Editor#

Widget Config Editor 預設被隱藏在 Discord 的實驗功能旗標後方,即使進入 Developer Portal,也不會直接看到。按下鍵盤上的 F12 開啟 Chrome 開發者工具,並切換到 Console 頁面。

這時瀏覽器可能會顯示「在這裡貼上任何資訊,均有可能讓惡意攻擊者存取您的 Discord 帳號」等警告。這是正常的安全提醒,因為在 Console 執行陌生程式碼確實可能造成帳號或資料外洩,因此不要隨意執行來源不明的程式碼。

將以下程式碼貼入 Console,並按下 Enter:

let _mods = webpackChunkdiscord_developers.push([[Symbol()], {}, r => r.c]);
webpackChunkdiscord_developers.pop();
let findByProps = (...props) => {
for (let m of Object.values(_mods)) {
try {
if (!m.exports || m.exports === window) continue;
if (props.every((x) => m.exports?.[x])) {
return m.exports;
}
for (let ex in m.exports) {
if (
props.every((x) => m.exports?.[ex]?.[x]) &&
m.exports[ex][Symbol.toStringTag] !== "IntlMessagesProxy"
) {
return m.exports[ex];
}
}
} catch {}
}
};
findByProps("getAll")
.getAll()
.find(e => e.getName() === "ApexExperimentStore")
.createOverride("2026-03-widget-config-editor", 1);

這段程式碼會從 Discord Developer Portal 的前端模組中找到實驗功能管理器,並將 2026-03-widget-config-editor 設定為 Variant 1,藉此解鎖 Widget Config Editor。它不會直接修改你的帳號密碼或 Bot Token,但使用的是 Discord 未公開的內部功能,因此未來可能失效。

執行完成後,先不要按 F5 或重新整理頁面。點選左上角的「← 應用程式」,回到應用程式列表,再重新進入剛才建立的 Application。接著展開左側的「遊戲」選單,這時應該會看到原本沒有出現的「小工具」選項,點進去後即可開啟 Widget 的客製化介面。


3. 設計 Widget 版面#

進入 Widget Editor 後,左側選單中會看到 Widget TopWidget Bottom,分別代表 Widget 的上半部與下半部。

先進入 Widget Top,點選「設計」,這裡以 Hero 版面為例。選擇 Hero 後切換到「內容」,其中 ImageTitle 是必填欄位。Image 是顯示在 Widget 右側的圖片,數值類型選擇「應用程式素材」,接著點選素材金鑰下方的圖片圖示,按下「新增素材」並上傳想使用的圖片。

Title 則是顯示在 Widget 左側的主要文字。顯示類型選擇「文字」,數值類型選擇「自訂字串」,再輸入想呈現的內容。Widget Editor 右側會即時顯示預覽,可以一邊修改、一邊確認效果。除了 Image 和 Title,也可以設定 Subtitle 1Subtitle 2Subtitle 3,用來補充身份、職稱、狀態或其他簡短資訊。

接著進入 Widget Bottom,在「設計」中選擇 Collection。Collection 包含 Item 1 到 Item 4,四個項目都必須完成設定。以 Item 1 為例,Image 選擇應用程式素材並上傳圖片,Name 選擇自訂字串,例如輸入 YouTube,Description 則可以填入帳號或相關資訊,例如 @leowu-love

其他 Item 也可以使用相同步驟,放入個人網站、GitHub、Discord 社群、Instagram、Steam、目前遊玩的遊戲或個人作品。全部設定完成後,先按下「儲存變更」,確認內容無誤後再按「發布」。


4. 設定 OAuth2 授權#

若要讓 Widget 顯示使用者專屬資料,使用者必須授權你的應用程式更新他們的 Widget。進入 Application 左側的 OAuth2 頁面,在 Redirects 中新增一組 Redirect URI。你可以填入自己的網站;若只是測試,也可以使用 Discord 首頁。

接著往下找到 OAuth2 URL Generator,勾選 openidsdk.social_layer,選擇剛才新增的 Redirect URI,並複製系統產生的 OAuth2 URL。

產生的網址通常會包含:

response_type=code

將它修改成:

response_type=token

修改完成後,在瀏覽器中開啟網址並完成授權。若授權頁面出現 invalid scopes 錯誤,通常代表前面的 Social SDK 表單尚未成功提交,或你的 Application 尚未取得相關功能權限。


5. 傳送 Widget 資料#

若這個 Widget 只是製作給自己使用,而不是提供給其他使用者使用,這個步驟非常重要。若沒有建立 Application Identity,Widget 可能只會顯示:

Your game stats are still syncing. Keep playing!

也就是「你的遊戲數據仍在同步中,請繼續遊玩」,而不會呈現實際資料,其他使用者也可能看不到你的 Widget。

首先打開 Discord,進入「使用者設定 → 已授權的應用程式」,找到剛才建立的 Application,確認它具有存取個人資料、更新活動狀態與管理相關社交資料的權限。若沒有看到這些權限,請重新執行一次 OAuth2 授權流程。

接著回到 Discord Developer Portal,進入 Application 的 Bot 頁面。若尚未建立 Bot,先新增一個 Bot,再按下「Reset Token」產生新的 Bot Token,並將它複製下來。Bot Token 等同於機器人的登入密碼,請勿將它放進影片畫面、文章截圖、GitHub 或公開聊天室中。若不小心洩漏,請立即重新產生 Token。

接著從 Widget Editor 中複製範例 JSON,並在最外層加入 username 欄位:

JSON.stringify({
username: "your_username",
data: {
dynamic: [
{
type: 1,
name: "display_name",
value: "Your Name"
}
]
}
});

將這段程式貼進瀏覽器 Console 並執行,Console 會輸出一段已經轉換完成的 JSON 字串,將它完整複製下來。

接著打開 Windows PowerShell,執行以下指令:

Terminal window
Invoke-RestMethod `
-Uri https://discord.com/api/v9/applications/{appId}/users/{userId}/identities/0/profile `
-Method PATCH `
-Headers @{
"Content-Type"="application/json";
"Authorization"="Bot {botToken}";
"User-Agent"="DiscordBot (https://github.com/discord/discord-api-docs, 1.0.0)"
} `
-Body '{jsonString}'

你需要將 {appId} 替換成 Discord Application ID、{userId} 替換成你的 Discord User ID、{botToken} 替換成剛才取得的 Bot Token,並將 {jsonString} 替換成 JSON.stringify() 產生的 JSON 字串。

Application ID 可以在 Discord Developer Portal 中開啟你的應用程式,接著前往左側的「概要」→「一般資訊」頁面找到。Discord User ID 則需要先在 Discord 設定中開啟「開發者模式」,再對自己的帳號按右鍵,選擇「複製使用者 ID」。若 PowerShell 指令執行完成且沒有出現錯誤訊息,就代表 Widget 資料已成功傳送。


6. 將 Widget 加入個人檔案#

完成資料傳送後,回到 Discord,進入「使用者設定 → 個人資料 → 編輯個人資料」。在右側的個人檔案預覽區域找到「新增小工具」,點選後選擇剛才建立並發布的 Widget,完成後就會顯示在你的 Discord 個人檔案上。

若沒有看到 Widget,可以確認 Widget 是否已發布、OAuth2 是否授權成功、Bot 是否至少成功傳送過一次資料,以及 Application Identity API 是否有回傳錯誤。此外,也可以檢查 Widget Renderer 實驗功能是否已開啟,或重新啟動 Discord 用戶端。


總結#

Discord Widget 雖然目前仍是實驗功能,設定流程也比一般 Discord 功能複雜,但它提供了很高的客製化空間。你可以把它做成社群名片、個人作品牆、遊戲數據卡、健身紀錄,甚至串接 API 顯示即時資訊。

這篇教學只是提供一個基本範例,更重要的是根據自己的興趣與需求,設計出真正屬於自己的 Discord Widget。使用這項功能時也請保持節制,不要冒充 Discord 官方人員、發布誤導內容或大量濫用 API。功能仍處於測試階段,一旦遭到濫用,Discord 隨時可能限制甚至收回它。

若這篇教學對你有幫助,歡迎按讚並分享給需要的人。過程中若有任何步驟看不懂,也可以在下方留言,我會盡量回覆每一個問題,也歡迎分享你製作完成的 Widget。

🧩 打造專屬 Discord 個人檔案小工具
https://www.leowu.love/posts/discord-profile-widget-tutorial/
作者
Leo 理央
發布於
2026-08-02
許可協議
CC BY-NC-SA 4.0
分享

如果這篇文章對你有幫助,歡迎分享給更多人!

參與討論
使用 Twikoo 參與討論