{"id":13500644,"url":"https://github.com/instafluff/TwitchComfyKit","last_synced_at":"2025-03-29T07:31:17.707Z","repository":{"id":34038670,"uuid":"156594785","full_name":"instafluff/TwitchComfyKit","owner":"instafluff","description":"Build a Twitch Extension in 3 steps with the Comfiest Starter Kit!","archived":false,"fork":false,"pushed_at":"2022-12-08T06:47:12.000Z","size":348,"stargazers_count":27,"open_issues_count":5,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T15:43:22.064Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/instafluff.png","metadata":{"files":{"readme":"README.md","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-11-07T19:03:34.000Z","updated_at":"2025-03-08T10:23:32.000Z","dependencies_parsed_at":"2023-01-15T04:07:49.223Z","dependency_job_id":null,"html_url":"https://github.com/instafluff/TwitchComfyKit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instafluff%2FTwitchComfyKit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instafluff%2FTwitchComfyKit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instafluff%2FTwitchComfyKit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instafluff%2FTwitchComfyKit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/instafluff","download_url":"https://codeload.github.com/instafluff/TwitchComfyKit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246155992,"owners_count":20732355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-07-31T22:01:08.274Z","updated_at":"2025-03-29T07:31:17.137Z","avatar_url":"https://github.com/instafluff.png","language":"JavaScript","funding_links":["https://github.com/sponsors/instafluff"],"categories":["JavaScript"],"sub_categories":[],"readme":"# TwitchComfyKit\nWe built this Twitch Extensions Starter Kit live on Twitch!\n\n### Quickstart With Dev Rig ###\n1. Download **comfykit.zip** from the `download_this` folder in this repository and extract into your project's folder\n2. Add **comfykit.js** and replace the link to JQuery to the Twitch extension URL in your `panel.html` (or `video_component.html` or `video_overlay.html`) and `config.html` in the `public` folder like this:\n```javascript\n\u003cscript src=\"jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"comfykit.js\"\u003e\u003c/script\u003e\n```\n3. Run `npm install archiver`\n4. Edit **viewer.js** (and **config.js** for configuration) for your Extension-related functionality and see it work in the Dev Rig's **Extension Views** tab\n5. When you're ready to publish, run `npm run package` to zip and upload to the Developer Dashboard\n6. You made a Twitch Extension!\n\n### Quickstart Without Dev Rig ###\n1. Download this repository `git clone https://github.com/instafluff/TwitchComfyKit.git`\n2. Run `npm install`\n3. Edit **comfykit.js** for Extension-related functionality (**public** contains the starter Extension files)\n4. Run `npm run package` to zip and upload to the Developer Dashboard\n5. You made a Twitch Extension!\n\n\n## Instafluff ##\n\u003e *Like these projects? The best way to support my open-source projects is by becoming a Comfy Sponsor on GitHub!*\n\n\u003e https://github.com/sponsors/instafluff\n\n\u003e *Come and hang out with us at the Comfiest Corner on Twitch!*\n\n\u003e https://twitch.tv/instafluff\n\n## Credits ##\nThank you too all the participants of this project!\n\n**Instafluff, Instafriend, katori15, RIKACHET, MacabreMan2, zivivi1, Patchshifter, That_MS_Gamer, Kyoslilmonster, Pixelgourmet, trufflette, mrkinix, villainthegreat, Deitypotato, MalForTheWin, momoske364, NinjaFalcon_2, nallaj, ElysiaGriffin, Abbyfabby, AntiViGames, al1sa074, UnconventionalBeing, lizardqueen, bloom_molly, rdmusser, Flippo13, bobthebuilderrrrr1, TotallyTerribleTaters, DEAD_P1XL, Chlapicek99, ravavyr, whistikk, thoastyk, HonestDanGames, MerlinLeWizard, VoiceOfGrog, Eragoth186, sciondragons, etisdew, Outfr0st, Chibigirl24, WhizardXL, Kr1999, mallesbixie, ultimation1, TheHungerService, Replemish, DevMerlin, pipskidoodle, Lord_of_Conquest, oto_9717, sheets2004, TheGeekGeneration, ConradReuter, MrRayKoma, Pearcington, LuckyPheathers, Betha, OhScee, koukris, BountyHunterLani, smellycats94, kingswerv, Teaky, Hugginator, SomaPills, PokemoHero, smilesandcode, DorkzillaI, MoltenSnowman, ERZ_TCat, valrossenOliver, Yosravi, Clarkio, clauzzzz, mrbinary001, chrishcode, Thedudeskee, DavidTheNewKid, malfunct, FuriousFur, DrArtemi, sparky_pugwash, anon_viewer, 土井津仁, UrbanNights, Riptidesan, zment, computernerd87, DoctorArgus, kpopsim, Nbmatt, codeheir, KevinTheUnicorn8, florants, quackman3, HeapSpray, thewrecker1080p, Kara_Kim, HunWalk, clubhouse13, JoeShimHae**\n\nThanks to everyone that helped add the Usernames to Twitch IDs functionality as a utility!\n\n**Instafriend, Instafluff, ChatTranslator, Monkeyshoe10, Chibigirl24, BeadHappy, MacabreMan2, koralina_211, PaintHappy, stresstest, QeraiX, isaischannel, losthewar, zivivi1, MisakaGUN, DevMerlin, jellydance, OhScee, LuRiMer313, That_MS_Gamer, bloom_molly, knugensugen, trufflette, PokemoHero, sparky_pugwash, raleenakaos, brandan_f, igotinfected, ItsNaomiArt, Algoll, Rlchibi, EyeTeeGirl93, Kushimitama, malfunct, i4_insert_mode, blakeparsons12, smilesandcode, BungalowGlow, qerwtr546, fjaueiwgfbueawhnfa, FuriousFur, foxotic, DrJavaSaurus, kukji232, VoiceOfGrog, CrimsonKnightZero, cubbieblue4life, earnedplaces, mrkinix, MartyTheeMartian, kingswerv, Kyoslilmonster, GarethHubball, foobarius1, Zoraketh, CodeAndSystemSecurity, TheGrumpyGameDev, essenbee, Nordegraf, Keifleaf, gdphantom9867, Ayybiel, nallaj, NULLYUKI, KitAnnLIVE, DEAD_P1XL**\n\n## Instructions ##\n\n### Getting Started ###\n1. Install NodeJS - [https://nodejs.org/en/](https://nodejs.org/en/)\n2. Open the directory in a Command Prompt/Terminal\n3. Install Dependencies: `npm install`\n4. Create a file named `.env` that looks like this:\n```javascript\nPORT=8000 # You can change this to any port you wish\n```\n5. Run Server: `npm start`\n6. View the extension from your web browser! [Panel: http://localhost:8000/panel.html](http://localhost:8000) [Video Component: http://localhost:8000/video_component.html](http://localhost:8000/video_component.html)\n7. Look at **comfykit.js** for how to get started with Twitch Extension functionality!\n\n### Extension Prototyping ###\nThe easiest way to setup the elements and layout of your extension is via Twitch's Sandbox and then Download the code.\n1. Visually setup your extension via Sandbox: [https://glass.twitch.tv/extensions/sandbox](https://glass.twitch.tv/extensions/sandbox)\n2. Remove all starter code inside **viewer.js**\n3. Download the code\n4. Extract the zip into the **public** folder (overwrite the existing files)\n5. Add **comfykit.js** and replace the link to JQuery in your panel or video component to the Twitch extension URL like this:\n```javascript\n\u003cscript src=\"jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"comfykit.js\"\u003e\u003c/script\u003e\n```\n6. Look at **comfykit.js** for how to get started with Twitch Extension functionality!\n\n### Uploading to the Twitch Developer Dashboard ###\nTo package your Extension project, simply run `npm run package` from the Command Prompt/Terminal and it will zip all files in the **public** folder into a file called **uploadthis.zip**. Each time you update your extension, you can package your code using this command.\nTo upload to Twitch:\n1. Create the Twitch Extension project in the Dashboard: [https://dev.twitch.tv/dashboard](https://dev.twitch.tv/dashboard)\n2. Go to the Version tab and click Manage, then go to Version Assets\n3. Choose File and select the **uploadthis.zip** file and click Upload Assets\n4. Finally in Version Status, click Move to Hosted Test to make your Extension available in your Twitch Channel Dashboard (https://www.twitch.tv/[YOUR_USERNAME]/dashboard/extensions). You can install and add your uploaded Extension the same way you would add other extensions from this Dashboard page.\n\n## Twitch Extension FAQ ##\nHow to Use Extensions Guide: [https://help.twitch.tv/customer/portal/articles/2861187-how-to-use-extensions](https://help.twitch.tv/customer/portal/articles/2861187-how-to-use-extensions)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstafluff%2FTwitchComfyKit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finstafluff%2FTwitchComfyKit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstafluff%2FTwitchComfyKit/lists"}