This tutorial is excellent if you want to make the exact program you're making. This doesn't teach the underlying principles of what you need to do something similar on your own. It's a poor tutorial, I'm sorry to say. You skip over important parts, don't explain a few key details. It feels too much like your many follow-along tutorials and not a course on how to do it using examples.
this is what i thought , this too much for a beginner or even for someone that want to do something similar i just learned some js html css and i was able to make basic chrome extension on freecodecomp blog , but this tutorial already started creating extension with 8 files i don't know how this is for beginners .
Helllo Im facing an error, when I send a message from background script I encounter this error, help me please I can't get rid of it....! Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
Hey everyone. If you add newVideoLoaded(); at the end of contentScript as the purposed quick fix, the extension won't work properly on reload. The reason is that you will not get the video ID into the currentVideo variable, so you won't be able to add new timestamps. The best quick fix I came up with was to force a new URL (I also studied how RUclips deals with different URLs) and I came up with this code that you can add to your contentScript in the place of newVideoLoaded() (the one at the end, line 64 of the finished code); let trail="&ytExt=ON"; if(!window.location.href.includes(trail)&&!window.location.href.includes("ab_channel")){ window.location.href+=trail; } This should force an update on the URL of the RUclips when necessary, which will then trigger the chrome.tabs.onUpdated. I hope this helps. (For those who want to know what is ab_channel, it is something youtube adds spontaneously for some videos (with channel info) and that triggers the chrome.tabs.onUpdated on its own.) Cheers! EDIT!! Also include a condition &&window.location.href.includes("youtube.com/watch") in the if statement i gave. You don't want it to update the URL in non-RUclips websites.
Thanks for helping us out. I was debugging this due to an "Extension context invalidated". That was generated because when calling the newVideoLoad() the fetchBookmarks function didn't have with what videoId to work with.
What VScode extension are you using to provide autocomplete suggestions regarding the Chrome APIs as you code. Particularly in your background.js file?
At 37:17 to use the active function you need additional permissions in the manifest.json file. Change line 5 to "permissions": ["activeTab", "storage", "tabs"], You wont run in a problem later in the next few mins.
Wow, this video is really advanced! He goes through all the steps so fast and assumes you already know a lot of things. This is definitely not for beginners who want to learn how to make an extension from scratch. You need some prior experience and knowledge to follow along. I wouldn't recommend this video to anyone who is just starting out with extensions. It might be too confusing and frustrating for them.
@@nathanfoss766 having plenty of experience with both, there are still a lot of other assumptions made about what the viewer knows. there's not even really a starting off point. it's kind of like "you know algebra, right? here's calc II".
@@nathanfoss766 and then he skips the fact of using an IFEE as if it's obvious, then suddenly background.js comes in dunno why and then he puts an even listener on a chrome object in pure js. whoa!
you gotta need to take the discomfort, learning isn't supposed to be fun, and whenever you find learning fun that is just because you have plenty of prior knowledge to begin with!
a better start to the video after the demo would've been to show us how to create the boilerplate code as that will let us understand how the extension works better
Thanks for easy and understandable tutorial, it's really good. Though I would say some things could be done better. 1. You should probably test on timestamp existance on bookmark creation to avoid creating duplicates when a user clicks the button several times in a row 2. You should probably deal with storage in background page/service worker, and not in content script. Even though the code in content script will become less beautiful, I guess it is better in terms of architecture. And if you don't care about architecture at all, why just not move that to popup.js? Your content script really does not need to get access to the full bookmarks list in order to add a "plus" button and assign a click handler to it. 3. Maybe you don't have to refetch all the bookmarks after deletion, just add some logic for handling an empty list case (some speed optimization). 4. Finally, Chrome definitely won't allow us to change the active tab leaving the popup opened (though Firefox really allows something like this using a special development option to preserve all opened popups), but we can overprotect ourselves and save the current page url or video id somewhere in popup.js, so that we can be 100% sure that we are deleting the right things. I know that it is a video for beginners, but still. Also it was worth mentioning about the total storage limitsof each type that Chrome allows us to store.
at around 16:00 im getting an error because function newVideoLoaded() does not exist...i check the code and im still wondering. Why are you calling newVideoLoaded() when it is nowhere defined?
I'm not sure if something has changed about Chrome extensions since this tutorial was made, but this doesn't seem to work anymore. Even the finished project in the git repo. After making my own changes to grab the URL on the content script/popup JS files directly instead of messing with utils and background, I finally got it working.
It does not works for me... even if I just cloning the full version (youtube-bookmarker-finished-code) It gives me strange errors what I cannot fix... if I click on plus it does not do anything... does not add any bookmarks to the popup
Plse make video on full stack web development in one video which is longer like more than 30 hours and cover popular framework and libraries. Plese make a video
@miraclemark6120 I am not using the starter script, I am building my own extension.. not sure whats the error on your side. For the dev environment I have setup Vite for js compiling and using extensions reloader chrome extension
@@JustJeris that very nice, seems like I will do the same. As for the error I am getting, it's about the background.js file not communicating properly. Like nothing is showing up, not even console logs
I have created extension for FF/Edge and Chrome, the code are portable except for specific API(s), the same code will most likely work for the browsers
@@zoldlen883 not sure how school is any better. School will introduce you to the concept of making a google chrome extension and then quiz you on it with the expectation that you’ve already mastered it.
Two things I found useful while developing this extension: 1. choosing that video for test purposes which has no ads. Like those of sandeep maheshwari. 2. using 'extensions reloader' extension for one click reload of the upacked extensions. Make sure to pin this extension.
Good video. By no means best video I've seen. It's clear there's a script or some background code that's being read from bc the order of operations from "what do I need to do" to "code I wrote" are out of order. You go through the instruction as if you're working from the solution rather than the problem and that eliminates the problem-solving process: questions like "why do I want left controls and not right controls?", "why this video player?", "why a value property?", "why are splitting this up into so many different functions from the start?" are prominent in a viewers' mind throughout the video which causes mental fatigue.
Would anyone mind to explain me the syntax on the "chrome.storage.sync.get([currentVideo], (obj) => {..." inside the fetchBookmarks function? is [currentVideo] the name of the key?
This video lacks pedagogy. Let's keep aside the fact that it already isn't a beginner friendly (even for those who already meet the requirements). There are several occasions where the creator doesn't explain what a particular function does and why is it being written at first place. The author simply reads what he types and doesn't explain what the statement does.
Good video, but to be honest, I wouldn't call this a tutorial (at least not for beginners), as there is almost 0 details on what background and content js are for. It's more like a livecoding video, and pretty useful if you're either already familiar with the basic concepts of extension development or just a copypaste coder that has no idea what this code does.
In my addNewBookmarkEventHandler the line currentVideoBookmarks = await fetchBookmarks(); throws an error with the message: Uncaught TypeError: Cannot read properties of undefined (reading 'sync') at :3:26 at new Promise () at fetchBookmarks (:2:16) at :1:31 What could that be?
so i was having some dificulty with one of the parts erroring, and as a trouble shooting step, i tried seeing if the finished version off git hub would work it did not. i think this tutorial is either depricated or straight up bad.
If anyone is having issues getting test logs to display, or undefined such as at 17:33, I have found that you need to load a new youtube video. at least on my machine simply reloading does nothing and will not alert the extension to begin doing anything.
I'd really like to see a thorough tutorial on how to build a browser extension using a framework, like Vue. Finding any information on how to do it seems to be one of the most difficult things to find on RUclips right now.
@@Mohamed-m2m9o why the hell do I need MV3? I am more than happy with Manifest V2, service worker/content script/background page script are basically just all the same thing IMO.
at 16:00 I have the problem that the tab.url is undefined so no message can be sent to the content script. Does anyone else have the same problem? How can I fix this?
I want to mark notification on RUclips that I have seen most recent. so the next time, when I open notification I can easily realize which is new. Can you make video to guide please
Came here BECAUSE of the Scrimba course... Scrimba is far better for gaining understanding of what javascript does and how to use it. But when it comes to a project... I was pretty disappointed to see the chrome extension project be nothing but a bookmark extension, which of course exists natively in all browsers. Useless. I'd at least like to spend my hours committed to a course building something that isn't completely worthless.
How would you go about doing the following: When you click on the icon to bookmark, the extension popup opens automatically? no need for you to go all the way to the icon and click it?
Hi and thanks for that tutorial, it's very interesting and instructive. However there's one thing that let's me a little perplexed : if I understand it right, the sole purpose of your background script is to uselessly transmit in a complicated way the tab's page url to the content script ??? because so far I can achieve this with the classical and much more simple document.URL property directly inside the content script.
You can see in the console that it is adding timestamps on click of the Plus icon. It just fails to make them appear in the list when you click the extension. I am sure the author could be able to fix this if he really wanted, but it seems he is too preoccupied with something else. Let's hope he can find the time soon, or someone else with the know-how help us out.
Injection approach would not work on many single page applications, the injection would be removed. It's better to use mutation observers for injection management.
I'm using this because one of my homework's is not accessable. Tab and enter don't work, pasting is horrible, and I have friends with problems relevant.
I want to create an extension that downloads chatgpt response in pdf file. Additional features may include enabling user save pdf to preffered place of choice in preffered document type e.g. word instead of pdf
After much research, selected this as my first tutorial on Chrome Extension Development. Turned out great! The only problem I faced initially was the error "Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist." Was not easy to find a solution. Finally, what worked is open a new Chrome window after reloading the extension. None of the solutions on Stack Overflow mentioned that. Another thing that should be made clearer in the video is how do you bring up the Console for the Background service worker. The video is too quick and it is difficult to see this part. Finally, turned out, you can do that from the Manage Extension itself. To see log of the Content script, use the regular browser Developer Tools.
Great video! How would you do something like grab all of the URLs from the tabs in the active window, and paste them to your clipboard with " " in-between each URL?
It confuse a bit that you show videos with code, it was better if you used something completely unrelated. Other thing is you mess around but do not explain what components do and how they play together, I thing you do a bit of this when you explain that the manifest when the url match, inserts and executes the contentScript in the context of the web page, it had been nice if you explain later what role the background script plays and how the event passing works. But well, you can make another video with more clear explanation.
I guess there it is... sneakyness and being high be having ppl thinking they walked on the moon 😭 getting disgusting 😂 I'm let the lord take the custody 😭
In the part where we send the message using chrome.tabs.sendMessage() and add the event listener with chrome.runtime.onMessage.addListener() I keep getting the same error:Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist Any idea why it's happening?
@@franck4690 Add this to the content_scripts part of the manifest file: { "matches": ["*.youtube.com/*"], "js": ["contentScript.js"], "run_at": "document_start" }
@@franck4690 Actually I think I just got it to work without the other part I suggested above. Just change addListener function's callback parameters to (tabId, changeInfo, tab). So basically just adding changeInfo in between tabId and and tab. I think that was fucking up it's ability to send the message to the content script.
what chrome extension i want to create a extension through which i can place buy sell orders while i am doing analysis in the tradingview charting website with a 3 sec timer to cancel (optional) and also info about the position i have taken, without switchin logging moving too much . well need to figure it out how to do it just started the course so hopefully built it in 30 days
i want to make a chrome extension in which i can freely zoom in x-axis or y-axis of a website independently or individually. specifically, i am currently unsatisfied with the UI of g-calendar and thus want to vertically zoom in on the page without horizontally zooming in. i hope such type of chrome extension can be made, isn't it?
this is a beginners question im sure but when i click on loadunpack, it doesn't see any of my files which i created in dreamweaver..ie js,json,css,html , nothing...help please
Time to save to the PlayList of videos I wanna watch but will never watch
way to go
😂
*cough cough* 😅🤣🤣🤣
This one is only an hour long! I’m sure you can fit it in your schedule somewhere. I believe in you 💪
😂
This tutorial is excellent if you want to make the exact program you're making. This doesn't teach the underlying principles of what you need to do something similar on your own. It's a poor tutorial, I'm sorry to say. You skip over important parts, don't explain a few key details. It feels too much like your many follow-along tutorials and not a course on how to do it using examples.
this is what i thought , this too much for a beginner or even for someone that want to do something similar i just learned some js html css and i was able to make basic chrome extension on freecodecomp blog , but this tutorial already started creating extension with 8 files i don't know how this is for beginners .
I agree. I tried to follow along, but a 10mins tutorial and the official docs were better at explaining what was happening.
Exactly what I was looking for
@@anchyzas Well, does it work for you guys?
Helllo Im facing an error, when I send a message from background script I encounter this error, help me please I can't get rid of it....! Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
same here
Same here also, do you guys find any solutiion to this? @@plainzone8356
Me 3
This finished code itself in git repo is not working currently in chrome
Hey everyone. If you add newVideoLoaded(); at the end of contentScript as the purposed quick fix, the extension won't work properly on reload. The reason is that you will not get the video ID into the currentVideo variable, so you won't be able to add new timestamps. The best quick fix I came up with was to force a new URL (I also studied how RUclips deals with different URLs) and I came up with this code that you can add to your contentScript in the place of newVideoLoaded() (the one at the end, line 64 of the finished code);
let trail="&ytExt=ON";
if(!window.location.href.includes(trail)&&!window.location.href.includes("ab_channel")){
window.location.href+=trail;
}
This should force an update on the URL of the RUclips when necessary, which will then trigger the chrome.tabs.onUpdated. I hope this helps. (For those who want to know what is ab_channel, it is something youtube adds spontaneously for some videos (with channel info) and that triggers the chrome.tabs.onUpdated on its own.) Cheers!
EDIT!!
Also include a condition &&window.location.href.includes("youtube.com/watch") in the if statement i gave. You don't want it to update the URL in non-RUclips websites.
Admin should definitely pin this comment or help fix the github repo cos it fixed a major issue that renders the extension useless.
Thanks for helping us out. I was debugging this due to an "Extension context invalidated".
That was generated because when calling the newVideoLoad() the fetchBookmarks function didn't have with what videoId to work with.
What VScode extension are you using to provide autocomplete suggestions regarding the Chrome APIs as you code. Particularly in your background.js file?
New to chrome development and any help would be much appreciated!
Did you ever find out? I'd really like to know!
anyone getting a failed to load resource error on the comleted version of the code from his github? says access it blocked by client or something
It's broken
background.js:1 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
yes
At 37:17 to use the active function you need additional permissions in the manifest.json file. Change line 5 to "permissions": ["activeTab", "storage", "tabs"],
You wont run in a problem later in the next few mins.
... now for Firefox? Manifest v3 isn't as privacy-hating there
Extensions helps when company programmers can't fast provide specific functions.
Wow, this video is really advanced! He goes through all the steps so fast and assumes you already know a lot of things. This is definitely not for beginners who want to learn how to make an extension from scratch. You need some prior experience and knowledge to follow along. I wouldn't recommend this video to anyone who is just starting out with extensions. It might be too confusing and frustrating for them.
He did say at the beginning of the video that you need an understanding of JavaScript and DOM manipulation.
@@nathanfoss766 having plenty of experience with both, there are still a lot of other assumptions made about what the viewer knows. there's not even really a starting off point. it's kind of like "you know algebra, right? here's calc II".
@@nathanfoss766 and then he skips the fact of using an IFEE as if it's obvious, then suddenly background.js comes in dunno why and then he puts an even listener on a chrome object in pure js. whoa!
you gotta need to take the discomfort, learning isn't supposed to be fun, and whenever you find learning fun that is just because you have plenty of prior knowledge to begin with!
a better start to the video after the demo would've been to show us how to create the boilerplate code as that will let us understand how the extension works better
use user snippet under the settings gear and there you can write your code ,change the name to boilerplate
Freecode camp is incredible. One love❤️
Low-key wanted this. Love free code camp
What's low-key?
@@BehruzbekOtayev it says it has meaning of restrained, like “of low or moderate intensity, not very forceful" or chilly.
Thanks for easy and understandable tutorial, it's really good.
Though I would say some things could be done better.
1. You should probably test on timestamp existance on bookmark creation to avoid creating duplicates when a user clicks the button several times in a row
2. You should probably deal with storage in background page/service worker, and not in content script. Even though the code in content script will become less beautiful, I guess it is better in terms of architecture. And if you don't care about architecture at all, why just not move that to popup.js? Your content script really does not need to get access to the full bookmarks list in order to add a "plus" button and assign a click handler to it.
3. Maybe you don't have to refetch all the bookmarks after deletion, just add some logic for handling an empty list case (some speed optimization).
4. Finally, Chrome definitely won't allow us to change the active tab leaving the popup opened (though Firefox really allows something like this using a special development option to preserve all opened popups), but we can overprotect ourselves and save the current page url or video id somewhere in popup.js, so that we can be 100% sure that we are deleting the right things.
I know that it is a video for beginners, but still.
Also it was worth mentioning about the total storage limitsof each type that Chrome allows us to store.
at around 16:00 im getting an error because function newVideoLoaded() does not exist...i check the code and im still wondering. Why are you calling newVideoLoaded() when it is nowhere defined?
I'm not sure if something has changed about Chrome extensions since this tutorial was made, but this doesn't seem to work anymore. Even the finished project in the git repo. After making my own changes to grab the URL on the content script/popup JS files directly instead of messing with utils and background, I finally got it working.
Yes, it does not seem to be working for me either. Would you mind telling me what changes you made? Ive been having trouble fixing the problem. Thanks
It does not works for me... even if I just cloning the full version (youtube-bookmarker-finished-code) It gives me strange errors what I cannot fix...
if I click on plus it does not do anything... does not add any bookmarks to the popup
I am going to develop a pdf maker for the code in the webIDE.
Thank you for making this useful video, this is so far the most detailed and advanced tutorial I could find on RUclips!
Got the error "Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist" background.js line 1
did you get the resolution for it ?
@@atulya3344 try adding this in background.js
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
port.postMessage({counter: msg.counter+1});
});
});
@@riyadutta2282 Thanks much, but i found that, my content scripts was not loading, thus I used insertScript to add it and then I was able to run it
@@atulya3344 can you share the code that helped you in running that... Actually I'm facing little problem.. this extension isn't working properly..
@@riyadutta2282 sure, will share soon. Indeed I have not created this extension but only I picked the calling mechanism
Plse make video on full stack web development in one video which is longer like more than 30 hours and cover popular framework and libraries. Plese make a video
Ok this is crazy, i searched for this yesterday and now this came out
Is there a more streamlined development process? Reloading the extension manually sounds very annoying
But is yours working tho, I keep getting errors with my background service worker file
@miraclemark6120 I am not using the starter script, I am building my own extension.. not sure whats the error on your side. For the dev environment I have setup Vite for js compiling and using extensions reloader chrome extension
@@miraclemark6120 what is the error youre getting?
@@JustJeris that very nice, seems like I will do the same.
As for the error I am getting, it's about the background.js file not communicating properly. Like nothing is showing up, not even console logs
We need lesson about creating extension for Firefox!!!!
I have created extension for FF/Edge and Chrome, the code are portable except for specific API(s), the same code will most likely work for the browsers
ok i will check your github, thanks
Definitely the best chrome extension tutorial I've seen so far. Others are either really outdated or don't teach much, or both. This is great.
If this is the best you've seen I worry about the others because this is quite poor
@@TypicallyThomas plz tell me other sources for learning chrome extensions plz
@@bharathkumar5870 Don't have any I'm afraid
@@TypicallyThomas You will need to go to school for it then. That's all the internet is. Follow alongs.
@@zoldlen883 not sure how school is any better. School will introduce you to the concept of making a google chrome extension and then quiz you on it with the expectation that you’ve already mastered it.
Two things I found useful while developing this extension:
1. choosing that video for test purposes which has no ads. Like those of sandeep maheshwari.
2. using 'extensions reloader' extension for one click reload of the upacked extensions. Make sure to pin this extension.
lmao a chrome extension, whats next a java applet? flash animation?
I've been looking for this course for so long
Keep looking.
Good video. By no means best video I've seen. It's clear there's a script or some background code that's being read from bc the order of operations from "what do I need to do" to "code I wrote" are out of order. You go through the instruction as if you're working from the solution rather than the problem and that eliminates the problem-solving process: questions like "why do I want left controls and not right controls?", "why this video player?", "why a value property?", "why are splitting this up into so many different functions from the start?" are prominent in a viewers' mind throughout the video which causes mental fatigue.
Would anyone mind to explain me the syntax on the "chrome.storage.sync.get([currentVideo], (obj) => {..." inside the fetchBookmarks function? is [currentVideo] the name of the key?
This video lacks pedagogy. Let's keep aside the fact that it already isn't a beginner friendly (even for those who already meet the requirements). There are several occasions where the creator doesn't explain what a particular function does and why is it being written at first place. The author simply reads what he types and doesn't explain what the statement does.
You are a noob, those who wanted to learn, have learnt and they are making their favourite chrome extensions.
Its basic common sense, if you want to make a chrome extension, javascript is a prerequisite.
This is not a javascript tutorial.😂😂
The uses of arrow functions make the code very difficult to understand for beginner (total lack of understanding the building of the code)
Good video, but to be honest, I wouldn't call this a tutorial (at least not for beginners), as there is almost 0 details on what background and content js are for. It's more like a livecoding video, and pretty useful if you're either already familiar with the basic concepts of extension development or just a copypaste coder that has no idea what this code does.
In my addNewBookmarkEventHandler the line currentVideoBookmarks = await fetchBookmarks(); throws an error with the message:
Uncaught TypeError: Cannot read properties of undefined (reading 'sync')
at :3:26
at new Promise ()
at fetchBookmarks (:2:16)
at :1:31
What could that be?
not working when i console in background.js
13:19 it's not going to include &index=2 part because it's not part of v parameter!
extension is not working
Hey if you seeking someone to add subtitles for you
I can help
so i was having some dificulty with one of the parts erroring, and as a trouble shooting step, i tried seeing if the finished version off git hub would work
it did not. i think this tutorial is either depricated or straight up bad.
This inspire me to give up on coding
25:20 does not work, event is still not fired on page refresh
If anyone is having issues getting test logs to display, or undefined such as at 17:33, I have found that you need to load a new youtube video. at least on my machine simply reloading does nothing and will not alert the extension to begin doing anything.
you saved me
but I don't see "URLSearchParams" in console tab
So noone else having problems with the manifest.json part and thr background.js?
Lol someone steal this idea for me, I wanna create Shazam -like extension
Looks like this guy was just teaching himself. Disappointed
angular lecture please ??
This is very cool, thanks guys 🤩
The description states javascript but the code on the screen is python oh boi 😑😒🤔
learning thru the chrome extension discord is amazing!
This is what i did need yesterday and you posted this thanks❤️❤️❤️❤️❤️
I'd really like to see a thorough tutorial on how to build a browser extension using a framework, like Vue. Finding any information on how to do it seems to be one of the most difficult things to find on RUclips right now.
rightt? there are so many videos that talk about manifest version 2 but none on mv3
@@Mohamed-m2m9o why the hell do I need MV3? I am more than happy with Manifest V2, service worker/content script/background page script are basically just all the same thing IMO.
at 16:00 I have the problem that the tab.url is undefined so no message can be sent to the content script. Does anyone else have the same problem? How can I fix this?
I'm facing the same problem here man, did you find any solution to that?
@@wriddhihazra I have the same issue, did you found a solution ?
Did you find a solution ?
change the line by this chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
@@wriddhihazra addListener take a third element change the line by this chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab)
Why did "async" suddenly appear on line 14 at 24:34? There's no explanation of that.
Something is missing here
How do the extension is being updated on the flay?
You didn't even mention that part.
never would i have thought a delicious japanese noodle dish would teach me how to make a chrome extension, how far we've advanced
unblocked games
thats it
I want to mark notification on RUclips that I have seen most recent. so the next time, when I open notification I can easily realize which is new.
Can you make video to guide please
@MD FAHIM could you please more details
First Comment Thank you mcuh great
Can you please, give me an understanding of how to automate the submission of this extension to webstore?
why do you write the content script in a immediately invoked function?
we are waiting for tauri tutorial
why dont u upload it with showing the creation behind the boiler code ffs.
I've been learning js and html these past few days, this one seem like a fun adventure for when I finish the Scrimba course.
Came here BECAUSE of the Scrimba course... Scrimba is far better for gaining understanding of what javascript does and how to use it. But when it comes to a project... I was pretty disappointed to see the chrome extension project be nothing but a bookmark extension, which of course exists natively in all browsers. Useless. I'd at least like to spend my hours committed to a course building something that isn't completely worthless.
aha i dont know anything about js, i need to learn it
How would you go about doing the following:
When you click on the icon to bookmark, the extension popup opens automatically? no need for you to go all the way to the icon and click it?
hi....did you get solution to this prb?
Nice tutorial, I was looking for such a video for a while. Thanks for your content 😍🤩
Hi and thanks for that tutorial, it's very interesting and instructive.
However there's one thing that let's me a little perplexed : if I understand it right, the sole purpose of your background script is to uselessly transmit in a complicated way the tab's page url to the content script ??? because so far I can achieve this with the classical and much more simple document.URL property directly inside the content script.
how to debug during development if things don't work out as expected?
I did code along with this tutorial, but actually the code is not working, it is not adding timestamps to extension
You can see in the console that it is adding timestamps on click of the Plus icon. It just fails to make them appear in the list when you click the extension. I am sure the author could be able to fix this if he really wanted, but it seems he is too preoccupied with something else. Let's hope he can find the time soon, or someone else with the know-how help us out.
Use the chrome debug tools to see where it might be going wrong. Any errors that you're getting?
@@timislaw5710 I didn't get any errors, the bookmarks still didn't show up in the list. Does it work for you?
@@frodelius sorry haven't tried. I figured if you used the chrome dev debugger and go step by step you might find the issue
Correct getTime arrow function:
const getTime = t => {
var date = new Date(0);
date.setSeconds(t);
return date.toISOString().substring(11, 19);
}
Injection approach would not work on many single page applications, the injection would be removed. It's better to use mutation observers for injection management.
Is it possible to make Firefox extension
I'm using this because one of my homework's is not accessable. Tab and enter don't work, pasting is horrible, and I have friends with problems relevant.
It would be helpful to know what IDE you're using; if you're new enough to watch this video, you're probably not going to know what IDE to choose.
can u make Sid and hsid cookies sir?
love it, thanks for making this video
This is the thing i wanted from such a long time
Not at all intuitive, jus talking
Something I've wanted to do
I want to create an extension that downloads chatgpt response in pdf file. Additional features may include enabling user save pdf to preffered place of choice in preffered document type e.g. word instead of pdf
This is gonna make me some good money.
After much research, selected this as my first tutorial on Chrome Extension Development. Turned out great! The only problem I faced initially was the error "Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist."
Was not easy to find a solution. Finally, what worked is open a new Chrome window after reloading the extension. None of the solutions on Stack Overflow mentioned that.
Another thing that should be made clearer in the video is how do you bring up the Console for the Background service worker. The video is too quick and it is difficult to see this part. Finally, turned out, you can do that from the Manage Extension itself. To see log of the Content script, use the regular browser Developer Tools.
Great video!
How would you do something like grab all of the URLs from the tabs in the active window, and paste them to your clipboard with "
" in-between each URL?
thanks for letting us watch you build an extension, now wheres the tutorial for beginners?
Learn the basics of JavaScript and html first before trying to learn how to build an extension.
@@qedro i have done now my friend, thanks. Got first job as a developer too.
@@Elgrecos Kudos to you then, friend :)
It confuse a bit that you show videos with code, it was better if you used something completely unrelated. Other thing is you mess around but do not explain what components do and how they play together, I thing you do a bit of this when you explain that the manifest when the url match, inserts and executes the contentScript in the context of the web page, it had been nice if you explain later what role the background script plays and how the event passing works. But well, you can make another video with more clear explanation.
I guess there it is... sneakyness and being high be having ppl thinking they walked on the moon 😭 getting disgusting 😂 I'm let the lord take the custody 😭
I want to share with you guys the Human Auto Typer of Undetectable AI and its a new released chrome extension
In the part where we send the message using chrome.tabs.sendMessage() and add the event listener with chrome.runtime.onMessage.addListener() I keep getting the same error:Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist
Any idea why it's happening?
I have the same issue, have you found a solution ?
@@franck4690 Add this to the content_scripts part of the manifest file: {
"matches": ["*.youtube.com/*"],
"js": ["contentScript.js"],
"run_at": "document_start"
}
@@franck4690 Actually I think I just got it to work without the other part I suggested above. Just change addListener function's callback parameters to (tabId, changeInfo, tab).
So basically just adding changeInfo in between tabId and and tab. I think that was fucking up it's ability to send the message to the content script.
scrimbaaa i neeed refund
Thank you. I learned a lot, this cover many things!
what chrome extension i want to create a extension through which i can place buy sell orders while i am doing analysis in the tradingview charting website with a 3 sec timer to cancel (optional) and also info about the position i have taken, without switchin logging moving too much . well need to figure it out how to do it just started the course so hopefully built it in 30 days
Was waiting ❤️
i want to make a chrome extension in which i can freely zoom in x-axis or y-axis of a website independently or individually. specifically, i am currently unsatisfied with the UI of g-calendar and thus want to vertically zoom in on the page without horizontally zooming in.
i hope such type of chrome extension can be made, isn't it?
this is a beginners question im sure but when i click on loadunpack, it doesn't see any of my files which i created in dreamweaver..ie js,json,css,html , nothing...help please
Solid js course please
Thank you M.r
will it work in safari browser as well?