Create a Chrome Extension with TypeScript React and Webpack

hey everyone welcome to Wi code in this video I'm going to show you how to create a Chrome extension with using typescript and react and we're going to make that possible by using webpack and so before we start let me show you what we're going to be building so this here is a simple Chrome extension where the icon is right here if you click it it opens up this popup which is all written in react and typescript code and what it does is it has a gif of a dog and if you click on generate dog GIF it'll append it onto whatever website you're on but so this is what you're going to learn how to build in this video using react and typescript so once again this whole thing here is written in react or TSX code but yeah enjoy the video so let's start creating this extension and to begin let's just create a source folder this will hold all our source code and now at the top level of the source folder let's add an index HTML file this HTML file will house our react application which will be our extension popup now let's create three different folders inside the source folder so we have our back background to hold our background scripts we have content to hold our content scripts and react to hold our react application and now inside our background and content folders let's create an index.ts file and inside our react folder let's create index. TSX file which will hold our J or TSX typescript code now inside our react folder let's also add a components directory to hold our react components and inside the components folder let's create an app. TSX and now that we've got all this done let's initialize our project as an es6 mpm project with mpm in it es6 Dy what this does is create packs. Json file with the type set to module so we can use import syntax and now finally let's create a manifest.json file and create this at the top level and this of course is to provide the required information about our extension but now let's turn our project into a typescript project so first let's install typescript from mpm typescript is simply an mpm package so we can do mpmi typescript script just like this and now let's initialize this project as a typescript project by running the command MPX TSC D- in it and what this does is create a TS config.js file like this here and fills it with some default values and we will be using this TSC config.js file for typechecking and d. TS file generation we'll use webpack and Babel for the actual transpilation process to do this set we'll set the key jsx so uncommon this and we'll set this to react jsx and this key jsx basically specifies what jsx code is generated and we want react jsx next let's set declaration under here we'll set declaration to be true and this declaration key tells the types typescript to generate type files or D.S files from typescript and JavaScript files then let's also uncomment emit declaration only and this this tells typescript to the typescript compiler to only emit DTS files and not JavaScript files and finally let's also do isolated modules set this to true and this basically ensures that each typescript file can be transpiled without relying on other Imports and this setup is is once again how we can make sure that this TSC config.js file is used for typechecking and type declaration file generation but not actual transpilation which is what webpack and Babel will do which we'll see later on and let's also include at the top level of here this configuration file include and exclude so include what this does is specifies an array of file names or patterns to include in the program so we're telling type the typescript probably to look at everything inside the source directory and it's children directories and exclude specifies an array of file names or patterns that should be skipped when resolving include and so when resolving this and we don't want to include any node modules or distribution folders now let's focus on creating the react application and and our scripts so background script and content script and we're going to do all of this with webpack so first let's create a webpack configuration file at the top level called Web pack.on fig. CJs because we're going to use commonjs module exports in here but now to get webpack working we need to install a few libraries and these are webpack itself and webpack CLI and we'll install these as development dependencies but so what webpack will do is it will transpile our TSX and typescript code into JavaScript that the browser understands however for webpack to do this we need to install a loader for webpack called Babble loader like this and also some other Babble dependencies so install these and I'll show you inside package.json so we have Babel loader Babel preset typescript preset react and preset EnV and so real quick a loader is a function that webpack passes code through to perform some sort of transformation the babble loader is a webpack loader the transpiles JavaScript code so this here transpiles JavaScript code Babel presets are used to configure the Babel transpiler so these essentially are used to configure this for example we have Babel preset react which adds support for jsx code and the Babel typescript preset which adds support for typescript and now we also want to install a few or a couple plugins for webpack called HTML webpack plugin and copy webpack plugin and we'll install these as development dependencies as well I forgot to add a mpmi so these are now here HTML webpack plugin copy webpack plugin and so a webpack plugin interacts with the webpack life cycle and the HTML webpack plugin creates an HTML file to place our J bundle JavaScript code and the copy webpack plugin is used to copy individual files or directories into the build folder that webpack creates but now that we have the required libraries let's configure webpack with our configuration file so I'm going to paste in some code here and I'm actually going to change this this is ecma script right now let's change it to B commonjs sweet so this is basically this file here is what will basically be the brains behind this whole program but essentially what this configuration file will do is create three different out output files one's going to be called contents script.js one's going to be called background.js and one will be called react.js and this is determined from this output key where we set the file name to be substitution namejs where the name will be these Keys here and these will all be placed inside a folder called dist let me actually add directory name here and now we also tell webpack here to copy over our manifest.json file into this distribution folder so pattern we're saying from manifest Json copy it to distribution folder and this is because this file this manifest.json file is required for working with Chrome extensions we also tell webpack to pass all typescript and TSX files through the babble loader this here to convert it into code that the browser understands so pass it through the babble loader using these configurations or presets also note that this order here is important basically first we want to turn TSX and TS into jsx and JS then we want to turn jsx code into JavaScript the browser understands essentially and we also set at the very top Target to web because we're going to be working in the browser and the mode to production and of course in a real world SC scenario you'd want to do a configuration for production and development but for this we're just going to stick with having the mode set to production but now to get the benefits of typescript let's start installing some typings so what these are is we need to install mpm packages from the at types scope and these packages contain typescript declaration files or types that end with a DOT or files that end with a D.S extension and the one that we want to install because we're building a Chrome extension is at types- Chrome and install this as a development dependency right here so the this package here at types. Chrome provides typescript type information for working with chrome and let's also install some typings now for react and also react Dom so this provides typing information for working with react and working with react Dom so now we have our typings let's work on configuring our manifest.json file so this right here so every Chrome extension requires a manifest.json file in its root directory and this file contains information such as the name of the extension um so let me actually put some in here some code in here so it has things like the name of the extension the uh location of the popup which is index.html permissions that the extension has such as certain URLs that can access ACC and things like this so here what we do is we give the location of our popup to be index.html we tell the background we specify the in the location of our background script to be background.js and our content script to be content script.js we also give the content script the permission to run on every single URL we give our extension a name um a description version and we also specify the the version of this file which is version three which I believe is the most up todate one and note that the location of all these files so content script background and xhtml will be inside our disc folder that weback creates so it'll be what's created from all these entry points but now we've got that sorted let's create our react application so to do that let's first install react and react Dom and now let's create inside our source directory inside react in this index. TSX file let's render our react application inside a div component and now let's fill in our our HTML file that contains the S component so we create a root um you can see we're using typescript with as HTML element and then we render this app component into that rout and what that will be is this div here and below this we also see our source file our react.js source file which contains our react code this react.js file is what webpack will create inside our final disc folder and now let's create the app component inside app. TSX and for that I'm just going to copy some code so let's open up app. TSX which will be our app component and this is all that's going to be to it so this application contains a button that when clicked basically generates a gif which is this here this this dog GIF that I found online and then what it does is it gets the active tab using the Chrome tabs API and then sends a message to this tab containing the source and now let's let's handle this by creating our content script so let's go into content and inside here let's make it alter the current tab by appending the message sent from the react application which is our GIF so now our content script is listening out for messages and when it gets one it's going to create an image tag set the source to be the message and then append it to the document body that message of course being our dog URL Source now basically our application is built so let's just create a simple mpm build script to build our application with webpack so inside package.json under scripts here we're just going to call webpack config and build it the application using our configuration that we made except this will be CJs so now if we run mpm rum build so say we run mpm rum build like this what we get outputed is this distribution folder and in here we have our background script which is empty our content script um our index HTML our manifest.json and our react code and you can see how all of this has been minified actually because we have the mode set to production inside webpack but anyway now what we can do with this distribution folder is we can upload it to the Chrome extensions to see it so all we have to do to do that is go here do Chrome D- extensions and it'll load it up and let me turn off this one and now go to load unpacked here so the top left go to wherever this application is which for me is here and then upload the disc folder so this one here select and I believe it's this one here and we can check by let's reload it and now inside let's go to example.com let's check our extensions it's this one here create a Chrome extension we pin it let's open it up here's this dog GIF right here and if we click generate you can see it appends it to whatever page you're on so pretty cool GIF but or pretty cool Chrome extension um and of course because we have our permission set to any URL you can go to my blog website for example you can generate the gift here I think it'll probably be at the very bottom and yep there it is and now one final thing is I mentioned in here let me close out a lot of these I mentioned how RTS config file here is used for type checking and also type file or Declaration file generation we can create a script to do the type file generation inside scripts and to do this all we would need to do is run npx TSC and what this will do is it will build our project using this TSC config.js configuration so now if we run this here say mpm run types it'll use this TS config.js file to produce type files so we can see we have a type file there's nothing inside these but because we don't have any typings but you can see how we have type files generated for each of our typescript files so the only one I think we actually have it for is our app component where we're actually exporting but anyway this is my video on how to create a Chrome extension using typescript webpack and react if you have any questions leave them in the comments and I'll try and get back to you but besides that I want to thank you for liking and subscribing today and I hope to see you in the next one have a good one

Channel: WittCode

Views: 783

Keywords: WittCode, wittcode, create a chrome extension with typescript, create a chrome extension with react, create a chrome extension with react and typescript, chrome extension react, chrome extension typescript

Id: 8yOUPcuwZbc

Length: 14min 13sec (853 seconds)

Published: Mon Nov 20 2023