So I'm trying to make a working React app into a Twitch Extension (I don't need any twitch integration).
The only thing to make it work with Twitch's iframes is add a tag in the html file
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
And another call of javascript code on startup that uses stuff from that twitch-ext.min.js file
window.Twitch.ext.onAuthorized(function(auth) {
console.log('The JWT that will be passed to the EBS is', auth.token);
console.log('The channel ID is', auth.channelId);
});
What im currently doing is running npm build then manually editing the generated index.html and main.xxxxx.js to include those lines of code in the optimized minified files. This obviously seems a bit inefficient and I feel like there must be a way to tell node that during build it should include these lines. So is what I'm asking possible?
So I got an answer from someone who knew about Node. What you do is edit the index.html and index.js file that your react app should have.
The npm run build actually uses those 2 files to generate the minified built files so I just added
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
to index.htmla and my
window.Twitch.ext.onAuthorized()
call in the index.js file and it all worked.
You can find index.html in the public folder of your react project if you used npx create-react-app. And index.js is in the src folder.