How To Build A Chrome Extension (2020 Web Development)
Ever wondered how a Google Chrome extension is built? As a Javascript Web Developer, it's good to be well-rounded. Creating an ecosystem of products for your customer improves your portfolio power. Improving your portfolio power, increases your business and revenue.
??? IMPORTANT NOTICE ??? Our Teachable Chrome Extension Development courses have launched!
We have courses for all skill levels. Whether you're completely new to Web Development or want some Starter Projects to help you sharpen your skills, we have you covered. Check us out at: https://anobject.teachable.com/
Use CODE: ANOBJ for a 20% discount on participating courses.
For all programmers, the idea of 'State' can be a tricky one.
Web Developers deal with state all the time.
This is doubly true when developing pages or apps with ReactJS.
State is one of ReactJS' strongest selling points.
State is the condition that something is in at a given point in time.
To manage 'state' in ReactJS, we use classes and hooks.
This video will focus on classes.
State can change.
State can be quantified.
State can be measured at any time.
Setting Up a Basic ReactJS App: lbry://@an_object_is_a#7/compressed---reactjs-how-does-reactjs-work#9
Javascript Arrow Functions: lbry://@an_object_is_a#7/js_beginners_traditional_function_vs_arrow_function_basics#e
Thanks to https://pngimage.net/dr-manhattan-png-2/ for Dr. Manhattan.
Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7
If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK
Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a
??? IMPORTANT NOTICE ???
Our Teachable Chrome Extension Development courses have launched!
We have courses for all skill levels.
Whether you're completely new to Web Development or want some Starter Projects to help you sharpen your skills, we have you covered.
Check us out at: https://anobject.teachable.com/
Use CODE: ANOBJ for a 20% discount on participating courses.
CREATE CHROME EXTENSIONS USING REACTJS: https://odysee.com/@an_object_is_a:7/chrome-ext-build-with-reactjs:7
How a Chrome Extension Works: https://odysee.com/@an_object_is_a:7/compressed-creating-a-chrome-extension:e
Bypass the need for dealing with your customer's sensitive passwords. Go straight to their email with a passwordless authentication system.
No need for your customers dealing with dozens of passwords.
Personally, I love this solution to user authentication in web development.
It puts the sensitive work on the customers and their email provider's end.
We'll start by creating a server to use for authentication.
We'll go through the process of sending and validating JWT(JSON Web Tokens).
Then we'll finish by incorporating this server into our Google Chrome Extension business logic.
Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/c/anobjectisa
Subscribe to my odysee: https://odysee.com/@an_object_is_a:7
If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK
Cardano (ADA): Ae2tdPwUPEZHifkCDEM8BVLoKULwNkLuj7NC9dVbtdQhCVuFVxsAKUpJsZF
Transform a simple React webpage into something special by making parallax elements.
We'll start with a basic webpage.
Then we'll use our React JS Parallax solution to add dynamic movement to our page.
ReactJS Parallax Solution: https://odysee.com/@an_object_is_a:7/comp-react-parallax-sys:a
??? IMPORTANT NOTICE ???
Our Teachable Chrome Extension Development courses have launched!
We have courses for all skill levels.
Whether you're completely new to Web Development or want some Starter Projects to help you sharpen your skills, we have you covered.
Check us out at: https://anobject.teachable.com/
Use CODE: ANOBJ for a 20% discount on participating courses.
--------------------------------------
???For the source code, check out our article???
https://anobjectisa.com/?p=365
Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/c/anobjectisa
Subscribe to my odysee: https://odysee.com/@an_object_is_a:7
If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK
Cardano (ADA): Ae2tdPwUPEZHifkCDEM8BVLoKULwNkLuj7NC9dVbtdQhCVuFVxsAKUpJsZF
Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a
In Phase 2, we'll build the entire UI of our app.
This is part of a series of videos where we build a Cyberpunk 2077-inspired Spotify Music controller that can be embedded in a user's browser.
They'll be able to play/pause, navigate to the next/previous track, and hide the player.
All of this done with ReactJS, Google Chrome, and the Spotify API.
??? IMPORTANT NOTICE ???
Our Teachable Chrome Extension Development courses have launched!
We have courses for all skill levels.
Whether you're completely new to Web Development or want some Starter Projects to help you sharpen your skills, we have you covered.
Check us out at: https://anobject.teachable.com/
Use CODE: ANOBJ for a 20% discount on participating courses.
-------------------------------------------------------------------------------------------
??? Check these out... ???
How Chrome Extensions work:
https://odysee.com/@an_object_is_a:7/compressed-creating-a-chrome-extension:e
Merge React and Chrome:
https://odysee.com/@an_object_is_a:7/chrome-ext-build-with-reactjs:7
???For the code, check out my Medium article???
https://anobjectisa.medium.com/build-an-8-bit-spotify-controller-phase-2-b61498686beb
Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/c/anobjectisa
Subscribe to my odysee: https://odysee.com/@an_object_is_a:7
If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK
Cardano (ADA): Ae2tdPwUPEZHifkCDEM8BVLoKULwNkLuj7NC9dVbtdQhCVuFVxsAKUpJsZF
Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a
A couple videos back I also showed you how to use JS in a REPL.
JS code in a REPL isn't permanent though.
...so how do we permanently inject JS into our page?
where does the JS go?
"in-tag" and "in-line"...
Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK
Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a
The glsl OpenGL mix() function allows us to move from one value to another in steady, identical increments.
From value 1 to value 2...we call this interpolation.
Going from one point, A, to another point, B in predictable, steady, identical beats.
We can influence how the colors get mixed by weighting the with a third variable; we'll call a weight.
A Basic Fragment Shader: lbry://@an_object_is_a#7/opengl_glsl_fragment_shaders_glsl_and_our_environment#6
How Does The Color Of A Pixel Get Calculated: lbry://@an_object_is_a#7/opengl_fragment_shader_one_pixel_one_color#9
Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7
If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK
Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a
The second part in what is probably the most important topic in this beginner series.
Normalising.
To be clear, I think "min-max" normalising is taking place. You can find out more here: https://www.youtube.com/watch?v=LRxStPgTm8U
This series is based off of the free on-line book, "The Book Of Shaders", by Patricio Gonzalez Vivo and Jen Lowe.
https://thebookofshaders.com/
Our Editor: https://patriciogonzalezvivo.github.io/glslEditor/
If you feel like donating, please donate to those two; a donation link is found on their website linked above.
End Music: ibrahim - lovely whisper (w/ Waifu Avenue)
Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7
If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK
Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a
JSON or Javascript Object Notation is not difficult to understand. It's just a way of normalizing the way data is packaged, so when you send
that data to someone or something else--front-end or back-end--they know what they're getting.
This is vital to how modern data is packaged...non-relational databases like MongoDB are built on the idea of Javascript objects...
Why is data modelled after Javascript objects?
Key, value pairs are a powerful way of configuring complex data-types into one moveable unit, that's why.
Get the Brave Browser! : https://brave.com/ano648 ❤️ (referral link)
Get You-to->Bit! : https://bit.ly/2H3Ixml ❤️
Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/channel/UCar-9GMCRk9QdKJXq6s1yeg/
Subscribe to my lbry: lbry://@an_object_is_a#7
If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK
Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a
??? IMPORTANT NOTICE ???
Our Teachable Chrome Extension Development courses have launched!
We have courses for all skill levels.
Whether you're completely new to Web Development or want some Starter Projects to help you sharpen your skills, we have you covered.
Check us out at: https://anobject.teachable.com/
Use CODE: ANOBJ for a 20% discount on participating courses.
CREATE CHROME EXTENSIONS USING REACTJS: https://odysee.com/@an_object_is_a:7/chrome-ext-build-with-reactjs:7
How a Chrome Extension Works: https://odysee.com/@an_object_is_a:7/compressed-creating-a-chrome-extension:e
Spotify Dev Console - https://developer.spotify.com/dashboard/
Spotify Scopes - https://developer.spotify.com/documentation/general/guides/scopes/
Spotify Implicit Grant - https://developer.spotify.com/documentation/general/guides/authorization-guide/#implicit-grant-flow
Spotify Web API - https://developer.spotify.com/documentation/web-api/
If you need a secure login system for your Chrome Extension, but you don't want to or don't know how to create all of the necessary gear--authentication servers, databases...---you can use the OAuth2 protocol to create one for you.
We'll use Spotify's OAuth2 "authorization" to create "authentication" for our login system.
We'll need to make it secure ourselves. I'll show you how.
We'll first head on over to the Spotify's Developer's console to get ourselves an OAuth2 Client ID, then we'll start building a login system.
Subscribe to my Bitchute: https://www.bitchute.com/channel/gPUmRsVcChxX/
Subscribe to my Youtube: https://www.youtube.com/c/anobjectisa
Subscribe to my lbry: lbry://@an_object_is_a#7
If you find value in what I do, think about supporting my channel:
Paypal: https://www.paypal.me/anobjisa
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK
Cardano (ADA): Ae2tdPwUPEZHifkCDEM8BVLoKULwNkLuj7NC9dVbtdQhCVuFVxsAKUpJsZF
Find me here:
Twitter: https://twitter.com/anobjectisa1
Minds: https://www.minds.com/an_object_is_a/
Instagram: https://www.instagram.com/an_object_is_a