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.
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.
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.
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.
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
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.
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?
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?
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
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.
I have two questions 1. how to know the current tab url 2. how to run a function forever in background and keep detect tab change or new window open.. and on every action (tab open or window) a log msg will be aaded in localstorage.
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 :-)
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.
I flowed this tutorial to make a Firefox extension. All I had to change was "chrome" into "browser". So if you want to make a browser agnostic extension one thing you should do is if (check_somehow_if_chrome_is_the_browser()) { browser = chrome; } And then you just use "browser" instead of "chrome".
It looks like the chrome-object is also defined in Firefox. So you can't just check if it is defined to check if the extension is running in Chrome. And while the chrome-object has all the functionality used in this video, I already found something which is different in the chrome-object. So you still should check in which browser your extension is running. Or perhaps(!) it would even make sense just to use the chrome-object if you want to make sure the extension runs in Firefox and in Chrome. If you ask me they all should agree on a common set of functionality which is found in the browser object and if they want to make something browser specific it will be found in the chrome-, firefox-, opera- or edge-object.
QUESTION for next Chrome Extensions episode: How to "get" or manipulate bits of page content that a page loads later via AJAX or lazy loading etc.? My Chrome extension can't get hold of page contents that get loaded via AJAX ***after*** the initial page load.
Example: My Chrome extension gets the contents that initially get loaded on this page: www.lynda.com/Programming-Languages-training-tutorials/1467-0.html BUT when I click the "Show More" AJAX link at the bottom, my Chrome extension is NOT getting those additionally loaded contents.
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
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
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.
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.?
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.
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 !
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
Thank you! I'm making a Firefox add-on, but there are enough similarities that it's clearing up a lot of my confusion. One thing I'm still confused on is how to include the use of *jQuery* in your script, because currently it seems that my add-on just skips any jQuery code. Another question I have is how do you create things that you would normally use *HTML* to create? Yeah, you could use JavaScript to make simple HTML elements, but that could quickly become far too tedious with more complex applications.
You could have a minified jquery included in the plugin, or access it from a CDN as normal. To create elements, you can do element = document.createElement('tagName') // e.g. createElement('div')
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.
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.
I remember once slightly disliking him for being "too childish" but now that ik more about coding i love watching him cuz he's just as lost as i am when writing code LMAO
The is the last Chrome extension tutorial serial I am going to watch, since I don't need any others anymore.
Thanks, man! Literally solved my problem. Your model video format is the GOAT in IMHO.
Thank you for the kind feedback and the support!!
For version 3: -
"background": {
"service_worker": "background.js"
}
The Coding Train, you really deserve the applause that comes at 15:12. Good job! Love it..
few things in life are more enjoyable than to sit through a lecture of a programmer who has total control over their craft.
I wish you are my college lecturer. I definitely will come into your class every single day! what a great teacher you are..
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.
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 😂
Hahaha, that great man may be you I can create one which closes the google chrome when someone opens it.
@@SushilMohan_Vlogs how to undo that lol
don't you need to pay to publish one ?
@@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
Nice set of videos, Dan. You deserved that applause (whether you triggered it or not).
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.
These applauses at the end came perfectly on time because it was such a good lesson !!! Big applause to you
You are a great teacher - the fact that you are doing this for free is pretty selfless. Keep up the good work :)
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.
This series has made me an even bigger coding train fan.
You have explained a subject that I had difficulty in establishing a connection, very well, thanks to you.
You get this from everyone dude but you are such a superstar. Keep it up!
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.
@Obes777 Sure, glad it helped
thanks a bunch!
15: 15 "I did not trigger that sound effect" - Top 10 lies science still can't figure out .
Köszönjük!
Köszönjük back at you!
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
you made the best chrome tutorials ever!
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 :)
your way of explanation is super easy to understand thank you so much
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.
I waited so much for these tutorials! Thank you Dan! :D
You're second to none, just awesome.
great video.. this is what i was looking from hours.. thanks man
Wow man!! you are one of the biggest things of the world!! xD
THANKS A LOT!! Amazing explanation about Chrome extensions
thank you so much for creating these helpful videos on chrome extensions!
14:15 nice summary! thanks Dan!
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?
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!!
Thank You for making these videos!
Man what a superb tutorial. Thank you!
Fantastic! I am a noob and this helped a lot. Thank you
Thanks for the amazing tutorials
Best TH-camr ever!
Great content, great energy. Keep it up!
excellent content, and excellent teacher as well
in manifest version 3 browserAction is updated to action , use this if you wrer also get stucked like me
Very good way of explaining!!!
Wow!!! Thank You. You are good man... from first video I've already subscribed ;)
Thanks for the very clear overview
Thanks very much. Very useful videos.
Love you, really interesting and helpful tutorial!
Good.. Sticking Notes to your wall is a good idea!
SUPER useful! Thank you so much!
I love you Coding Train
Thank you so much for this
in manifest v3:
you also should change"chrome.browserAction" to "chrome.action" in background.js
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?
I'm in the same spot and the docs are absolute garbage.
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
Nicely explained.
thank you!
thank you , you are the best one
Subscribed man, you are AWESOME!!
You are the man.
This is great, thanks for this video :)
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.
Brilliant explanation!
Great video. Explained great
Best guy on youtube B) thank you!
Yay , such a cool video and a cool master :D
I have two questions
1. how to know the current tab url
2. how to run a function forever in background and keep detect tab change or new window open.. and on every action (tab open or window) a log msg will be aaded in localstorage.
Sudhir Gupta 1. window.location.href
2. chrome.runtime.onUpdateAvailable
Thanks a lot! ❤
That was really helpful. Thanks .
holly awesome stuff!
awesome tutorial
Thank you so much!
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 :-)
I feel like liking and subscribing thx :)
wheeeere do you learn all these cool stuff you have on the channel ?
loved it!!!
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.
I flowed this tutorial to make a Firefox extension. All I had to change was "chrome" into "browser".
So if you want to make a browser agnostic extension one thing you should do is
if (check_somehow_if_chrome_is_the_browser()) {
browser = chrome;
}
And then you just use "browser" instead of "chrome".
It looks like the chrome-object is also defined in Firefox. So you can't just check if it is defined to check if the extension is running in Chrome.
And while the chrome-object has all the functionality used in this video, I already found something which is different in the chrome-object. So you still should check in which browser your extension is running.
Or perhaps(!) it would even make sense just to use the chrome-object if you want to make sure the extension runs in Firefox and in Chrome.
If you ask me they all should agree on a common set of functionality which is found in the browser object and if they want to make something browser specific it will be found in the chrome-, firefox-, opera- or edge-object.
thanks for your share
Would love to see an extension that looks at something on a website and then makes a sound whenever it changes. Like a norification system or smthing.
QUESTION for next Chrome Extensions episode:
How to "get" or manipulate bits of page content that a page loads later via AJAX or lazy loading etc.? My Chrome extension can't get hold of page contents that get loaded via AJAX ***after*** the initial page load.
Example: My Chrome extension gets the contents that initially get loaded on this page: www.lynda.com/Programming-Languages-training-tutorials/1467-0.html BUT when I click the "Show More" AJAX link at the bottom, my Chrome extension is NOT getting those additionally loaded contents.
but you can get the content if you wait for it to arrive, there's many ways you can do this.
You can write a watchdog, you can intercept xhr requests, you can watch for DOM changes, there's so many ways...
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
V3 is the death of most web extensions. Move to Firefox, fuck Google.
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
Could you please redo it with Manifest 3? Great course btw
I love you man!
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.
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.?
thanks for very helpful video
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.
Hi!Dan! can u say me what basics should I know to understand this chrome extensions and the chatbots. plz help me out:D
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 !
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
Thank you!
I'm making a Firefox add-on, but there are enough similarities that it's clearing up a lot of my confusion. One thing I'm still confused on is how to include the use of *jQuery* in your script, because currently it seems that my add-on just skips any jQuery code. Another question I have is how do you create things that you would normally use *HTML* to create?
Yeah, you could use JavaScript to make simple HTML elements, but that could quickly become far too tedious with more complex applications.
You could have a minified jquery included in the plugin, or access it from a CDN as normal.
To create elements, you can do element = document.createElement('tagName') // e.g. createElement('div')
@2:48 Could you or anyone elaborate why background.js needs to be an array?
Thanks
this idea is cool . Click on button and add picture as backround on pc mobile tablets. I just need to get this system ow to find user resolution
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.
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.
A Ghajini teacher who always forget code syntax. 😄😄
I remember once slightly disliking him for being "too childish" but now that ik more about coding i love watching him cuz he's just as lost as i am when writing code LMAO
Thanks!
how to use multiple script files in Manifest V3, as now it accepts only String not an array.
God bless you!MashaAllah good tutorial
How much can be done with service workers and manifest v3. In 6 month all usages of background scripts in major browsers will be gone.
Excellent and funny to teaching tanx