Coding Challenge 4 Extensions In 2 Hours - How to build a Chrome Extension

Поделиться
HTML-код
  • Опубликовано: 11 сен 2024

Комментарии • 96

  • @anathosity
    @anathosity 3 года назад +5

    gotta be one of the best chrome extension tutorials out there thank u so much

  • @SURESHKUMAR-bq8ho
    @SURESHKUMAR-bq8ho 3 года назад +4

    why this channel have too less number of subs. ? I think he deserve more

  • @satyapavanlokesh9692
    @satyapavanlokesh9692 3 года назад +1

    bro i am from India, this is the awesome video.... keep going on like this...

  • @TheRealKitWalker
    @TheRealKitWalker Год назад

    Great and very helpful video dude. Thanks so much

  • @10raju09
    @10raju09 Год назад

    Loved the tutorial... Thank you so much 🙂

  • @rshxrma
    @rshxrma 2 года назад +1

    0:03 When you actually had a goal of 5 Extensions in 2 Hours but ended up with only 4* 😂

  • @jozsefszabados1183
    @jozsefszabados1183 2 года назад +1

    Really cool video , thanks!!!
    But I am not sure about these error : itemsArr.push({"item":itemName , "status":0});
    I uploaded your source code as well, and I'm still getting the error message : Uncaught TypeError: Cannot read properties of null (reading 'push')
    Could you please help me!

  • @ShubhamSingh-it4om
    @ShubhamSingh-it4om Год назад +1

    Anyone implemented web scrapper extension using manifest version 3?
    Or using react js with manifest version 3?
    Kindly provide source code, I am facing some issue.

  • @subhambhadra1803
    @subhambhadra1803 2 года назад

    good work.... keep it up

  • @user-oj5gu3zd6u
    @user-oj5gu3zd6u Год назад

    cool content!👏

  • @leocraig4658
    @leocraig4658 2 года назад

    The source code for the popout todo list doesnt work anymore, why is this?

  • @silitome3086
    @silitome3086 2 года назад +1

    What's your IDE and note program?

    • @RustyZone
      @RustyZone  2 года назад

      For Notes I use Notion ( notion.so/ ) and the IDE here was Atom often use either VS Code or Atom for recording 😀

  • @user-fs4vy4gz6e
    @user-fs4vy4gz6e Год назад

    on the scrapper extension, is there a way to prevent it to delete all the infos that submitted when we add a new column?

  • @reshmajayan599
    @reshmajayan599 2 года назад

    I am getting console error as : Uncaught TypeError: chrome.runtime.sendmessage is not a function.Could you please help me out

  • @lewislebentz9418
    @lewislebentz9418 3 года назад +2

    Do you have the source for the Word of the Day extension, with the API code added in?
    I'm trying to figure out if it's possible to for example grab a value from an external page, every time the user opens a new tab, but all in the background. I didn't think it was possible due to CORS.

    • @RustyZone
      @RustyZone  3 года назад

      I should still have it I’ll check today and reply to this thread with a link when I find it.
      Also CORS problems can be avoided if the server you call is setup to accept requests. In this video I connect up the api for the word of the day extension: ruclips.net/video/7Tu2j2pc87I/видео.html

    • @RustyZone
      @RustyZone  3 года назад +1

      Here is the updated code including the api call: github.com/rustyzone/world-of-the-day-with-api-call

  • @abhigyansharma9108
    @abhigyansharma9108 3 года назад +1

    I am a beginner i have done a bit of javascript but I will not be able to write all of this code on my own.. Am i supposed to know the entire ? Please tell how are you thinking and you have improved What all i can do I was thiking to put one of this extension project in my resume projects .. But even to do list seems to be complicated to me.... Please suggest how to improve JS.. I am not able to stepp into React because of this

    • @RustyZone
      @RustyZone  2 года назад

      Hey, I would suggest to just keep working on smaller projects and different areas of JavaScript and take your time. It will all start to make sense the more you work with things, same with react as well its just the same process but everything feels more familiar the more time you spend on and around it. But I know the feeling at the start, stick in there you can do it! :)

  • @moulyaramesh6069
    @moulyaramesh6069 3 года назад +1

    Hi Rusty, I followed the todo list extension, But i am facing a difficulty. The input i give is not getting displayed . Please help
    When i console log the saveItems and fetchItems function i get undefined. Is that fine?

    • @RustyZone
      @RustyZone  3 года назад +1

      Hey 👋 could you share the code you have so far with me either via email or twitter? would be happy to look into this and see what is causing the problem.

    • @moulyaramesh6069
      @moulyaramesh6069 3 года назад

      @@RustyZone Thank you Rusty for the response. Actually i figured about, was passing the variable name wrong. Now its working. And good content!!

  • @wafflewafflewaffle
    @wafflewafflewaffle 2 года назад

    @Rusty Zone I am very interested in web scrapers, but seems like a lot of websites have ways to prevent it. A video explaining all of that would be useful.

    • @digitalfinancialmarket
      @digitalfinancialmarket Год назад

      Web scrapers can act similar to malicious bots, prompting many anti-spam plug-ins to block the inquiry. You can sometimes get around this by using a designated bot such as an SEO spider like Screaming Frog

  • @danielsessions3099
    @danielsessions3099 3 года назад +2

    Hi Rusty. Great video! Do you know how to open a URL in the extension popup.html in the current tab? My URL always open in a new tab. Thanks

    • @RustyZone
      @RustyZone  3 года назад

      Yes you can do this using the code linked below, just change the url to the page you want to open & it should change the current active tab behind the popout. (Ideally have this code run from within a JS file included in popout.html or onMessage from your background page / service worker)
      gist.github.com/rustyzone/d6b611122a7cc361e8154630048869aa

  • @SreevathsaBV
    @SreevathsaBV 3 года назад +1

    HI Rusty, Thanks for the video again. It was of great help. Could you show us how we can securely connect and exchange data b/w chrome extension and our database like MySQL ?

    • @RustyZone
      @RustyZone  3 года назад +1

      Thanks for the feedback! :) - Yes for sure, I'd recommend using some type of intermediary here between the extension and your DB basically an API, such as a Lambda function which you make requests to and that can then query your DB - but yes can make a video on this 👍

    • @SreevathsaBV
      @SreevathsaBV 3 года назад +1

      @@RustyZone Agreed, will wait for the video soon :) thanks

  • @gurkiratsingh2063
    @gurkiratsingh2063 Год назад

    Dude if ur seeing this comment, plz make videos using version 3 of the manifest. becoz now the html files are not supported on background services only js files . Plz consider the REQ.

    • @RustyZone
      @RustyZone  Год назад

      This video might be useful here ruclips.net/video/-aY4d5JBVnc/видео.html
      Also planning a similar video like this with new extensions for MV3 :)

  • @chazcarothers135
    @chazcarothers135 3 года назад +1

    YOU'RE AWESOME FOR THIS, RUSTY THANK YOU!!!
    I'm doing "Word of the Day" but I get "Uncaught TypeError: Cannot read property 'sendMessage' of undefined" when I run my code in Console. Any help will be appreciated, thanks!

    • @RustyZone
      @RustyZone  3 года назад

      Can you share an example of the code you are using? :)

  • @brianhaley1831
    @brianhaley1831 2 года назад +1

    great video - i really learned a lot quickly. only problem i have is that chrome doesnt load the contentScript for me on the Scraper. it all goes swimmingly well, but pressing "run" does nothing further. I checked the DevTools sources, and there is nothing listed in the content scripts. I downloaded your files too (thanks), and same thing. Any ideas why?

    • @RustyZone
      @RustyZone  2 года назад

      Hey Brian thanks for the message, I'll take a look into this sounds like an update in Chrome has conflicted somewhere here.

    • @RustyZone
      @RustyZone  2 года назад

      I was trying to replicate the issue but it worked for me, could you send a www.loom.com recording perhaps? My email is rz.rustyzone@gmail.com
      Just a thought were you on a chrome page e.g settings pages, extension setting page? as it would not be able to use the content script at this point, but normal urls should not have an issue.

  • @amritraj658
    @amritraj658 3 года назад +1

    How you enable inline Eventlistner I'm chrome extension ?

    • @RustyZone
      @RustyZone  3 года назад

      Hey Amrit, you can do this in the same way you would for a normal js file, by inline do you mean to have something like.... as this would instead have to be more like:
      var element = document.querySelector('input');
      element.addEventListener(.....
      More info on these types of events here: developer.mozilla.org/en-US/docs/Web/Events/Event_handlers
      Is this what you have in mind?

  • @indianappguy
    @indianappguy 3 года назад +1

    please add course on udemy as well

    • @RustyZone
      @RustyZone  3 года назад +1

      Hey, for sure yes i'll look into adapting this for Udemy as well 👍

    • @RustyZone
      @RustyZone  3 года назад +1

      This is now live on Udemy as well :)
      P.s Just seen your channel looks great & nice growth! Any tips you could share on where I can improve?

    • @indianappguy
      @indianappguy 3 года назад +1

      @@RustyZone initial traffic via facebook groups, i tried reddit, but not much i focus on fb group and rest is youtube organic which will take time

  • @ram8551
    @ram8551 3 года назад +1

    Hi Rusty. Thank you for the tutorial. I am new to programming and would like to ask why do you use var instead of let? I ask because I learned from a few tutorials that you shouldn't use var anymore. Is there a particular reason you use var?

    • @RustyZone
      @RustyZone  3 года назад

      Hey 🙂 it’s mostly just a habit from when I first learned JavaScript years ago, main difference between them is the scope of each but even then that is not a good way to do things. I’d usually read through my code after after writing and switch out the var for let and tidy up but yes great question!

    • @ram8551
      @ram8551 3 года назад

      @@RustyZone I see! Thank you for your response! :)

  • @deepakms5918
    @deepakms5918 3 года назад +1

    Hi sir , recently created a dom manipulation extension for all url, but I can't manipulate gmail interface & whatsapp web why ?

    • @RustyZone
      @RustyZone  3 года назад +2

      Hey, it sounds like this is a timing related issue. Gmail and WhatsApp both load in and replace the DOM after the page has loaded so you would need to wait a certain amount of time before running your DOM changes as it may get overwritten. For Gmail an SDK like this (www.inboxsdk.com/) can help but otherwise is can be a matter of polling the page for a certain className or element and then running an init function for example now that the page should be loaded. - Hope this helps :)

    • @deepakms5918
      @deepakms5918 3 года назад

      @@RustyZone thanks sir ,for your quick reply 😀😀🥰

    • @umairisrar513
      @umairisrar513 3 года назад +1

      Yes what you can do is just write a function that waits for particular DOM element on which you need to perform action e.g use setInterval or setTimeout p.s don't forget to clear the interval otherwise your DOM operation would be heavy

  • @amolasodekar93
    @amolasodekar93 3 года назад +1

    Hi Rusty. I like your extension of scrapper. We need to capture/grab all images tags from page & current tab url and want to show on popup page. could you please guide me.

    • @RustyZone
      @RustyZone  3 года назад

      Hey Amol, Great to hear! :) To grab all of the images of the page I would suggest to start with this:
      var imgs = document.querySelectorAll('img');
      Which will select all img tags form the page, from here you can loop through and include in the message event back to the popout page.

    • @amolasodekar93
      @amolasodekar93 3 года назад

      @@RustyZone Thank you so much :)

    • @amolasodekar93
      @amolasodekar93 3 года назад +1

      @@RustyZone sorry nothing is coming in imgs variable. count is 0.
      manifest.js
      {
      "name": "Grab Images",
      "description": "Get images from sites",
      "version": "2.0",
      "permissions":[
      "activeTab",
      "tabs"
      ],
      "browser_action":{
      "default_title": "images/puppy.png",
      "default_icon": "images/chrome-extension.png",
      "default_popup": "popup.html"
      },
      "manifest_version": 2
      }
      popup.html
      GrabIt extension


      popup.js
      var imgs = document.querySelectorAll('img');
      alert(imgs.length);
      for(i=0;i

    • @RustyZone
      @RustyZone  3 года назад

      For this we need to have the code you have here for popup.js inside a content script so that this can run on the page itself as at the moment its only checking for images inside popout.html 🙂 once its in a content script we send a message which the popup page can listen for. If you start with the code form the webscraper (there should be a link in the description) it should be possible to adjust to add a method in there to select images like this.

  • @arpitsharma8019
    @arpitsharma8019 Год назад

    hi rusty
    this error is showing in the web scrapper
    Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
    pls tell what could be the possible actions i take

    • @RustyZone
      @RustyZone  Год назад

      This usually is when the context is different either the page does not have the content script injected (the tab is old), the background/service worker refreshed etc.. few ways you can avoid this but this are the main reasons this error could show.

    • @arpitsharma8019
      @arpitsharma8019 Год назад

      @@RustyZone thanks, i found your migrating videos from mv-2 to 3 . Really great work

  • @cyrinebouaziz815
    @cyrinebouaziz815 3 года назад +2

    Hi Rusty thank you for this interesting video ! I am new to programming and I am developing a chrome extension that gathers data from the browser and returns performance metrics in the console . Is there any method to return this data in a csv, xml or json format each time I load the page in order to store it in a database ? Thank you !

    • @RustyZone
      @RustyZone  3 года назад +1

      Would this be to download the data as a file in this format, As you could do that something like this: gist.github.com/rustyzone/601f12008bdabaf495241e0c54d15748
      Or would this be to then take the data as json / csv or xml and submit this to a database somewhere directly?

    • @cyrinebouaziz815
      @cyrinebouaziz815 3 года назад +1

      @@RustyZone It is the second alternative.( I want to store this data in a database but i need first to put my data in csv /xml or json format.)

    • @RustyZone
      @RustyZone  3 года назад +1

      To help suggest the best move forward here can you share the current format of the data in the console? Also is there a certain database you would like to use?
      The fastest method to convert your data into JSON could just to take the variable and run it like this e.g .... var newJSON = JSON.stringify(variableofData);
      This will then convert it into a JSON string ideal to then upload to your database ( developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify )

    • @cyrinebouaziz815
      @cyrinebouaziz815 3 года назад +1

      @@RustyZone Thank you for your response ! The format of data in my console are objects and my database is a relational database (MySql).

    • @RustyZone
      @RustyZone  3 года назад

      Okay awesome, do you currently have a backend that you use to connect to your database or just the database admin panel?
      If you have a backend all we will need to do is send a “fetch” post request from your extension with the data after converting to json using the JSON.stringify method.
      If you don’t have a backend, depending on where your database is hosted you could use a Lambda function which will accepts requests from your extension and then connect to your database or you can create a simple backend on the same server that hosts your database (depending on the setup of the server you are using)
      More details on fetch here: developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

  • @quinng
    @quinng 2 года назад +1

    Hi Rusty, I'm new to coding and trying to get the definition of the word from the API- essentially this part in the API snippet ("text"):
    "definitions": [
    {
    "source": "ahd-5",
    "text": "A funnel.",
    "note": null,
    "partOfSpeech": "noun"
    },
    {
    "source": "ahd-5",
    "text": "A container for pouring molten metal into a mold, having holes in the bottom to prevent splashing.",
    I can't seem to figure it out after trying quite a few things. Any help would be appreciated.

    • @RustyZone
      @RustyZone  2 года назад

      The first step it to convert into an object from json e.g
      const myObject = JSON.parse(json-string-here)
      Now you can access the content so in this context to access the first text, value in the definitions array thats:
      myObject.definitions[0].text
      Example here: gist.github.com/rustyzone/3c2215301864b0181a684a15cb57c8a2

  • @the100dollarhustleold
    @the100dollarhustleold 2 года назад

    Hello Rusty, I wish I can understand this video but I am pretty new to coding and just learning HTML. I was hoping to see a learning path to being a chrome extension developer. Could you or anyone else help me with this? Thanks

    • @devtopia_
      @devtopia_ 2 года назад

      It's pretty similar to web dev. As long as you learn the basics of web dev (html, css, js) and read a little of the chrome extension docs you're pretty set.

  • @mojave3885
    @mojave3885 3 года назад

    Can you use this to create bots, like a vaccine bot

  • @Noobinski
    @Noobinski 2 года назад +1

    Is your code still good in mid 2022?

    • @RustyZone
      @RustyZone  2 года назад +1

      Hi Erik, this video is using manifest v2 which can't really be used anymore at least in new extensions (and existing extension will no longer be able to use this from January 2023 onwards )
      I have a new video coming soon with an updated template for building extensions with MV3, but any of the newer videos should show the differences here for example: ruclips.net/video/29dmxQ9QQ4o/видео.html

    • @Noobinski
      @Noobinski 2 года назад +1

      @@RustyZone First let me thank you for all your input here. It is great content well put together and worthwhile to join in on. Nevertheless might I, just carefully and only with the big toe, regard this tutorial/showcase as kind of malicious the more time passes? I built a combination of your toto list and the web scraper and it does not work. Not fully.
      Manifest V2 is still working, yes. But no one in their right minds would help me out fixing the thing. "First go to V3, then let's see if there are still problems" would be the reaction, expecially by people who know their stuff.
      Don't you think a workover is due? Maybe just a short one? Or if you insist, you could talk about scopes (background, foreground, service workers) a little bit more, or permissions, or manipulation the dom or maybe even all of it?
      I say: Talk more. You did/do it elswhere, I know. But do it here, too! Talking here is best!
      And if you startet it, then you are legally bound to finish it. I am sure you got the memo, didn't you? It was all over the tech news!
      Come ooooooooon... :D

    • @RustyZone
      @RustyZone  2 года назад +1

      Great point I completely agree! The landscape of extensions has changed so much in the last 12/18 months that a complete overhaul with new videos is required & perhaps deleting or at least updating the description on all of these older videos to reference the new ones.
      As soon as I have a decent amount of time I’ll be sure to record and update these as I do agree these older ones especially can be a bit misleading now & that is the last thing I want this channel to be.

    • @Noobinski
      @Noobinski 2 года назад +1

      @@RustyZone That truly sounds splendid.
      Would you meanwhile be able to suggest some best friends of yours or sth like that, doing similair tuts, just vor V3? I do not expect theirs to be as comprehensive and stylish as yours, of course. Just another ressource you could recommend for getting the start on in the meantime?

    • @RustyZone
      @RustyZone  2 года назад

      There are not too many other channels with content out there on focused MV3 but there will be some videos here & there - in terms of channels i'd recommend -> ruclips.net/user/JackandAmyDev would be one of the best, not sure if they have any new videos recently.
      Hopefully will see more creators in this space soon 😃

  • @shivankbhardwaj3074
    @shivankbhardwaj3074 2 года назад

    in line 17, my IDE says push is not a function? plz help

    • @shivankbhardwaj3074
      @shivankbhardwaj3074 2 года назад

      I got the solution, just understood parse and stringify properly, thats it

    • @dshah__
      @dshah__ 2 года назад +1

      im getting the same problem right now, how did you fix it?

    • @shivankbhardwaj3074
      @shivankbhardwaj3074 2 года назад

      @@dshah__ tried watching other videos, unnderstand objects in JS ,then you will move ahead.

  • @goldeneagle8259
    @goldeneagle8259 3 года назад

    Hello. I want to write a Pinterest downloader extension. The issue is when downloading big boards containing like 15,000 pins. The pins are loaded while I scroll the page, so it needs to download them at the same time. Can you give some ideas how to implement this?

    • @RustyZone
      @RustyZone  3 года назад

      Hey, thanks for the question. How this type of extension I would recommend showing a message to the user to have some type of button to continue fetching the next page which would trigger to scroll down perhaps. Almost like having a first run with the data that is present on the page once that is complete show this info to the user. - I have not used Pinterest before but depending on the way the page loads it may be possible to inspect the page to see if there is any json or api data you can use to help improve the speed of the extension fetching this data as well.

    • @goldeneagle8259
      @goldeneagle8259 3 года назад

      I will try this. Thanks.

  • @ShivangiSingh-wc3gk
    @ShivangiSingh-wc3gk 11 месяцев назад

    Can someone explain to me the inline error?

  • @user-pj1py7qc7w
    @user-pj1py7qc7w 6 месяцев назад

    what is a quick fix for: "Manifest version 2 is deprecated, and support will be removed in 2024."

  • @MaximeDriay
    @MaximeDriay Год назад

    Your scripts are hard to migrate to v3 :( Nice job anyway

  • @andrewvu712
    @andrewvu712 2 года назад

    0:50

  • @riteshpatel-yz7rd
    @riteshpatel-yz7rd 3 года назад +1

    How to build python web scraping chrome extension.

  • @aaryan3461
    @aaryan3461 2 года назад

    If youre going to copy paste everything why even bother making a tutorial?

  • @saunaknandi1814
    @saunaknandi1814 3 года назад

    ur video is confusing me

    • @RustyZone
      @RustyZone  3 года назад

      Is there any part of the video I can help with? Always want to try and make the content more helpful! :)