Creating a chrome extension in Next JS and React

Рет қаралды 7,727

9 ай бұрын

In this video , we will create a google chrome extension in Next JS and React.
Learn how it differs from a regular web page and how to configure it.
Docs - developer.chrome.com/docs/ext...
Manifest docs -developer.chrome.com/docs/ext...

Пікірлер: 46

@younus23 7 ай бұрын

Along with @ValorantRNG's comment on changing the build command on Mac, i had to tweak it a little as of most recent next js (14.0.4) and change ./extension/ ./out/ to extension/ out/. "build": "next build && mv out/_next out/next && rsync -a --exclude='.*' extension/ out/" and I also had to add output: 'export' to my next.config.js file since next export is no longer used: const nextConfig = { output: 'export' }

@hasannee 2 ай бұрын

and how to make css styling using tailwind css work?

@varunkapoor662 2 ай бұрын

00:01 Creating a browser extension in React and NextJS 01:42 Service workers and content scripts add extra functionality to the extension 03:18 Creating a Chrome extension in Next JS and React with manifest file 04:59 Adding important parameters to the Chrome extension 06:52 Creating a custom build command in NextJS for the default popup 08:22 Next JS build commands explained 10:06 Loading the extension in the browser 11:44 To update the extension, make changes, run command, and refresh browser. nice explanation

@ValorantRNG 9 ай бұрын

For MacOS use this build command "next build && mv out/_next out/next && rsync -a --exclude='.*' ./extension/ ./out/"

@theOrdinaryDev 9 ай бұрын

I forgot one thing - In plain react dont create a extension folder to add manifest.json. Just create the manifest file directly in the root of your project :)

@S--xc4rv 5 ай бұрын

placing it in the root diretory doesnt work so put it in the public folder it will work

@Karthik-kt24 3 ай бұрын

great explanation thank you 🙏

@doronsvable Ай бұрын

Thanks! Great explenations

@johnpeterson5420 4 ай бұрын

great explanation good job

@ThibautLefebvre 5 ай бұрын

Nice video!!

@berealora9271 6 ай бұрын

So good, it was like I was explaining it to myself

@klarWorks 7 ай бұрын

Thanks you 🙏

@ThaoHa-hs6zj 4 ай бұрын

How to display in side panel instead of showing popup interface when clicking icon?

@annielin5993 7 ай бұрын

Hi, thank you for sharing this. I would like to know how to make my extension app accessible to others. Thanks for answering!

@theOrdinaryDev 7 ай бұрын

You can publish your extension on the chrome web store. Take a look at this - developer.chrome.com/docs/webstore/publish

@goldenboy3627 5 ай бұрын

if you can make a tutorial of automating clicking element selectors while the user is opening another tab while its performing the actions in the background with no interruptions would be very helpful i would even subscribe.

@theOrdinaryDev 5 ай бұрын

It's not exactly what u want but check out the content scripts video on my channel. You can use those to get what you want :)

@anirudhjoshi202 4 ай бұрын

Hi , so every time we need to run build to check the changes , is there any way we can. setup hot reload , or can you tell any other way I can check UI dynamically

@theOrdinaryDev 4 ай бұрын

You can run it as a normal next app and test it in your browser. When you are satisfied do a build and continue

@binubaiju6872 3 ай бұрын

"Error: Cannot load extension with file or directory name _next. Filenames starting with "_" are reserved for use by the system." Could not load manifest.when i run npm run build.i got the out folder and ,it has _next folder. i dont why it came like that. command: "build": "next build && next export && move out/_next out/next && robocopy ./extension ./out /E",

@YTSylantys Ай бұрын

you only have to use this command if your building on nextjs not react

@DaveyonMayne-ok 5 ай бұрын

NextJS is for apps that needs SSR, why would you use it for a browser ext?

@theOrdinaryDev 5 ай бұрын

While that is true, create-next-app is the default way of getting started with React now. So it's not just about SSR, but the whole frontend is also a part of it

@_unclejames_ 19 күн бұрын

in addition to @ValorantRNG’s comment on changing the build command for Mac, it also works with Linux too

@mrallenchuang 4 ай бұрын

is useState supported? I find myself unable to switch views using nextjs on the chrome extension

@theOrdinaryDev 4 ай бұрын

Type "use client" on top of the file and you will be able to use react hooks

@fakhrulislamfuad8072 8 ай бұрын

bro I'm getting an error: > Server Actions are not supported with static export.

@theOrdinaryDev 8 ай бұрын

Make sure you don't have any method that runs on the server side, since you are exporting to a static HTML file

@fakhrulislamfuad8072 8 ай бұрын

@@theOrdinaryDevbut bro.. I need to keep those server actions. Is there any other way??

@theOrdinaryDev 8 ай бұрын

What kind of server actions are you using ? If you want to do simple fetch calls you need to use service workers to do that for you. Then you can relay the data from the service worker to your js file. Please check my latest video on service workers and content scripts to know more :)

@fakhrulislamfuad8072 8 ай бұрын

@@theOrdinaryDevthank you so much bro..

@zeecoding 4 ай бұрын

Great, but you not explained & displayed the changes you made in next.config.js

@theOrdinaryDev 4 ай бұрын

Sorry I don't understand. Which changes ?

@zeecoding 4 ай бұрын

@@theOrdinaryDev Have you made any changes in next.config.js?

@mohitdino5014 10 күн бұрын

how we can remove these errors

@mohitdino5014 10 күн бұрын

which is show in manage extension tab

@quan8361 6 ай бұрын

how about background.js and content.js file

@theOrdinaryDev 6 ай бұрын

You can watch that video on my channel :) Its in a separate video

@itsmeharfatma 3 ай бұрын

Dude, this approach didn't worked.

@tanakpek6270 4 ай бұрын

very harmful code. robocopy is an unmaintained dependency using specific versions of lodash that have code injection vulnerabilities.

@theOrdinaryDev 4 ай бұрын

We are just using it externally to copy files. It's not a part of the extension codebase. I think you will be fine but thanks for pointing that out :)

@sdexstarlord 3 ай бұрын

Hello bro, tailwind is not compiled, how can i do that

@raj9791 9 ай бұрын

Getting error, Shows - next build && next export && move out/_next out/next && robocopy ./extension ./out /E unhandledRejection ReferenceError: Headers is not defined

@theOrdinaryDev 9 ай бұрын

Hi, what platform are you using ?