{"id":38386837,"url":"https://github.com/twitchdev/extensions-hello-world","last_synced_at":"2026-01-17T03:44:01.838Z","repository":{"id":30869797,"uuid":"125903080","full_name":"twitchdev/extensions-hello-world","owner":"twitchdev","description":"The Simplest Extension in the (Hello) World","archived":false,"fork":false,"pushed_at":"2022-12-22T08:33:10.000Z","size":111,"stargazers_count":176,"open_issues_count":13,"forks_count":86,"subscribers_count":24,"default_branch":"main","last_synced_at":"2024-05-27T22:31:43.797Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twitchdev.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-19T18:30:18.000Z","updated_at":"2024-02-16T19:57:39.000Z","dependencies_parsed_at":"2023-01-14T18:00:53.882Z","dependency_job_id":null,"html_url":"https://github.com/twitchdev/extensions-hello-world","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/twitchdev/extensions-hello-world","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twitchdev%2Fextensions-hello-world","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twitchdev%2Fextensions-hello-world/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twitchdev%2Fextensions-hello-world/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twitchdev%2Fextensions-hello-world/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twitchdev","download_url":"https://codeload.github.com/twitchdev/extensions-hello-world/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twitchdev%2Fextensions-hello-world/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28493641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T02:39:23.645Z","status":"ssl_error","status_checked_at":"2026-01-17T02:34:19.649Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-17T03:44:01.777Z","updated_at":"2026-01-17T03:44:01.825Z","avatar_url":"https://github.com/twitchdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eExtensions-Hello-World\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n    \u003ch1 id=\"extensions-hello-world\"\u003eExtensions-Hello-World\u003c/h1\u003e\n\u003cp\u003eThe Simplest Extension in the (Hello) World.\u003c/p\u003e\n\u003ch2 id=\"motivation\"\u003eMotivation\u003c/h2\u003e\n\u003cp\u003eThe Hello World sample is designed to get you started building a Twitch Extension quickly. It contains all the key parts of a functioning Extension and can be immediately run in the \u003ca href=\"https://github.com/twitchdev/developer-rig\"\u003eDeveloper Rig\u003c/a\u003e.  For a fast guide to get started, visit the Developer Rig documentation.\u003c/p\u003e\n\u003ch2 id=\"whats-in-the-sample\"\u003eWhat's in the Sample\u003c/h2\u003e\n\u003cp\u003eThe Hello World Extension provides a simple scenario that demonstrates the end-to-end flow of an Extension. On the frontend, a user clicks a button that can change the color of a circle. Instead of changing the CSS locally, it calls its Extension Backend Service (EBS) to update the color of the circle. That message is then sent via Twitch PubSub to update all clients listening to the PubSub topic.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eThe sample is broken into two main components:\u003c/strong\u003e\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eThe Frontend of the Extension, comprised of HTML files for the different extension views and corresponding Javascript files and CSS. The frontend has the following functionality:\n\u003cul\u003e\n\u003cli\u003eA button and script that makes a POST call to the EBS to request a color change for the circle\u003c/li\u003e\n\u003cli\u003eA GET call when the Extension is initialized to change the circle to the current color stored on the EBS\u003c/li\u003e\n\u003cli\u003eA listener to Twitch PubSub, that receives color change updates and then updates the circle color\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eA lightweight EBS that performs the following functionality:\n\u003cul\u003e\n\u003cli\u003eSpins up a simple HTTPS server with a POST handler for changing color\u003c/li\u003e\n\u003cli\u003eValidates an Extension JWT\u003c/li\u003e\n\u003cli\u003eSends a new color message via Twitch PubSub for a specific channel\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"using-the-sample\"\u003eUsing the Sample\u003c/h2\u003e\n\u003cp\u003eThe recommended path to using this sample is with the \u003ca href=\"https://github.com/twitchdev/developer-rig\"\u003eDeveloper Rig\u003c/a\u003e.  Use the Developer Rig's \u003ccode\u003eextension-init\u003c/code\u003e command to clone this repository.\u003c/p\u003e\n\u003cp\u003eThe Developer Rig is able to host the frontend Hello World files, but the EBS must be run and hosted separately.\u003c/p\u003e\n\u003ch3 id=\"setting-up-your-backend-certificates\"\u003eSetting Up Your Backend Certificates\u003c/h3\u003e\n\u003cp\u003eTwitch Extensions require SSL (TLS).\u003c/p\u003e\n\u003cp\u003eIf you're using the Developer Rig and used it to create this extension, it will have already configured the certificates.  Otherwise, you'll need to set up a certificate for local development.  This will generate a new certificate (\u003ccode\u003eserver.crt\u003c/code\u003e and \u003ccode\u003eserver.key\u003c/code\u003e) for you and place it in the \u003ccode\u003econf/\u003c/code\u003e directory. This certificate is different from the one used for the Developer Rig.\u003c/p\u003e\n\u003ch4 id=\"on-macos\"\u003eOn MacOS\u003c/h4\u003e\n\u003cp\u003eNavigate to the root of the Hello World extension folder and run \u003ccode\u003enpm install\u003c/code\u003e and then \u003ccode\u003enpm run cert\u003c/code\u003e\u003c/p\u003e\n\u003ch4 id=\"on-windows\"\u003eOn Windows\u003c/h4\u003e\n\u003cp\u003eRun the following commands to generate the necessary certificates for your Hello World backend\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003ccode\u003enode scripts/ssl.js\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003emkdir ../my-extension/conf\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003emv ssl/selfsigned.crt ../my-extension/conf/server.crt\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003emv ssl/selfsigned.key ../my-extension/conf/server.key\u003c/code\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"running-hello-world\"\u003eRunning Hello World\u003c/h3\u003e\n\u003cp\u003eIf you're using the Developer Rig, it has buttons in its UI to perform the following actions.\u003c/p\u003e\n\u003cp\u003eTo run the EBS, run \u003ccode\u003enode services/backend\u003c/code\u003e, with the following command line arguments: \u003ccode\u003e-c \u0026lt;client id\u0026gt;\u003c/code\u003e, \u003ccode\u003e-s \u0026lt;secret\u0026gt;\u003c/code\u003e, \u003ccode\u003e-o \u0026lt;owner id\u0026gt;\u003c/code\u003e.\u003c/p\u003e\n\u003cp\u003eThis provides the EBS with your Extension client ID, Extension secret and the user ID of the Extension owner (likely you). These are necessary to validate calls to your EBS and make calls to Twitch services such as PubSub.\u003c/p\u003e\n\u003cp\u003eIf you do not want to pass in command line arguments, you can also directly set the following environment variables: \u003ccode\u003eEXT_SECRET\u003c/code\u003e, \u003ccode\u003eEXT_CLIENT_ID\u003c/code\u003e, \u003ccode\u003eEXT_OWNER_ID\u003c/code\u003e in your code.\u003c/p\u003e\n\u003cp\u003eYou can get your client ID and secret from your \u003ca href=\"https://dev.twitch.tv/dashboard/extensions\"\u003eExtension Dashboard\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eTo get the owner ID, you will need to execute a simple CURL command against the Twitch \u003ccode\u003e/users\u003c/code\u003e endpoint. You'll need your extension client ID as part of the query (this will be made consistent with the Developer Rig shortly, by using \u003cem\u003eowner name\u003c/em\u003e).\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-bash\"\u003ecurl -H \u0026quot;Client-ID: \u0026lt;client id\u0026gt;\u0026quot; -X GET \u0026quot;https://api.twitch.tv/helix/users?login=\u0026lt;owner name\u0026gt;\u0026quot;\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e\u003cstrong\u003eNote -\u003c/strong\u003e If you haven't yet created an extension, you can start that process \u003ca href=\"https://dev.twitch.tv/extensions\"\u003ehere\u003c/a\u003e.\u003c/p\u003e\n\n\n\u003c/body\u003e\n\u003c/html\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwitchdev%2Fextensions-hello-world","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwitchdev%2Fextensions-hello-world","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwitchdev%2Fextensions-hello-world/lists"}