Creating A Chrome Extension Using AI & Zero Coding Knowledge
Summary
TLDRThe video script details a step-by-step guide on creating a Chrome extension that automates the process of sending a webpage's URL to an Airtable database. The presenter uses various AI tools, primarily Perplexity, to navigate through the development process, troubleshoot issues, and optimize the extension. The journey illustrates the iterative nature of coding, the utility of AI in problem-solving, and the satisfaction of achieving a functional end product. By leveraging AI, the presenter successfully overcomes challenges such as deprecated API keys, manifest file errors, and security features, culminating in a streamlined automation that enhances workflow efficiency.
Takeaways
- 📝 The video is a tutorial on creating a Chrome extension using AI tools like Clap, Chat GPT, and Perplexity to automate sending the current page URL to an Airtable database.
- 🔍 The creator uses different AI tools to overcome various challenges encountered during the development process, emphasizing the importance of using multiple AI tools together.
- 💡 The process involves creating a manifest.json file, which is the backbone of a Chrome extension, and troubleshooting issues that arise during development.
- 🛠️ The video demonstrates the use of Visual Studio Code for coding and organizing the Chrome extension files, highlighting the necessity of a code editor for development.
- 🔗 The importance of correctly identifying and using the base ID and table ID from Airtable is discussed, as well as the transition from API keys to personal access tokens.
- 🚀 The tutorial shows how to use AI to find and implement necessary code snippets, like the popup HTML and JavaScript files, directly into the project.
- 🤖 AI tools are shown to be capable of understanding and addressing specific errors, with the video including examples of AI-assisted troubleshooting.
- 🛡️ The video addresses the need to update the manifest version from two to three and to include permissions for cookies in the manifest file for the extension to work correctly.
- 🔄 The process of iterating and testing the extension is emphasized, with the creator showing the trial-and-error aspect of development and the satisfaction it brings once the extension functions as intended.
- 📌 Tips are provided for interacting with AI tools, such as taking screenshots to share errors and clearing previous conversation threads for clarity.
- 🗒️ The video concludes with a successful demonstration of the Chrome extension working, with the URL being sent to Airtable and triggering automations.
- ✅ The creator emphasizes the transformative potential of such an extension for streamlining automation workflows and the value of learning through the process of creation.
Q & A
What is the main purpose of the Chrome extension being built in the video?
-The main purpose of the Chrome extension is to send the URL of the current page to an Airtable database, which is used to streamline the process of creating video scripts and automate various tasks.
Why does the video presenter want to use an AI tool to build the Chrome extension?
-The presenter wants to use an AI tool to build the Chrome extension to automate the process of sending URLs to Airtable, which would otherwise be time-consuming by manually copying the URLs.
What is the first step in creating the Chrome extension according to the video?
-The first step is creating a folder called 'boa Grabber' and then creating a 'manifest.json' file, which is the foundation of what Chrome extensions run on.
Which program does the presenter use to put together the code for the Chrome extension?
-The presenter uses Visual Studio Code (VS Code) to put together the code for the Chrome extension.
What kind of issues does the presenter encounter during the process of building the Chrome extension?
-The presenter encounters issues such as the 'manifest.json' file failing to save, needing to find the correct base ID for the Airtable, and dealing with deprecated API keys in favor of personal access tokens.
How does the presenter use AI tools to troubleshoot problems encountered during the extension development?
-The presenter uses AI tools like Claud, Chat GPT, and Perplexity to get code snippets, understand errors, and find solutions to issues like deprecated API keys and missing permissions in the 'manifest.json' file.
What is the role of the 'background.js' file in the Chrome extension?
-The 'background.js' file contains the JavaScript code that runs in the background, handling the logic for sending the current page URL to the Airtable database.
Why is the 'manifest.json' file important for the Chrome extension?
-The 'manifest.json' file is crucial as it provides important information to Chrome about the extension, such as its version, permissions, and how it should behave.
What is the significance of using 'personal access tokens' instead of deprecated API keys?
-Personal access tokens are a more secure and personalized way to authenticate with Airtable's API. They replace the deprecated API keys and allow for more granular control over what the extension can do within Airtable.
How does the presenter ensure that the Chrome extension is working correctly?
-The presenter tests the extension by trying to send a URL to the Airtable database and checks for any errors or feedback within the extension popup and the browser console.
What is the presenter's final step in ensuring the Chrome extension works as intended?
-The final step is to update the 'manifest.json', 'background.js', and 'popup.js' files with the correct base ID and other necessary code corrections, then reloading the extension in Chrome and verifying that the URL is successfully sent to Airtable.
What does the presenter suggest as a tip for dealing with images or screenshots in AI tools like Perplexity?
-The presenter suggests deleting the previous conversation thread when adding images or screenshots in Perplexity to avoid confusion and ensure that the AI tool addresses the current issue without being distracted by older content.
Outlines
😀 Introduction to Building a Chrome Extension with AI Tools
The speaker introduces the video's purpose, which is to demonstrate how to use AI tools like 'claw chpt perplexity' to create a Chrome extension. The extension's goal is to send the current page's URL to an Airtable database, automating a task that the speaker finds time-consuming. The process involves troubleshooting and leveraging different AI tools, starting with creating a folder and a 'manifest.json' file, which is fundamental for Chrome extensions.
🛠️ Setting Up the Chrome Extension and Troubleshooting
The speaker details the steps taken to set up the Chrome extension, including creating a 'manifest.json' file and other necessary files like 'background.js' and 'popup.js'. They encounter issues with saving files and use Visual Studio Code to assemble the extension's components. The speaker also discusses the use of different AI tools, such as Chat GPT and Perplexity, to solve problems that arise during development, like finding the correct base ID for the Airtable API.
🔍 Identifying and Resolving Coding Errors
The speaker describes the process of identifying and resolving coding errors during the extension development. They mention the need to update the 'manifest.json' file to version three due to deprecation of version two. The speaker also discusses the importance of using personal access tokens instead of deprecated API keys and the process of generating and implementing these tokens. They highlight the iterative nature of development and the use of AI tools to assist in troubleshooting.
🚀 Finalizing the Chrome Extension and Testing
The speaker concludes the video by finalizing the Chrome extension and conducting tests. They make necessary updates to the 'manifest.json' and 'background.js' files after encountering errors and validate the functionality by ensuring the extension successfully sends the URL to the Airtable database. The speaker emphasizes the satisfaction of reaching a working solution through iteration and the assistance provided by AI tools in the development process.
Mindmap
Keywords
💡AI Tools
💡Chrome Extension
💡Airtable
💡Manifest.json
💡Visual Studio Code
💡API Key
💡Personal Access Token
💡Base ID
💡Error Troubleshooting
💡Host Permissions
💡Automation
Highlights
The video demonstrates how to use AI tools like Claude, Chat GPT, and Perplexity to create a Chrome extension.
The Chrome extension's purpose is to send the current page URL to an Airtable database.
The presenter uses Airtable, Chat GPT, and Zapier for various automations and video script creation.
The process begins with creating a folder named 'boa Grabber' and a 'manifest.json' file.
Visual Studio Code is used for coding and assembling the Chrome extension components.
The presenter encounters issues and uses AI to troubleshoot, emphasizing the utility of AI in problem-solving.
Perplexity is favored for its internet access, which allows for quick error resolution and借鉴 (learning from) others' solutions.
The video shows the process of copying code from AI tools into Visual Studio Code.
Airtable's API keys have been deprecated in favor of personal access tokens, which is a crucial update for developers.
The presenter mistakenly copies the table ID instead of the base ID, highlighting the importance of accurate data handling.
Using multiple AI tools in tandem is recommended to leverage their different strengths and weaknesses.
The presenter updates the manifest.json file to version three after encountering a deprecation error.
AI tools are used to update and correct the Chrome extension code, showcasing their role in iterative development.
Validation features are added to the extension to provide user feedback on the success of the API call.
The video emphasizes the iterative nature of development, with the presenter making multiple attempts to get the extension working.
The final successful test of the Chrome extension is shown, with the URL being correctly sent to the Airtable database.
The presenter concludes by reflecting on the transformative potential of the created Chrome extension for automation workflows.
Transcripts
hey so this video is going to be a
example of how you can use AI tools like
claw chpt perplexity to create a Chrome
extension so this is going to be a bit
different I'm just going to do a voice
over I'll walk you to the steps so the
first thing is here I'm going to cloud
and I said I want to build a Chrome
extension that sends the URL of the
curent page I'm on into an air table
database can you help me build this and
the reason why I want to build this is
because I am uh using chat gbt air table
and zap beer to have a lot of different
automations and I essentially create
different video scripts from different
tools and I don't like copying the tool
URL it just takes a lot of time so I
want to be able to just quickly use an
extension to send the URL the page I'm
on into air table and then have all
these different automations running in
the back end to get the tool overview
Etc so here we are I'm starting the
first step which is creating a folder
called boa Grabber I kind of following
the steps that Claud has asked me to do
which is obviously go to air table which
I already have an account there so I
don't need to do that but it's saying to
create a folder called manifest.json and
that is a essentially what Chrome
extensions run on I'm not a colder so
bear with me as I work through these
different steps but you can see here
that I'm starting that step of creating
that first folder here I did come into
an issue so you'll see me trying to kind
of troubleshoot as I'm doing this live
and that's a lot of what this video will
be showing you how you can use AI to
help you solve problems that you have so
in this case my problem was I need to
create the Chrome extension right but
within that problem there are other many
problems that you need to solve and you
can use AI to do that that in this case
I'm opening up visual codee studio which
is a program that you can download for
free so that I can start putting all
these pieces together because you're
going to need something like this so all
you have to do is go to Google and
download visual code Studio and here I'm
creating a new file and I'm adding that
code that Claud spit out to me now
sometimes I'll use chat PT sometimes I
use Claud in this video you'll see me
use all three so CLA chat GPT and
perplexity mainly perplexity because it
has access to the inter inter and I can
get all the errors that I have solved
pretty quickly so here I am just copying
that code that I got from Claude and
then I'm renaming the file to
manifest.json and then making sure that
that file goes into the right area which
is going to be the Chrome extension area
now in this case I have a problem
because it says it failed to save and it
wasn't able to read the file so I
realized that I probably need to delete
that file so we're going to delete this
and we're going to just resave it so
you'll see me do that here so I moved
the file to trash and then I'm trying
this again so naming it manifest.json
again so now what I'm doing is I'm
making a new file for the JavaScript so
we have to name that background.js so
I'm essentially just creating that new
file pasting that code that CLA gave us
and then renaming it to background.js
and now it has some other things now I
know from past experience that you need
additional files for a Chrome extension
to work so I realize that Claud probably
doesn't realize this and you'll see me
obviously realize this as well well and
I hop into perplexity to kind of help
solve the rest of these issues it's
saying that I need to find the base ID
which honestly I was kind of struggling
here and you'll see me like copy that
which is not the right thing I realized
this later right there I copied the
table ID and not the actual base ID and
you can easily find the base ID by going
to the developer Hub which you can
actually access the different air tables
here I was asking how do I find my air
table API key one thing to know is that
the um air table they actually
deprecated their API keys so now it's
called personal keys I believe so just
keep that in mind but here I was trying
to figure out like how the heck do I
find my base ID you can see here it says
API keys will be deprecated by the end
of January 2024 and then you have to go
to the developer Hub where then you can
get your personal access token so you
would have to create a personal access
token which is kind of replacing the API
key so I copy that because this is part
of the process like if you find an issue
you want to copy that exact issue and
you want to p inside of AI so
essentially Claud might not know this
right because there's cut off dates and
obviously CLA does have access to the
internet so what I did here I was like
okay cloud is not going to do it for me
so I'm going to hop into perplexity
which is one of my favorite AI tools
right now and I just said I want to
build a Chrome extension can you help me
build this and I did the same exact
thing it went through the process as
well so you can see here it actually
provided additional files that Claud did
not provide so this is why it's really
important that you use other AI tools so
not just relying on chbt not just
relying on CLA but using all of them
together will really benefit you because
obviously they're all different they all
have their strengths and weaknesses and
I believe that perplexity is really
great because it has access to the
internet so if you come across an error
or you come across something that you're
really trying to do that may be a little
bit more complex perplexity can go out
and find other people who may have done
similar things so here I am I'm copying
the popup HTML that perplexity provided
us so I'm just pasting that code in
there and I am saving that as Pop up.
HTML just like perplexity told me to do
and now it says that we need to create a
background script so we're just deleting
that and pasting that inside of that
file because that didn't seem correct
from what Claude had mentioned so we're
just pasting that into the background.js
and then for step four we're just
creating another file called popup.js
and remember this is all in visual code
Studio literally just copying the code
from perplexity right into visual code
Studio and and I don't know how to code
I'm just literally just copying it and
then if I run into an error I will you
know tell perplexity or tell CLA or
whatever tool that we're using that I'm
running into that issue here I just copy
that same thing where I said you know
that the API Keys have been deprecated
because again perplexity said use an API
key but I can't use an API key because
they don't have them so we need to use
the personal access tokens and you can
see here that perplexity actually
understood that so we're going to go
back into the developer Hub and we're
going to create our personal access
token and obviously I'm not going to
going to share my token with you so just
you know obviously create your own here
I'm just adding the Scopes to the
personal aess token so basically saying
what do I want this token to be able to
do obviously I want it to read records I
want it to write records I want it to
delete records right so I'm just
selecting the different Scopes that I
would like this token to do after that
you will then need to add the token or
create the token so you would add a base
so in this case my base will be the hent
automation video base and you can select
multiple or you can select all of your
bases I just went back into perplexity
here just to read to see if there's
anything else I need to do but that's
really it to create the personal access
access token it's pretty easy so here
I'm asking perplexity so in the code the
API key will be the personal access
token just to verify that that's correct
perplexity says that is correct so we
are then good to go so it updated the
code for us which is great so I am now
going to copy that and then update our
popup.js inside of our code now I'll go
back to the developer Hub and create
that token you'll have your own token
and you'll just replace that with your
own token there so I have my token so
again here I am trying to find the base
ID so I asked perplexity how do I find
the base ID oh well the table name is
the table name right so the table name
will be AI topics I renamed this because
I felt like the space could probably add
some issues so I just renamed it to AI
topics and camel case no spaces and then
I just put that table name here and now
the last thing I need is just the
finding that base ID which was really
complicated for whatever reason but
we'll get to it okay so it's saying that
you know for example if your base ID is
name my project the base ID is app
xyz123 then you would use app xyz123 as
the base ID so we'll go back to the
developer Hub and see if there's
anything that we can find here so here I
copied the wrong thing so I thought that
was the base ID but that's the table ID
so the base ID is incorrect there it's
the table ID that I pasted there so um
just keep in mind that's not correct but
we do update that later on so here I'm
just going to test it out so we're going
to basically just find the folder where
we saved our Chrome extension the Chrome
extension is there and then you just
want to load that entire file so we have
the pop-up JS the background JS pop-up
HTML and then the Manifest Json and then
as soon as you upload it you'll see that
we got an error so the first thing it
says that the version two is deprecated
so the manifest. Json file is incorrect
the Manifest version that we need to use
is three so I'm telling perplexity hey
like you know version two is deprecated
so we need to have version three and
this is a clear example of how you can
troubleshoot with AI like just tell it
the issues that you're coming across
whether that's for coding or any other
thing you're trying to do just give it
the error and have perplexity or chat
gbt or claw figure it out now I like
perplexity again because it has access
to the internet so it can go and find if
other people are facing similar issues
chances are people may and you'll be
able to figure that out now what we want
to do because we updated our Jason file
we should be able to load that up we got
some other issues here it's just a
matter of figuring out what those issues
are and then figure it out so here I
took a screenshot instead of like
copying pasting I just took a screenshot
and said hey like figure this out so I
said here are the errors in the
screenshot please read this picture and
figure it out I like when it comes to
that stuff I'm pretty lazy so I'll just
take a screenshot which is a pro tip for
you guys as well just take a screenshot
and have ai read it because it has that
capability have it fixer free so here we
are it's saying um some of the things
that we need to do so here's the updated
manifest Json file because there was
apparently some permissions missing I
had it updated so we got to go back into
our VSS code paste that in there I think
that's it so the service worker failed
so in this case I'm just actually
there's two so I'm just going to take a
screenshot all right so then again we're
going to paste that one thing to note
about putting screenshots inside of
perplexity it's really annoying is that
if you even if you clear the screenshot
from previous that like that you
previously used it still will load it so
you'll see later I like delete those
screenshots because it just doesn't
clear I think it's a bug that they have
on the program so you'll see like there
will be three screenshots even though
there's two that I uploaded right
there's two there but you'll see three
right so there's three there even though
I cleared the other one very frustrating
because what what what happen is like
let's say you have a follow-up question
that doesn't require the screen shots
it's going to just paste those screen
screenshots there as if you wanted those
to be there and that's not the case so
okay so now it's saying that there are
some issues with again with the Manifest
file so it updated it automatically so
all we do is copy that update and then
we'll paste that inside of the chat so
you see here I clear it out right
there's no screenshots and then you'll
see again like the screenshots get there
so so I'm just asking if it can update
the background JS file so that it's
correct and boom the three screenshots
are there but I'm p ing that new
manifest Json file there apparently this
is the correct background.js file that
we need to have so we'll copy that and
update our code and we will then save
that code so that it works so now I'm
going to remove it again because again I
want to just load it unpacked and make
sure it's good to go so that's the first
time I did get errors here which was
really exciting because that means we're
probably one step closer to getting this
to actually work which is awesome now
it's time to test this test this out I
believe so here I was trying to figure
out like I need to update the URL but
then I was like why do I need to update
I could just change the air table name
of it because it just adds complexity I
just started this out but then I was
like yeah this doesn't really make sense
when I could just change the UR URL
field inside of air table so yeah so we
went in here before it was called tool
URL now I've just like changed it to URL
makes just way easier the cool thing is
that for the HTML we didn't really have
to do anything
which was great because it just gave us
the colors the code we can change that
if we wanted to but um it we didn't need
to so I thought this was correct but
then again guys it wasn't correct
because that table ID thing is still
there instead of the base ID so we have
we definitely you know we'll figure that
out in a second um but here I am trying
it out so I'm going to best of a.com
which is normally what I would do so
normally what I do is just you know copy
the tools in the database and paste the
overview inside of our internal GPT our
custom GPT which writes the scripts for
us so in this case I chose cursor sh so
go to extensions at the top Air table so
we got we got that working the popup
works and when I click that button it
should send the URL to our air table
which will then trigger all types of
automations which is really cool and
awesome but you can see here it does not
work so we have a bit more things to do
before it starts to work cuz as you can
see there is nothing added to this
database so we're not there just yet but
we're getting closer because we got the
popup working we got the button there
it's just a matter of figuring out why
it didn't work and this is part of the
process guys this is what makes it fun
it's so satisfying to go through this
process with AI and finally get an end
result that works but you have to
iterate to get to that point so you can
see here that I was really trying to
figure out like how do I get these
stupid images out of here because when I
when I write this you know followup and
perplexity it's not going to actually
address what I'm saying because of those
images so after this I'm like I got to
figure this out so key tip here guys is
when you add images inside of per
plexity just delete the previous
conversation thread so here I'm asking
like when I tried it nothing happened I
want to add some validation so that once
the button is clicked it changes text or
color and then says successful if the
API if the API call went through success
so I want to say you know it's
successful if it actually works and I
want it to error out if it doesn't work
so I know that it didn't work cuz right
now if I click the button nothing
happens it doesn't change the color it
doesn't change text like I have no way
of knowing if it worked or not so I'm
going to stop that I'm just going to
copy this um followup and uh I was
checking to see if those images were
still there they weren't there's no way
for me to delete it so now I can ask it
you know to add that validation and here
we go we got we got what we need so now
it understands what I'm asking and there
isn't really an issue here so all I have
to do at this point is copy this code
added some additional code there for us
to use so we're going to go into our
code and just delete that and then we'll
paste in there and I think that's all we
need to do here but I think this is
where I realized the table the base ID
is incorrect but we'll see here so this
was an error where it said third party
um cookies were blocked so we'll remove
that and then we'll load it unpacked
again but it's going to have the same
error cuz you saved it and so go to
those extensions send URL and we got an
error right so now we know the
validation is working which is great but
we have an error and it's not working so
we need to figure out why isn't this
working so here I'm asking if there's an
error when sending the API call can we
send something to the console so that I
can see why it actually isn't working
and this actually didn't work
unfortunately so I wanted to know like
why isn't my code working this is my
attempt of adding some extra validation
here to say if something's you know
incorrect send me something to the
console where I can figure that out but
also you can see that that the extension
itself said there was an error which we
probably want to check out in a second
so here I am going into the console
itself and seeing if there's anything
there that indicates why this is giving
us an error I didn't really see anything
it might not have worked so I'm going
into uh the extensions again just to
send it again to see if it if anything
Chang but nothing changed so just got to
keep moving on so I'm asking like for
some reason it's throwing an a an error
and here I was trying to think of
another way that I can see the error so
I was thinking maybe I can actually show
the error inside of the popup instead of
sending it to the console so here is my
attempt of copying this code and seeing
if it can actually show me the error but
then I'm like wait this is the error
right here so we'll go back into
perplexity and see what happens here so
it looked like there was a security
feature that was blocking um inside of
the manifest. JS file so what we're
going to do is just update that manifest
file so that it includes cookies which
is what we need in order to send that
URL I believe there's another error
there and now nothing's happening so I
know there's a there's actually a
problem here cuz the popup is not even
showing up and it was showing up before
and it's not showing up now so we did
something that we need to fix so let's
see if there's any errors and they are
are some errors so we got to fix those
errors there's four of them so basically
I'm telling it that you know it gave me
four more errors and here I am going to
list below all of the errors I'm asking
can we fix all of these errors so starts
with the UNC uncal type error which will
be fixed inside of the background.js
file next is going to be the Manifest
Json file so deleting all that and
pasting the new code followed by the
Manifest again so there's another update
there JK there's one more in the
Manifest so now we're going to go back
into manage extensions and we're just
going to remove I believe this is where
I realized like the table ID was
shouldn't have been where it was it
should have been the base ID which I was
struggling to find earlier and we're
updating that background that JS and
then also updating that manifest JS as
well one last time and here I'm looking
at the host permissions just to see so
this is where I realized this is where
you find your base ID so right up there
it literally says the base ID is this so
we got to go into our popup.js and then
replace the base the base ID with the
correct base ID and then I'll save it
and here I'm just making sure that all
this other stuff is making sense just
validating and it does because you can
see the fetch down there is what the
call should be which is VI base ID table
ID or table name excuse me so we got the
table name we got the base ID so it
looks like that URL is correct and here
I'm just looking at the different things
that you can do with the API so you can
list records retrieve a record create
records um update records delete records
and again that all requires having that
right um access key so I think now we're
good to go so I believe everything's
good now so what I'm going to do is just
one last time um just update it I don't
think this is an actual error that we
need to fixed so what I'm going to do is
just go back to our page and do the air
table and now boom it worked so it set
successful our validations working if we
go inside of our air table database you
can see there that the URL was correctly
sent and we burn we built our first
Chrome extension using AI perplexity a
little bit of claw but mainly perplexity
and now I have what I need right and now
that one one thing can transform this
entire automation so that's it for this
video thanks guys for watching and I'll
see you in the next one
تصفح المزيد من مقاطع الفيديو ذات الصلة
How to Connect GPT Assistants With Zapier & Notion Database
How to Rank #1 FREE With Perplexity AI SEO
Bikin Ringkasan Youtube Pakai ChatGPT: Emang bisa?
This seller tool told me what amazon sellers NEED!【Brief information about sellersprite】
My Top 5 VSCode Extensions for React and NextJS!
10 Ways to Use Harpa AI Tool (Harpa Ai Tool l Harpa AI Tutorial)
5.0 / 5 (0 votes)