Creating A Chrome Extension Using AI & Zero Coding Knowledge

Best Of AI Daily
8 May 202419:33

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

00:00

๐Ÿ˜€ 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.

05:02

๐Ÿ› ๏ธ 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.

10:03

๐Ÿ” 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.

15:04

๐Ÿš€ 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

AI Tools refer to artificial intelligence applications that can perform tasks that typically require human intelligence. In the video, AI tools like 'claw', 'chat GPT', and 'perplexity' are used to assist in creating a Chrome extension. They are integral to the video's theme, showcasing how AI can facilitate problem-solving and automation in software development.

๐Ÿ’กChrome Extension

A Chrome Extension is a software component that adds functionality to the Google Chrome web browser. The video's main theme revolves around building a Chrome extension that sends the URL of the current page to an Airtable database, demonstrating a practical application of Chrome extensions in automation.

๐Ÿ’กAirtable

Airtable is a cloud-based platform for organization, planning, and collaboration that functions like a mix of spreadsheet and database. In the video, the creator wants to build a Chrome extension to send the current page URL into an Airtable database, which is a key part of automating their workflow.

๐Ÿ’กManifest.json

Manifest.json is a configuration file in the context of Chrome extensions that defines the extension's characteristics and parameters. It is a fundamental concept in the video, as the creator follows steps to create this file, which is essential for the Chrome extension to function.

๐Ÿ’กVisual Studio Code

Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft. It is mentioned in the video as the tool the creator uses to write and manage the code for the Chrome extension, highlighting its role as a common development environment for coding tasks.

๐Ÿ’กAPI Key

An API Key is a unique identifier used to authenticate a user, developer, or calling program to an API. In the video, the creator discusses the transition from API keys to personal access tokens in Airtable, which is a significant shift in how developers authenticate and interact with the service's API.

๐Ÿ’กPersonal Access Token

A Personal Access Token is a secure code that is used in place of a password for certain operations. The video discusses creating a personal access token for Airtable, which is now used instead of deprecated API keys, and is essential for the Chrome extension to interact with Airtable's database.

๐Ÿ’กBase ID

The Base ID in Airtable is a unique identifier for a particular database. The video's narrative involves the creator struggling to find and correctly use the Base ID to connect their Chrome extension to the correct Airtable database, which is crucial for the successful operation of the extension.

๐Ÿ’กError Troubleshooting

Error Troubleshooting is the process of detecting, diagnosing, and resolving issues or failures in a system. The video demonstrates the iterative process of error troubleshooting using AI tools to identify and fix problems in the Chrome extension's code, which is central to the video's educational content.

๐Ÿ’กHost Permissions

Host Permissions in the context of Chrome extensions define which websites the extension can interact with. The video touches on the need to adjust host permissions in the manifest.json file to ensure the Chrome extension can function correctly with third-party cookies and other site-specific features.

๐Ÿ’กAutomation

Automation refers to the use of technology to perform tasks with minimal human intervention. The video's theme of building a Chrome extension to automate the process of sending URLs to an Airtable database exemplifies the concept of automation, showing how it can streamline and enhance productivity in workflow processes.

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

play00:00

hey so this video is going to be a

play00:02

example of how you can use AI tools like

play00:04

claw chpt perplexity to create a Chrome

play00:07

extension so this is going to be a bit

play00:09

different I'm just going to do a voice

play00:10

over I'll walk you to the steps so the

play00:11

first thing is here I'm going to cloud

play00:13

and I said I want to build a Chrome

play00:14

extension that sends the URL of the

play00:16

curent page I'm on into an air table

play00:18

database can you help me build this and

play00:20

the reason why I want to build this is

play00:21

because I am uh using chat gbt air table

play00:25

and zap beer to have a lot of different

play00:27

automations and I essentially create

play00:30

different video scripts from different

play00:31

tools and I don't like copying the tool

play00:33

URL it just takes a lot of time so I

play00:36

want to be able to just quickly use an

play00:38

extension to send the URL the page I'm

play00:40

on into air table and then have all

play00:41

these different automations running in

play00:43

the back end to get the tool overview

play00:45

Etc so here we are I'm starting the

play00:46

first step which is creating a folder

play00:48

called boa Grabber I kind of following

play00:50

the steps that Claud has asked me to do

play00:53

which is obviously go to air table which

play00:54

I already have an account there so I

play00:56

don't need to do that but it's saying to

play00:57

create a folder called manifest.json and

play00:59

that is a essentially what Chrome

play01:01

extensions run on I'm not a colder so

play01:03

bear with me as I work through these

play01:05

different steps but you can see here

play01:06

that I'm starting that step of creating

play01:08

that first folder here I did come into

play01:10

an issue so you'll see me trying to kind

play01:12

of troubleshoot as I'm doing this live

play01:14

and that's a lot of what this video will

play01:16

be showing you how you can use AI to

play01:18

help you solve problems that you have so

play01:21

in this case my problem was I need to

play01:23

create the Chrome extension right but

play01:25

within that problem there are other many

play01:27

problems that you need to solve and you

play01:28

can use AI to do that that in this case

play01:30

I'm opening up visual codee studio which

play01:32

is a program that you can download for

play01:35

free so that I can start putting all

play01:36

these pieces together because you're

play01:38

going to need something like this so all

play01:39

you have to do is go to Google and

play01:41

download visual code Studio and here I'm

play01:45

creating a new file and I'm adding that

play01:47

code that Claud spit out to me now

play01:50

sometimes I'll use chat PT sometimes I

play01:52

use Claud in this video you'll see me

play01:54

use all three so CLA chat GPT and

play01:56

perplexity mainly perplexity because it

play01:58

has access to the inter inter and I can

play02:01

get all the errors that I have solved

play02:03

pretty quickly so here I am just copying

play02:05

that code that I got from Claude and

play02:07

then I'm renaming the file to

play02:08

manifest.json and then making sure that

play02:11

that file goes into the right area which

play02:13

is going to be the Chrome extension area

play02:15

now in this case I have a problem

play02:16

because it says it failed to save and it

play02:19

wasn't able to read the file so I

play02:22

realized that I probably need to delete

play02:24

that file so we're going to delete this

play02:26

and we're going to just resave it so

play02:28

you'll see me do that here so I moved

play02:30

the file to trash and then I'm trying

play02:32

this again so naming it manifest.json

play02:35

again so now what I'm doing is I'm

play02:36

making a new file for the JavaScript so

play02:39

we have to name that background.js so

play02:42

I'm essentially just creating that new

play02:43

file pasting that code that CLA gave us

play02:46

and then renaming it to background.js

play02:48

and now it has some other things now I

play02:49

know from past experience that you need

play02:51

additional files for a Chrome extension

play02:54

to work so I realize that Claud probably

play02:56

doesn't realize this and you'll see me

play02:58

obviously realize this as well well and

play03:00

I hop into perplexity to kind of help

play03:03

solve the rest of these issues it's

play03:05

saying that I need to find the base ID

play03:08

which honestly I was kind of struggling

play03:10

here and you'll see me like copy that

play03:12

which is not the right thing I realized

play03:13

this later right there I copied the

play03:15

table ID and not the actual base ID and

play03:18

you can easily find the base ID by going

play03:20

to the developer Hub which you can

play03:22

actually access the different air tables

play03:24

here I was asking how do I find my air

play03:26

table API key one thing to know is that

play03:28

the um air table they actually

play03:30

deprecated their API keys so now it's

play03:33

called personal keys I believe so just

play03:35

keep that in mind but here I was trying

play03:36

to figure out like how the heck do I

play03:37

find my base ID you can see here it says

play03:40

API keys will be deprecated by the end

play03:42

of January 2024 and then you have to go

play03:45

to the developer Hub where then you can

play03:47

get your personal access token so you

play03:48

would have to create a personal access

play03:50

token which is kind of replacing the API

play03:52

key so I copy that because this is part

play03:55

of the process like if you find an issue

play03:57

you want to copy that exact issue and

play03:59

you want to p inside of AI so

play04:01

essentially Claud might not know this

play04:03

right because there's cut off dates and

play04:05

obviously CLA does have access to the

play04:07

internet so what I did here I was like

play04:10

okay cloud is not going to do it for me

play04:12

so I'm going to hop into perplexity

play04:13

which is one of my favorite AI tools

play04:14

right now and I just said I want to

play04:16

build a Chrome extension can you help me

play04:18

build this and I did the same exact

play04:19

thing it went through the process as

play04:21

well so you can see here it actually

play04:22

provided additional files that Claud did

play04:25

not provide so this is why it's really

play04:26

important that you use other AI tools so

play04:29

not just relying on chbt not just

play04:31

relying on CLA but using all of them

play04:33

together will really benefit you because

play04:36

obviously they're all different they all

play04:37

have their strengths and weaknesses and

play04:39

I believe that perplexity is really

play04:41

great because it has access to the

play04:42

internet so if you come across an error

play04:44

or you come across something that you're

play04:45

really trying to do that may be a little

play04:47

bit more complex perplexity can go out

play04:49

and find other people who may have done

play04:51

similar things so here I am I'm copying

play04:53

the popup HTML that perplexity provided

play04:57

us so I'm just pasting that code in

play04:59

there and I am saving that as Pop up.

play05:02

HTML just like perplexity told me to do

play05:04

and now it says that we need to create a

play05:07

background script so we're just deleting

play05:09

that and pasting that inside of that

play05:11

file because that didn't seem correct

play05:13

from what Claude had mentioned so we're

play05:15

just pasting that into the background.js

play05:18

and then for step four we're just

play05:19

creating another file called popup.js

play05:22

and remember this is all in visual code

play05:24

Studio literally just copying the code

play05:26

from perplexity right into visual code

play05:29

Studio and and I don't know how to code

play05:31

I'm just literally just copying it and

play05:32

then if I run into an error I will you

play05:34

know tell perplexity or tell CLA or

play05:36

whatever tool that we're using that I'm

play05:38

running into that issue here I just copy

play05:40

that same thing where I said you know

play05:41

that the API Keys have been deprecated

play05:43

because again perplexity said use an API

play05:45

key but I can't use an API key because

play05:46

they don't have them so we need to use

play05:48

the personal access tokens and you can

play05:50

see here that perplexity actually

play05:52

understood that so we're going to go

play05:53

back into the developer Hub and we're

play05:55

going to create our personal access

play05:57

token and obviously I'm not going to

play05:59

going to share my token with you so just

play06:01

you know obviously create your own here

play06:03

I'm just adding the Scopes to the

play06:06

personal aess token so basically saying

play06:08

what do I want this token to be able to

play06:09

do obviously I want it to read records I

play06:11

want it to write records I want it to

play06:13

delete records right so I'm just

play06:15

selecting the different Scopes that I

play06:16

would like this token to do after that

play06:18

you will then need to add the token or

play06:22

create the token so you would add a base

play06:24

so in this case my base will be the hent

play06:26

automation video base and you can select

play06:28

multiple or you can select all of your

play06:30

bases I just went back into perplexity

play06:32

here just to read to see if there's

play06:33

anything else I need to do but that's

play06:34

really it to create the personal access

play06:36

access token it's pretty easy so here

play06:38

I'm asking perplexity so in the code the

play06:40

API key will be the personal access

play06:42

token just to verify that that's correct

play06:44

perplexity says that is correct so we

play06:46

are then good to go so it updated the

play06:48

code for us which is great so I am now

play06:50

going to copy that and then update our

play06:52

popup.js inside of our code now I'll go

play06:55

back to the developer Hub and create

play06:57

that token you'll have your own token

play06:59

and you'll just replace that with your

play07:02

own token there so I have my token so

play07:05

again here I am trying to find the base

play07:07

ID so I asked perplexity how do I find

play07:09

the base ID oh well the table name is

play07:11

the table name right so the table name

play07:12

will be AI topics I renamed this because

play07:14

I felt like the space could probably add

play07:17

some issues so I just renamed it to AI

play07:21

topics and camel case no spaces and then

play07:24

I just put that table name here and now

play07:26

the last thing I need is just the

play07:27

finding that base ID which was really

play07:30

complicated for whatever reason but

play07:32

we'll get to it okay so it's saying that

play07:34

you know for example if your base ID is

play07:36

name my project the base ID is app

play07:38

xyz123 then you would use app xyz123 as

play07:42

the base ID so we'll go back to the

play07:44

developer Hub and see if there's

play07:46

anything that we can find here so here I

play07:49

copied the wrong thing so I thought that

play07:51

was the base ID but that's the table ID

play07:53

so the base ID is incorrect there it's

play07:56

the table ID that I pasted there so um

play07:59

just keep in mind that's not correct but

play08:01

we do update that later on so here I'm

play08:03

just going to test it out so we're going

play08:05

to basically just find the folder where

play08:07

we saved our Chrome extension the Chrome

play08:08

extension is there and then you just

play08:10

want to load that entire file so we have

play08:12

the pop-up JS the background JS pop-up

play08:14

HTML and then the Manifest Json and then

play08:17

as soon as you upload it you'll see that

play08:18

we got an error so the first thing it

play08:20

says that the version two is deprecated

play08:22

so the manifest. Json file is incorrect

play08:25

the Manifest version that we need to use

play08:27

is three so I'm telling perplexity hey

play08:29

like you know version two is deprecated

play08:31

so we need to have version three and

play08:34

this is a clear example of how you can

play08:36

troubleshoot with AI like just tell it

play08:39

the issues that you're coming across

play08:41

whether that's for coding or any other

play08:43

thing you're trying to do just give it

play08:45

the error and have perplexity or chat

play08:47

gbt or claw figure it out now I like

play08:49

perplexity again because it has access

play08:51

to the internet so it can go and find if

play08:54

other people are facing similar issues

play08:56

chances are people may and you'll be

play08:58

able to figure that out now what we want

play08:59

to do because we updated our Jason file

play09:02

we should be able to load that up we got

play09:05

some other issues here it's just a

play09:08

matter of figuring out what those issues

play09:09

are and then figure it out so here I

play09:11

took a screenshot instead of like

play09:13

copying pasting I just took a screenshot

play09:14

and said hey like figure this out so I

play09:15

said here are the errors in the

play09:17

screenshot please read this picture and

play09:20

figure it out I like when it comes to

play09:22

that stuff I'm pretty lazy so I'll just

play09:23

take a screenshot which is a pro tip for

play09:25

you guys as well just take a screenshot

play09:27

and have ai read it because it has that

play09:28

capability have it fixer free so here we

play09:30

are it's saying um some of the things

play09:32

that we need to do so here's the updated

play09:35

manifest Json file because there was

play09:37

apparently some permissions missing I

play09:39

had it updated so we got to go back into

play09:42

our VSS code paste that in there I think

play09:44

that's it so the service worker failed

play09:47

so in this case I'm just actually

play09:48

there's two so I'm just going to take a

play09:51

screenshot all right so then again we're

play09:54

going to paste that one thing to note

play09:55

about putting screenshots inside of

play09:57

perplexity it's really annoying is that

play09:59

if you even if you clear the screenshot

play10:01

from previous that like that you

play10:03

previously used it still will load it so

play10:05

you'll see later I like delete those

play10:07

screenshots because it just doesn't

play10:09

clear I think it's a bug that they have

play10:12

on the program so you'll see like there

play10:14

will be three screenshots even though

play10:15

there's two that I uploaded right

play10:17

there's two there but you'll see three

play10:18

right so there's three there even though

play10:20

I cleared the other one very frustrating

play10:22

because what what what happen is like

play10:24

let's say you have a follow-up question

play10:26

that doesn't require the screen shots

play10:27

it's going to just paste those screen

play10:29

screenshots there as if you wanted those

play10:30

to be there and that's not the case so

play10:32

okay so now it's saying that there are

play10:34

some issues with again with the Manifest

play10:37

file so it updated it automatically so

play10:40

all we do is copy that update and then

play10:42

we'll paste that inside of the chat so

play10:45

you see here I clear it out right

play10:46

there's no screenshots and then you'll

play10:47

see again like the screenshots get there

play10:49

so so I'm just asking if it can update

play10:51

the background JS file so that it's

play10:54

correct and boom the three screenshots

play10:57

are there but I'm p ing that new

play11:00

manifest Json file there apparently this

play11:03

is the correct background.js file that

play11:06

we need to have so we'll copy that and

play11:09

update our code and we will then save

play11:13

that code so that it works so now I'm

play11:16

going to remove it again because again I

play11:18

want to just load it unpacked and make

play11:21

sure it's good to go so that's the first

play11:23

time I did get errors here which was

play11:25

really exciting because that means we're

play11:27

probably one step closer to getting this

play11:29

to actually work which is awesome now

play11:31

it's time to test this test this out I

play11:33

believe so here I was trying to figure

play11:34

out like I need to update the URL but

play11:36

then I was like why do I need to update

play11:37

I could just change the air table name

play11:39

of it because it just adds complexity I

play11:42

just started this out but then I was

play11:44

like yeah this doesn't really make sense

play11:46

when I could just change the UR URL

play11:47

field inside of air table so yeah so we

play11:49

went in here before it was called tool

play11:51

URL now I've just like changed it to URL

play11:53

makes just way easier the cool thing is

play11:56

that for the HTML we didn't really have

play11:58

to do anything

play11:59

which was great because it just gave us

play12:01

the colors the code we can change that

play12:03

if we wanted to but um it we didn't need

play12:05

to so I thought this was correct but

play12:07

then again guys it wasn't correct

play12:09

because that table ID thing is still

play12:12

there instead of the base ID so we have

play12:15

we definitely you know we'll figure that

play12:16

out in a second um but here I am trying

play12:19

it out so I'm going to best of a.com

play12:21

which is normally what I would do so

play12:22

normally what I do is just you know copy

play12:24

the tools in the database and paste the

play12:27

overview inside of our internal GPT our

play12:31

custom GPT which writes the scripts for

play12:33

us so in this case I chose cursor sh so

play12:36

go to extensions at the top Air table so

play12:39

we got we got that working the popup

play12:41

works and when I click that button it

play12:43

should send the URL to our air table

play12:45

which will then trigger all types of

play12:46

automations which is really cool and

play12:48

awesome but you can see here it does not

play12:50

work so we have a bit more things to do

play12:53

before it starts to work cuz as you can

play12:54

see there is nothing added to this

play12:57

database so we're not there just yet but

play13:00

we're getting closer because we got the

play13:02

popup working we got the button there

play13:04

it's just a matter of figuring out why

play13:06

it didn't work and this is part of the

play13:08

process guys this is what makes it fun

play13:10

it's so satisfying to go through this

play13:12

process with AI and finally get an end

play13:14

result that works but you have to

play13:16

iterate to get to that point so you can

play13:18

see here that I was really trying to

play13:19

figure out like how do I get these

play13:21

stupid images out of here because when I

play13:24

when I write this you know followup and

play13:26

perplexity it's not going to actually

play13:28

address what I'm saying because of those

play13:30

images so after this I'm like I got to

play13:33

figure this out so key tip here guys is

play13:37

when you add images inside of per

play13:38

plexity just delete the previous

play13:40

conversation thread so here I'm asking

play13:42

like when I tried it nothing happened I

play13:44

want to add some validation so that once

play13:46

the button is clicked it changes text or

play13:48

color and then says successful if the

play13:50

API if the API call went through success

play13:52

so I want to say you know it's

play13:54

successful if it actually works and I

play13:56

want it to error out if it doesn't work

play13:58

so I know that it didn't work cuz right

play13:59

now if I click the button nothing

play14:01

happens it doesn't change the color it

play14:02

doesn't change text like I have no way

play14:04

of knowing if it worked or not so I'm

play14:06

going to stop that I'm just going to

play14:07

copy this um followup and uh I was

play14:10

checking to see if those images were

play14:11

still there they weren't there's no way

play14:13

for me to delete it so now I can ask it

play14:16

you know to add that validation and here

play14:18

we go we got we got what we need so now

play14:20

it understands what I'm asking and there

play14:22

isn't really an issue here so all I have

play14:25

to do at this point is copy this code

play14:27

added some additional code there for us

play14:28

to use so we're going to go into our

play14:31

code and just delete that and then we'll

play14:33

paste in there and I think that's all we

play14:36

need to do here but I think this is

play14:38

where I realized the table the base ID

play14:40

is incorrect but we'll see here so this

play14:42

was an error where it said third party

play14:45

um cookies were blocked so we'll remove

play14:47

that and then we'll load it unpacked

play14:49

again but it's going to have the same

play14:51

error cuz you saved it and so go to

play14:53

those extensions send URL and we got an

play14:55

error right so now we know the

play14:57

validation is working which is great but

play14:59

we have an error and it's not working so

play15:01

we need to figure out why isn't this

play15:03

working so here I'm asking if there's an

play15:05

error when sending the API call can we

play15:08

send something to the console so that I

play15:11

can see why it actually isn't working

play15:14

and this actually didn't work

play15:15

unfortunately so I wanted to know like

play15:18

why isn't my code working this is my

play15:20

attempt of adding some extra validation

play15:22

here to say if something's you know

play15:25

incorrect send me something to the

play15:26

console where I can figure that out but

play15:30

also you can see that that the extension

play15:32

itself said there was an error which we

play15:35

probably want to check out in a second

play15:37

so here I am going into the console

play15:39

itself and seeing if there's anything

play15:41

there that indicates why this is giving

play15:44

us an error I didn't really see anything

play15:47

it might not have worked so I'm going

play15:48

into uh the extensions again just to

play15:51

send it again to see if it if anything

play15:53

Chang but nothing changed so just got to

play15:55

keep moving on so I'm asking like for

play15:57

some reason it's throwing an a an error

play15:59

and here I was trying to think of

play16:01

another way that I can see the error so

play16:02

I was thinking maybe I can actually show

play16:04

the error inside of the popup instead of

play16:07

sending it to the console so here is my

play16:11

attempt of copying this code and seeing

play16:14

if it can actually show me the error but

play16:17

then I'm like wait this is the error

play16:20

right here so we'll go back into

play16:23

perplexity and see what happens here so

play16:26

it looked like there was a security

play16:28

feature that was blocking um inside of

play16:30

the manifest. JS file so what we're

play16:33

going to do is just update that manifest

play16:36

file so that it includes cookies which

play16:38

is what we need in order to send that

play16:40

URL I believe there's another error

play16:43

there and now nothing's happening so I

play16:44

know there's a there's actually a

play16:46

problem here cuz the popup is not even

play16:49

showing up and it was showing up before

play16:50

and it's not showing up now so we did

play16:53

something that we need to fix so let's

play16:56

see if there's any errors and they are

play16:58

are some errors so we got to fix those

play17:01

errors there's four of them so basically

play17:03

I'm telling it that you know it gave me

play17:05

four more errors and here I am going to

play17:09

list below all of the errors I'm asking

play17:12

can we fix all of these errors so starts

play17:15

with the UNC uncal type error which will

play17:19

be fixed inside of the background.js

play17:22

file next is going to be the Manifest

play17:25

Json file so deleting all that and

play17:28

pasting the new code followed by the

play17:32

Manifest again so there's another update

play17:35

there JK there's one more in the

play17:36

Manifest so now we're going to go back

play17:38

into manage extensions and we're just

play17:40

going to remove I believe this is where

play17:42

I realized like the table ID was

play17:44

shouldn't have been where it was it

play17:45

should have been the base ID which I was

play17:48

struggling to find earlier and we're

play17:50

updating that background that JS and

play17:52

then also updating that manifest JS as

play17:54

well one last time and here I'm looking

play17:56

at the host permissions just to see so

play17:59

this is where I realized this is where

play18:01

you find your base ID so right up there

play18:04

it literally says the base ID is this so

play18:07

we got to go into our popup.js and then

play18:10

replace the base the base ID with the

play18:13

correct base ID and then I'll save it

play18:16

and here I'm just making sure that all

play18:18

this other stuff is making sense just

play18:21

validating and it does because you can

play18:23

see the fetch down there is what the

play18:26

call should be which is VI base ID table

play18:28

ID or table name excuse me so we got the

play18:31

table name we got the base ID so it

play18:32

looks like that URL is correct and here

play18:35

I'm just looking at the different things

play18:36

that you can do with the API so you can

play18:38

list records retrieve a record create

play18:40

records um update records delete records

play18:44

and again that all requires having that

play18:46

right um access key so I think now we're

play18:49

good to go so I believe everything's

play18:51

good now so what I'm going to do is just

play18:52

one last time um just update it I don't

play18:56

think this is an actual error that we

play18:58

need to fixed so what I'm going to do is

play19:00

just go back to our page and do the air

play19:03

table and now boom it worked so it set

play19:05

successful our validations working if we

play19:07

go inside of our air table database you

play19:10

can see there that the URL was correctly

play19:12

sent and we burn we built our first

play19:15

Chrome extension using AI perplexity a

play19:18

little bit of claw but mainly perplexity

play19:21

and now I have what I need right and now

play19:23

that one one thing can transform this

play19:27

entire automation so that's it for this

play19:30

video thanks guys for watching and I'll

play19:32

see you in the next one

Rate This
โ˜…
โ˜…
โ˜…
โ˜…
โ˜…

5.0 / 5 (0 votes)

Related Tags
Chrome ExtensionAI ToolsPerplexityAutomationAirtableCoding TutorialWeb DevelopmentAPI IntegrationPersonal Access TokenManifest File