11.4: Chrome Extensions: Background Scripts - Programming with Text

Подписаться 1,7 млн

Просмотров 157 тыс.

50% 1

In this video, I discuss "background scripts" for chrome extensions. The background script (or "background page") contains JavaScript code that runs upon Chrome launch and listens to global browser events (like using the menu, address bar, chrome extension buttons, etc.)
Coding Challenge on Chrome Extensions: • Coding Challenge #82: ...
Chrome Extensions playlist: • Session 11: Chrome Ext...
Support this channel on Patreon: / codingtrain
To buy Coding Train merchandise: www.designbyhumans.com/shop/c...
To Support the Processing Foundation: processingfoundation.org/support
Send me your questions and coding challenges!: github.com/CodingTrain/Rainbo...
Contact:
Twitter: / shiffman
The Coding Train website: thecodingtrain.com/
Links discussed in this video:
Programming from A to Z: shiffman.net/a2z/chrome-ext/
Source Code for the all Video Lessons: github.com/CodingTrain/Rainbo...
p5.js: p5js.org/
Processing: processing.org
For an Introduction to Programming: • Start learning here!
For More Coding Challenges: • Coding Challenges
Help us caption & translate this video!
amara.org/v/cbZJ/
📄 Code of Conduct: github.com/CodingTrain/Code-o...

Опубликовано:

14 ноя 2017

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 190

@ManishKumar-rz9ub Год назад

For version 3: - "background": { "service_worker": "background.js" }

@mellonsun8621 3 года назад

The is the last Chrome extension tutorial serial I am going to watch, since I don't need any others anymore.

@bmw1553 5 лет назад

The Coding Train, you really deserve the applause that comes at 15:12. Good job! Love it..

@JosephLuklukkyjoe 5 лет назад

hi Daniel! thanks for your lessons. love your enthusiasm. just your act of showing excitement over the concepts makes your tutorials more enjoyable than other ones i've tried. #infectious.

@nathsimpson 6 лет назад

I build a Chrome extension that flips every image on the page after 5 seconds. I then installed it on my colleagues laptop when he wasn’t looking 😂

@SushilMohan_Vlogs 4 года назад

Hahaha, that great man may be you I can create one which closes the google chrome when someone opens it.

@VishalJangid1 3 года назад

@@SushilMohan_Vlogs how to undo that lol

@Dblx535 3 года назад

don't you need to pay to publish one ?

@arjix8738 3 года назад

@@Dblx535 5 dollars, yes but you can load an extension unpacked, so if its for a prank as long as you got access to the pc its doable

@mrpbpp 4 года назад

I wish you are my college lecturer. I definitely will come into your class every single day! what a great teacher you are..

@kenhaley4 6 лет назад

Nice set of videos, Dan. You deserved that applause (whether you triggered it or not).

@rogerio4814 3 года назад

few things in life are more enjoyable than to sit through a lecture of a programmer who has total control over their craft.

@SushilMohan_Vlogs 4 года назад

Hi, you are great teacher not just because you are sharing your knowledge but also because you look very happy about what you are doing. Thanks for inspiring us.

@monegamassif4390 6 лет назад

You get this from everyone dude but you are such a superstar. Keep it up!

@christophercerrachio2225 6 лет назад

You are a great teacher - the fact that you are doing this for free is pretty selfless. Keep up the good work :)

@ShivaGyawali 2 года назад

I watch you for the first time, and haha I can't stop myself saying Thank you to you. Just love the way you teach, haha with full of excitement and enthusiasm. Love your work, brother.

@MorganLock 6 лет назад

These applauses at the end came perfectly on time because it was such a good lesson !!! Big applause to you

@ali.yilmaz 4 года назад

You have explained a subject that I had difficulty in establishing a connection, very well, thanks to you.

@jeanpablosousarabelo6028 2 года назад

Thanks, man! Literally solved my problem. Your model video format is the GOAT in IMHO.

@TheCodingTrain 2 года назад

Thank you for the kind feedback and the support!!

@milkdrom3da Год назад

This series has made me an even bigger coding train fan.

@sandortakacs546 6 лет назад

I waited so much for these tutorials! Thank you Dan! :D

@abdelrhmanshokr7546 2 года назад

Such a great playlist it's a shame that the syntax in different from manifest 2 to manifest 3 but it's still worth it :)

@sudhir600 6 лет назад

great video.. this is what i was looking from hours.. thanks man

@harshvasudeva11 5 лет назад

15: 15 "I did not trigger that sound effect" - Top 10 lies science still can't figure out .

@manaraljadani6309 3 года назад

your way of explanation is super easy to understand thank you so much

@jonez9099 3 года назад

you made the best chrome tutorials ever!

@user-ob9ts8iq2c Год назад

In manifest v3: "background": {"service_worker": "background.js"} Also make sure to add: "action": {"default_title": "example"} *Generally, make sure you refresh the "test" tab after updating the extention. *If there's still an issue, there's a problem with your implementation.

@user-ob9ts8iq2c Год назад

@Obes777 Sure, glad it helped

@1d_4e32 Год назад

thanks a bunch!

@DrChin0 5 лет назад

Great content, great energy. Keep it up!

@StarContract 2 года назад

You're second to none, just awesome.

@mg8z481 4 года назад

14:15 nice summary! thanks Dan!

@JuanNadal 5 лет назад

Thank You for making these videos!

@5bitcube 4 года назад

You're fucking amazing dude. I can now finally delete all distractions when browsing the web. Chrome extensions are so easy to code yet insanely powerful

@northshorepx 2 года назад

Man what a superb tutorial. Thank you!

@olfmombach260 6 лет назад

Love you, really interesting and helpful tutorial!

@tcubed8446 6 лет назад

Thanks for the very clear overview

@shayan_abd 2 года назад

thank you so much for creating these helpful videos on chrome extensions!

@Przyziemniak 5 лет назад

Brilliant explanation!

@YourMomsSideDude 4 года назад

Fantastic! I am a noob and this helped a lot. Thank you

@nomdplume6166 6 лет назад

SUPER useful! Thank you so much!

@BoolFalse 6 лет назад

Wow!!! Thank You. You are good man... from first video I've already subscribed ;)

@AbdulWahab-tu6ti Год назад

wow best teacher ever seen!

@MrTiomanisland 3 года назад

Very good way of explaining!!!

@aarond4577 6 лет назад

Great video. Explained great

@MarceloAgostonSchrotlin 3 года назад

Wow man!! you are one of the biggest things of the world!! xD THANKS A LOT!! Amazing explanation about Chrome extensions

@AndersonMarquesMarinho 3 года назад

excellent content, and excellent teacher as well

@fransiskayuliyanti 4 года назад

Hello, i want to ask something. I build a Chrome Extension that need to access library from node modules. And i tried to call the library with 'require'. Of course there is error message says "Uncaught ReferenceError: require is not defined". So, is there another way to call all the functions on the library from node modules to my script? Thanks.

@TrendingChatsLK 3 года назад

Thanks for the amazing tutorials

@pranav4592 5 лет назад

That was really helpful. Thanks .

@wirion 4 года назад

For people running into this problem, the chrome.browserAction object is only created (in the background page) for extensions with a browser_action (doesn't even need default_icon) defined in the manifest.

@KyleRosebk 6 лет назад

Nicely explained.

@TheCodingTrain 6 лет назад

thank you!

@UnBucks 4 года назад

Best RU-vidr ever!

@rhythmkhanna8933 4 года назад

Thanks a lot for this tutorial. I had a doubt though: If I want to continuously record the history and the tabs opened in chrome, how do i define all that in my background.js file.?

@arjunkirpal9776 5 лет назад

I love you Coding Train

@sajithnallithodi 3 года назад

Thanks very much. Very useful videos.

@datta3268 6 лет назад

Yay , such a cool video and a cool master :D

@kaskas4813 3 года назад

thank you , you are the best one

@stormybear4986 3 года назад

I love your content! Pardon me for saying but you remind of what Mr. Rogers would be like after 4 double-shot espressos. :-) Very useful content!!

@dubey_ji 8 месяцев назад

Thank you so much for this

@elliottarnold9542 3 года назад

You are the man.

@yashgarg5992 3 года назад

This is great, thanks for this video :)

@malkitsingh01 2 года назад

holly awesome stuff!

@greektrumpet 6 лет назад

I love you man!

@benthomson2406 3 года назад

awesome tutorial

@nikolozbokeria3759 6 лет назад

Best guy on youtube B) thank you!

@anuraghazra4772 6 лет назад

Good.. Sticking Notes to your wall is a good idea!

@EnglishRain 4 года назад

Subscribed man, you are AWESOME!!

@testingaccount8478 4 года назад

loved it!!!

@Chawput 3 года назад

Thank you so much!

@periyakaruppannagappan9761 2 года назад

Thanks a lot! ❤

@emreozhan71 6 лет назад

thanks for very helpful video

@user-fz9tt2xj6k 5 лет назад

thanks for your share

@rodrigofierro4444 3 года назад

Thanks!

@doktordzwonek9306 Год назад

Anyone knows how to directly access a certain page withint content script? If I use "inspect" in chrome I'm getting into the context that contains a method I want to use, but I don't know how to get into that context from chrome extension

@Home-ro6cu Год назад

I feel like liking and subscribing thx :)

@jjeon9850 2 года назад

Thanks for the great content CT. 6:45 - If there's multiple browser actions possible, how does the browser know which event handler to match each action? At this point there's only one action. But what if there's two buttons.

@0000oooopppp 5 лет назад

How to make the background script call the content script every time the users does an action on the page? I want to record all the user's actions in order to later on display all the actions to the user.

@mohammedashrafshaikh3873 2 года назад

How can I make on/off feature of extension, just like 'page ruler' extension once I clicking my extension it is always opened. ,what I want is it should get off when I click it on again @The Coding Train

@crysosancher 2 года назад

Is there anyway to use chrome.browserAction.onClicked.addListener in background.js while using default pop.html? It's like I'm trying to make a multipurpose extension where on clicking extension icon there comes up a popup with button nd then one of the button click should be responsible for fetching tab id. Is it possible?

6 лет назад

is it possible to script a gmail page? what conditions need to be written in the manifest?

@LeonanLuppi 6 лет назад

I have a button in my page so I need when this button got clicked I open a new tab and my chorme extensions fill in a form. How can I listener a button click (at my page) and send to chrome extension ? Anyone know?

@iFunnnnn 3 года назад

So, I am programming in JS and html to make a button menu which redirects the current tab to a webpage, but i can't figure it out. Can you help me out ? any tutorials ? discord call ? Would help me a lot !

@mohammedabdulsubhan8018 6 лет назад

I have to create one chrome extension which will give the rating and it must show directly on the search engine. Could you please help me.

@zeckinho_ 2 года назад

I love you!

@jozsefszabados1183 2 года назад

Köszönjük!

@TheCodingTrain 2 года назад

Köszönjük back at you!

@PabloModelkits 4 года назад

Great job and dynamic explanation. Anyway, as you said you just scratch over the surface of this. Im trying to find the way to get info from the API in my website but is really tricky. In my browser action there is Popup.html with a button that calls a content.js witch tries to get data from web API. This communication is not like the background does, I mean, is directly loading in de actual website. The point is, how can I get info, for example an Array like the API provides and manage it to do things. Thanks.

@ctdungqs 2 года назад

Thanks

@Ghalaghor_McAllistor 3 года назад

And how do I stop these chrome-extension manifest json from creating new tabs when I open my chrome browser? I tried to delete everything that could have a json in its filename and still get them.

@somarble 5 месяцев назад

Hey, can it dynamically change the icon image depending on the API response? For example, the Bitcoin price reaches a certain level and signals me about it. Thanks

@jeffreychen7494 6 лет назад

If I want to store data, should I use cookies or localstorage?

@maginspire3067 3 года назад

I hate learning from videos. its not only time consuming but runs without my consent. Source code is the real gift. did you use Bluetooth to switch scenes in obs?

@navneethsuresh9995 6 лет назад

Hi!Dan! can u say me what basics should I know to understand this chrome extensions and the chatbots. plz help me out:D

@sinbiz446 5 лет назад

I followed the code to the letter, and I'm unable to either send messages from the background script or unable to receive messages in the content script. Has anyone else had this problem, or does anyone know how to fix it?

@AlexTechie 4 года назад

I'm in the same spot and the docs are absolute garbage.

@Arrcival 4 года назад

In case you are still interested about the solution : the listener you add on the chrome browserAction, or any listeners on tabs returns directly the tabId instead of the tab itself changing tab.id to tab solved everything for me, you can rename both to tabId

@HKPhim 6 лет назад

i check me all chrome extensions permissions and a lot need "Read and change all you data on the websites you visit" is that mean its can steal your password?

@navneethsuresh9995 6 лет назад

hi dan i doubt when i download p5 and open it, It says me that"Look for an app in the store which can open this".C: help me and i am using windows 8

@zayanwatchel8780 6 лет назад

Kaushik Sriram you don't open JS files you include them into HTML

@sohailansari2009 2 года назад

how to use multiple script files in Manifest V3, as now it accepts only String not an array.

@raushanjaiswal342 3 года назад

i want to build a chrome extension in such a way that it only works if the browser url contains some string. Ex if url contains "CodingTarin" i want to show the extension if URL doesn't contain "codingTrain" i dont want to show the extension.

@progm6127 3 года назад

is there any way to pass message from one tab to another?

@cadillacman3790 2 года назад

Hi Daniel, thanks for all your lessons in chrome extensions ... but i have a question : i use in Firefox this function var filter = browser.webRequest.filterResponseData(details.requestId); but this is in Chrome not aviable. my question is how is it possible to get the xhr response what is seen in the developer page (F12) ? If i a member in your comunity is it possible to get an tipp or answer then ? if yes i will be a member :-)

@jeminpatel1966 4 года назад

Can you show if I clicked extension again, it can undo the color??

@ghadahassen2093 6 лет назад

funny and smart .. thanx a lot

@code-snippets 2 года назад

Thank you very much for these videos, you are a great teacher!! Though, I'm having troubles following, because I get a message telling V2 is deprecated, is there an easy way to do it with V3, I'm trying, but I get errors and are difficult to debug