Build Anything with Perplexity, Here’s How

Summary

David Andre 展示了如何使用 Perplexity，一个擅长网页搜索的 AI 工具，来构建任何东西，即使没有编程经验。他比较了 Perplexity 和其他 AI 工具的搜索能力，强调了 Perplexity 能够访问更多网站资源。通过 Perplexity，David 选择了构建一个提高生产力的 Chrome 扩展程序，演示了从构思到实现的整个过程，包括使用不同的语言模型生成代码和调试。视频展示了如何利用 AI 工具简化开发流程，鼓励观众使用 Perplexity 解决日常问题，提高效率。

Takeaways

• 😀 David Andre 介绍了 Perplexity，这是一款专注于网络搜索的 AI 工具，可以结合大型语言模型进行网页搜索。
• 🔍 Perplexity 通过结合大型语言模型，能够搜索更多网站并提供更全面的答案，与 Chat GPT 相比，它能够访问更多的信息源。
• 🛠️ David 展示了如何使用 Perplexity 来构建项目，即使用户不是程序员，也可以通过 Perplexity 生成想法和代码。
• 📚 Perplexity 允许用户选择不同的大型语言模型，例如 Claude 和 GPT-4，以适应不同的编程和调试需求。
• 🎁 David 提供了一个链接，观众可以通过该链接获得 Perplexity 付费版本的 50% 折扣。
• 🤖 David 通过 Perplexity 让 AI 选择构建项目，并提出了一个生产力 Chrome 扩展程序的想法，该扩展程序可以在用户访问分心网站时提供任务列表选项。
• 📝 David 演示了如何使用 Perplexity 生成 Chrome 扩展程序的代码，包括 HTML、CSS 和 JavaScript，而无需自己编写代码。
• 🖼️ David 利用 Perplexity 的图像生成功能为 Chrome 扩展程序创建了图标，展示了 AI 如何帮助完成设计任务。
• 🔧 David 遇到了扩展程序在实际使用中的一些问题，并通过 Perplexity 的帮助进行调试和修改代码。
• 🎉 最终，David 成功构建了一个能够阻止访问 Twitter 和 x.com 的 Chrome 扩展程序，证明了即使是编程新手也能通过 AI 工具实现复杂的项目。
• 📈 David 强调了使用 AI 工具如 Perplexity 在日常中解决问题的重要性，鼓励观众开始使用这些工具来提高效率和生产力。

Q & A

什么是Perplexity，它与普通的网页搜索有什么区别？

Perplexity是一个AI工具，专门用于网页搜索。它与普通搜索的区别在于，Perplexity结合了大型语言模型(LLM)和网络搜索的能力，可以提供更全面的答案，它能够浏览更多不同的网站来源，而普通的搜索可能只显示有限的几个搜索结果。

David Andre在视频中提到了哪些AI工具？

David Andre在视频中提到了Perplexity和GPT。Perplexity是一个可以进行网页搜索的AI工具，而GPT是一个大型语言模型，可以用来生成代码和调试。

为什么程序员可能更倾向于使用Perplexity？

程序员可能更倾向于使用Perplexity，因为它允许用户选择不同的LLM来生成代码，然后可以切换到其他模型如GPT 4进行代码调试。此外，Perplexity提供了一个订阅服务，可以访问所有这些工具。

David Andre在视频中展示了如何使用Perplexity来构建一个什么样的项目？

David Andre展示了如何使用Perplexity来构建一个Chrome扩展程序，这个扩展程序可以在用户尝试访问分散注意力的网站时弹出提示，让用户选择是继续访问网站还是跳转到任务列表。

在构建Chrome扩展程序时，David Andre提到了哪些技术栈？

在构建Chrome扩展程序时，David Andre提到了HTML、CSS和JavaScript，这些是构建扩展程序所需的基本技术栈。

David Andre在视频中提到了哪些关于Perplexity的高级功能？

David Andre提到了Perplexity的一些高级功能，包括能够使用CLA 3 Opus生成代码，以及拥有200k的上下文窗口，这意味着可以在聊天中进行非常长的对话而不会丢失上下文。

David Andre为什么建议使用Perplexity而不是Google搜索？

David Andre建议使用Perplexity而不是Google搜索，因为Perplexity可以提供更深入和多样化的搜索结果，它能够浏览更多的网站并提供不同的信息来源，而Google搜索可能只显示有限的结果。

在视频中，David Andre是如何使用Perplexity来解决编码问题的？

David Andre通过向Perplexity提出具体的问题和需求，让Perplexity搜索网络并提供解决方案。他没有编写任何代码，而是依赖Perplexity来提供所需的代码片段和步骤。

David Andre在视频中提到了哪些关于使用AI工具的建议？

David Andre建议人们应该开始在日常生活中使用AI工具，比如Perplexity，来替代传统的搜索方式，比如Google搜索。他还建议当人们在使用过程中遇到问题时，应该利用Perplexity来找到解决方案。

在构建Chrome扩展程序的过程中，David Andre遇到了哪些问题，他是如何使用Perplexity来解决的？

在构建Chrome扩展程序的过程中，David Andre遇到了弹出窗口只在点击扩展图标后才出现的問題。他通过向Perplexity描述问题并请求解决方案，然后根据Perplexity提供的代码更改来解决了这个问题。

David Andre在视频中提到了哪些关于自定义Chrome扩展程序的好处？

David Andre提到自定义Chrome扩展程序的好处在于它可以针对个人的特定需求进行定制，帮助用户避免访问浪费时间的网站，从而提高生产力。

David Andre在视频中是如何强调AI工具在现代编程中的重要性的？

David Andre通过展示即使是编程新手，也可以通过使用AI工具如Perplexity来构建复杂的应用程序，从而强调了AI工具在现代编程中的重要性。他展示了如何一步步地使用Perplexity来解决问题，而无需深入了解代码。

David Andre在视频中提到了哪些关于AI工具的未来发展的看法？

David Andre认为AI工具的发展使得现在构建应用程序比过去容易得多，他认为即使是更复杂的项目，未来也可能只需要更少的时间和努力来完成，这表明了AI工具在提高开发效率方面的潜力。

Outlines

00:00

🤖 介绍Perplexity AI工具

David Andre介绍了一个名为Perplexity的AI工具，它利用大型语言模型（LLM）进行网络搜索，帮助用户构建任何东西，即使用户不是程序员。Perplexity与普通搜索引擎不同，它能够搜索更多网站并提供更多样化的信息来源。David还提到了使用不同LLM的优势，以及Perplexity如何帮助程序员生成和调试代码。

05:04

🛠️ 使用Perplexity构建Chrome扩展

David决定使用Perplexity来构建一个提高生产力的Chrome扩展程序。他通过Perplexity的写作模式，让AI生成构建项目的想法，而不需要在线搜索。他提出了一个在访问分散注意力的网站时弹出提示的扩展程序概念，并请求Perplexity提供五种可能的设计。

10:06

💡 设计生产力Chrome扩展的具体步骤

David展示了如何使用Perplexity一步步构建Chrome扩展，包括创建项目目录、编写manifest.json文件、设计popup HTML界面以及添加必要的JavaScript和CSS代码。他强调了即使没有编程经验，也可以通过AI工具来完成这些任务。

15:08

🔧 测试和调试Chrome扩展

David Andre在VS Code中完成了扩展的编码后，介绍了如何在Chrome中测试扩展程序。他提到了需要开启开发者模式、加载未打包的扩展以及如何与扩展进行交互以验证其功能。他还分享了在测试过程中遇到的问题，即扩展没有按预期工作。

20:10

🔄 解决扩展程序不工作的问题

David发现扩展在访问特定网站时没有自动弹出。他使用Perplexity来分析问题，并请求AI提供解决方案。AI建议修改JavaScript代码，以确保只有在访问特定网站时才显示弹出窗口。David按照指示进行了更改，并重新加载了扩展进行测试。

25:10

🖥️ 完善扩展程序的用户体验

尽管扩展程序的核心功能已经实现，David希望改进用户界面，使其在自动弹出时占据整个屏幕，防止用户访问Twitter。他再次使用Perplexity来调整manifest文件和JavaScript代码，以实现这一功能，并成功地使扩展在访问Twitter时自动覆盖整个屏幕。

30:12

🎨 调整扩展程序的视觉效果

David注意到扩展程序的背景透明度可以调整，但他决定将其改为完全不透明，以完全遮挡背后的内容。他请求Perplexity提供CSS代码的更改，并成功地将背景变为全黑色，从而提高了扩展程序的实用性。

35:14

🎉 完成Chrome扩展并分享成果

在经历了一系列的调试和改进后，David成功地完成了Chrome扩展程序的构建。他分享了自己的成就感，并鼓励观众订阅他的频道。David强调了使用AI工具如Perplexity来实现目标的重要性，并提供了扩展程序的代码链接。

Keywords

💡Perplexity

Perplexity是一个AI工具，专门用于网络搜索。它通过结合大型语言模型（LLM）和网络搜索能力，能够回答用户的问题。在视频中，Perplexity被用来展示如何构建各种项目，即使用户不是程序员。例如，用户可以请求关于Elon Musk和Yan Leon的Twitter争论的信息，Perplexity会提供答案。

💡LLM（Large Language Model）

大型语言模型（LLM）是指能够处理和生成自然语言文本的复杂AI系统。在视频脚本中，Perplexity利用LLM的能力来搜索网络并提供信息。LLM是Perplexity的核心，因为它能够理解和生成语言，使得用户可以与工具进行交互并获取所需信息。

💡Chrome扩展

Chrome扩展是一种软件组件，用于增强Google Chrome浏览器的功能。在视频中，David Andre使用Perplexity来指导如何构建一个提高生产力的Chrome扩展，该扩展可以阻止用户访问分散注意力的网站，并将他们重定向到任务列表。

💡HTML

HTML（超文本标记语言）是构建网页和Web应用的标准标记语言。在视频脚本中，HTML被用来创建Chrome扩展的用户界面，例如弹出窗口，这是用户与之交互的前端部分。

💡CSS

CSS（层叠样式表）是一种用于描述HTML文档外观和格式的语言。在脚本中，CSS用于为Chrome扩展的弹出窗口添加样式，使其看起来更美观，并且可以根据用户的需要进行定制。

💡JavaScript

JavaScript是一种常用于网页交互的脚本语言。在视频中，JavaScript被用来编写Chrome扩展的逻辑，控制用户点击按钮时的行为，例如重定向到任务列表或继续访问网站。

💡JSON

JSON（JavaScript对象表示法）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在脚本中，JSON用于创建Chrome扩展的清单文件（manifest.json），该文件告诉浏览器扩展的基本信息和配置。

💡AI工具

AI工具指的是利用人工智能技术来执行任务或提供服务的工具。在视频脚本中，Perplexity作为一个AI工具，可以帮助用户构建项目，生成代码，甚至创建图像，展示了AI工具如何简化开发过程并提高效率。

💡生产力

生产力是指个人或系统在一定时间内完成工作的能力。在视频中，构建的Chrome扩展旨在提高用户的生产力，通过阻止访问分散注意力的网站，帮助用户专注于任务列表，从而提高工作效率。

💡调试

调试是软件开发过程中识别和修复代码中错误的行为。在视频脚本中，当Chrome扩展未能按预期工作时，David Andre使用AI工具来帮助调试代码，展示了即使对于编程新手，AI工具也能在调试过程中提供帮助。

💡内容脚本

内容脚本是运行在网页上下文中的JavaScript代码，可以访问和修改页面的DOM树。在脚本中，内容脚本被用来在用户访问特定网站时注入一个覆盖层，这是实现Chrome扩展功能的关键技术之一。

Highlights

David Andre 介绍了如何使用 Perplexity 这个 AI 工具来构建任何东西，即使用户不是程序员。

Perplexity 利用大型语言模型并赋予其网络搜索能力，与普通的 GPT 搜索功能相比，它能搜索更多网站并提供更多样化的来源。

用户可以通过 Perplexity 使用不同的语言模型，例如 Codex 和 GPT-4，来生成代码和调试。

Perplexity 的订阅服务提供了一站式的解决方案，包括访问所有功能，而免费版本也相当稳固。

David 展示了如何使用 Perplexity 来选择构建项目，即使他本人不是程序员，也能通过工具生成项目想法。

Perplexity 允许用户自定义焦点，比如选择学术搜索或仅文本生成，以适应不同的使用场景。

David 选择了构建一个提高生产力的 Chrome 扩展程序，该程序可以在用户访问分心网站时提供任务列表选项。

Perplexity 为 David 提供了五种可能的设计概念，用于构建 Chrome 扩展程序。

即使 David 对 HTML、CSS 和 JavaScript 知之甚少，Perplexity 也能提供一步步的指导来创建项目。

David 使用 Perplexity 生成了 Chrome 扩展程序所需的 manifest.json 文件。

Perplexity 还提供了创建弹出式 HTML 文件的代码，这是扩展程序与用户交互的主要部分。

JavaScript 文件的生成让扩展程序能够在用户点击按钮时执行操作，如打开任务列表或继续访问网站。

通过 Perplexity，David 能够生成 CSS 代码来为扩展程序添加样式，而无需自己编写样式代码。

David 利用 Perplexity 的图像生成功能为 Chrome 扩展程序创建了图标。

Perplexity 提供了详细的步骤来测试 Chrome 扩展程序，确保其在浏览器中正确加载和运行。

在测试过程中，David 发现扩展程序没有按预期工作，并使用 Perplexity 进行调试。

通过更改 JavaScript 代码，David 使扩展程序能够在访问特定网站时自动显示弹出窗口。

David 通过将背景变为完全不透明，改进了扩展程序的用户体验，使用户更专注于任务。

最终，David 成功构建并测试了他的 Chrome 扩展程序，证明了即使没有编程背景，也能通过 AI 工具实现目标。

Transcripts

my name is David Andre and I'm going to

show you how to build anything with

perplexity if you're new here perplexity

is an AI tool that specializes in web

search for example you can say tell me

about the Elon Musk and Yan Leon Twitter

brief and it will give you the answer

because it takes an llm a large language

model and gives it the power to search

the web so in this video I'm going to

show you how to use this powerful AI

tool to make literally anything even if

you aren't a programmer now you might be

thinking but David CAD GPT can also

search the web and you're right however

perplexity is a completely different

level check this out in ch GPT if we

look at this it's not even five sites

it's actually three while perplexity

went through 20 different websites and

we can see all of them are different

sources but what's even better is that

as you can see I'm using clo fre Opus

meaning in complexity you can choose

which llm you want to use and this is

also why a lot of programmers prefer to

use perplexity because you can use clo

fre Opus to generate the code and then

switch to GPT 4 to debug the code for

one subscription you get all of this

which is why if I only could pay for one

tool it would be perplexity now to be

honest even the free version is really

solid however in this video I'm going to

be using the paid version so if you want

50% off I'm going to include a link in

the description now I don't even know

what I'm going to build yet I'm going to

let perplexity choose that list out 10

types of cool projects that I could

build assume I am not a programmer and

what's great is that here in the focus

button you can actually change what

perplexity should focus on by default

it's on all which means search across

the entire internet you know exploring

all the sources as we saw before but you

can also do academic search in published

academic papers or writing which is one

of my favorites generate the text

without searching the web so for this I

would probably go with writing because I

just want the ideas I just want the llm

to generate ideas not necessarily look

online for them right distraction

blocker oh my God we could actually

build a simple productivity extension

perhaps okay I have an idea actually

something that lets you choose between

going to your task list and going to the

website you want to visit so

perhaps each time I visit I want to

visit wit.com or x.com you know both

domains I have to be checked in it would

give me two buttons one

redirecting me to my task list and the

other allowing me to continue to the

side give me

five

potential ideas how we could we could

execute actually I should probably

shouldn't use idea how we could execute

upon this idea five

potential let's say designs

okay now we're getting more spefic

specific and we are going to get into

building I have a empty python project

which actually I don't even know why I

have a python project um I guess I

didn't know we're going to build a

extension obviously for a Chrome

extension we need HTML CSS and

JavaScript but even if you didn't know

that I mean we'll see perplexity will

help us figure that out so uh it's

building up upon the chat right that's

the beauty of perplexity and especially

CLA 3 Opus because it's it's using the

llm obviously the LM is the brain it's

the main thing and perplexity just

builds very nice search tools and you

know behind the scenes prompts on top of

it CLA free Opus has 200k context window

meaning your chat can be very long

before it runs out of context and it

also includes all of the Snippets from

the websites in the you know all the

retrieval in the context window so you

know it can fill up but with 200k cl if

you're using CLA 3E you have 200k you're

chilling you don't have to worry about

that so here are five potential designs

for a simple productivity Chrome

extension okay popup

prompt when the user tries to visit a

distracting site like Twitter a popup

appears the popup has two buttons go to

task list and continue to site hm almost

as if it's just my idea okay let's see

what it added

though yeah task list URL yes okay okay

to wup could have a simple clean design

with a reminder message about staying

focused uh I don't like these messages

to be honest I just want the button like

you know okay it could say like are you

choosing to waste time or back to work

or something like that okay sidebar

Notch when the distracting side loads a

sidebar slides in from the right of the

browser what

okay this is just bad full page

intertial what what is that word inter

okay I don't even

know extension redirects you you want to

stay

focused okay this I don't know what what

exactly is different here Omni books

action whatever I'm not even going to

read this I'm I just want the first

execution

this design is by far the best

okay assume I am a complete beginner

when it comes to

HTML CSS and JavaScript tell me what to

do

next step by step I do have vs code

installed and open by the way if you

don't have vs code installed and open

just use perplexity I mean it's amazing

how many people even people who are in

the AI space are still um not using

perplexity okay wait this is what I

wanted to sear show you if you're using

the pro search in perplexity which you

know is 20 bucks a month or 10 if you

use my link below you sometimes get this

followup question which personally um

sometimes I would like to skip it

because I just want to go fast but a lot

of people love this feature because it

you can give it more context that you

wouldn't think of while writing the

original prompt so let's see what's the

URL of your task list uh I'm just going

to do skip for now we'll figure that out

later I'm going to use todoist but it

doesn't matter the design of the Chrome

extension is exactly the same no matter

where you want to redirect

so

okay let's

see again goes through 20 different

sources and starts giving you Steps step

by step now yeah as I was saying if you

get stuck at any point just please use

this tool so many people just ask you

know even email me questions that could

be answered by perplexity I'm like

baffled every single day I get at least

one or two emails that are just simple

questions that could even chat GPD or

Pro answer so please don't be one of

those people that just consumes videos

actually start using this tool in your

day-to-day replace your Google if you

have your default window uh set to

Google or what whatever replace it with

perplexity or CH GPD that way you start

building the habits to become an AI

focused person which you know actually

using the AI tools is how you get the

benefits not watching videos about it so

let's see what CLA free is cooking up

great choice blah blah blah step one

create the project directory in vs code

click on file in the top menu and select

open folder so let's do that

actually okay so I'm going to do it like

this oh um open folder we have that

yes okay we we have a folder I just

named it code but whatever new file I'm

going to name it manifest.json okay new

file manifest.json

again you don't have to know any

JavaScript here I'm a complete dummy

when it comes to JavaScript I mean I

made one video on it but that's about it

so been a few months I probably forgot

about a lot but that's the thing

JavaScript and actually Json is you know

um JavaScript object notation if I'm not

mistaken you don't have to know this you

can use the AI tools to do that for you

you just need to have an idea and make a

decision to build that idea that is all

you need in this age so don't be

overwhelmed like oh my God I don't

understand every line of code you can

build simple Chrome extensions without

understanding the code it just just

watch what I do okay so we have the file

manifest ad Json and open it copy and

paste the following code going to click

the copy button plain and simple and

going to paste it control s to save so

just a quick glance we can see that we

have multiple different categories in

the Json file different lists

permissions host permissions actions

default popup some icons or we probably

need to add those I guess um whatever

let's see this manifest file tells

Chrome about your extension its name

version icons blah blah blah step three

create the popup HTML file okay I don't

know why they named it popup but I guess

that's going to be the name of our

productivity Chrome extension just uh

popup new file HTML and this is going to

be the main HTML and I'm going to Simply

copy paste this code that perlex gave

me okay so this is the text do you want

to continue to this potentially

distracting site or go to your task list

instead this is this is so weak we need

to have do you really want to waste your

life away okay I'm just going to do

David

Andre's

productivity super extension uh let's go

back this creates the basic structure of

your popups so we need the JavaScript

right now so I'm just going to name this

it's very important to have the exact

same name that way there is no conflict

when the files want to communicate with

each other that's why I'm copy pasting

it from perplexity instead of manually

typing and let's copy the JavaScript

okay I guess this is missing so we need

to expand on this Javascript file maybe

CL 3 was feeling a bit lazy we'll see

this JavaScript waits for the popup well

actually no it needs to just click and

then do nothing right okay maybe we have

to change this to

be replace the current URL instead of

opening a new window we'll see we'll see

the JavaScript waits for the popup HTML

to load then finds the two buttons and

adds click events listeners to them Tas

clicks button opens a new tab to

ur okay we need to change that yeah we

need to change that our script okay our

script needs to change the current

website replace the to-do line what

allow continue to the original side to

let the user continue to the original

distracting side when they click

continue replace SL SL Todo

line okay I don't know why I didn't

write that right away but

sure this code grabs the current Ur and

reloads it then closes the pop okay

style okay now we need to see CSS to you

know add some style so it's not

completely Bare Bones and I did exactly

what I advised against doing which is

typing the name but since it's so simple

you know it's hard to mess up anyways

we're going to copy this obviously

CSS no point going over this customizing

it um you can customize it endlessly you

can spend endless hours adjusting colors

and borders but we're interested in

building a productivity Chrome extension

that works only using perplexity if you

noticed I haven't written a single line

of code I'm just getting perplexity to

search the web and use CLA free as the

llm to give me the

code I mean legit I'm not lying when I

say like I'm terrible at JavaScript I

know this like just the fundamentals of

HTML and CSS

so if you're not into programming if you

haven't bu built any websites in your

life if you haven't built any Chrome

extensions you can still do this just

ask it to go slower or explain it if you

want So Okay add icons download icon

images for your extensions

okay you know what actually why not

create these why not create these we can

create these within perplexity if you

most people don't know this but

perplexity can create images so right

here we have the generate image feature

and we can do that so choose the style

we can actually do custom

prompt

and um

Let's do an icon a minimalist icon for a

productivity Chrome

extension uh

simple

simple simple minimalist icon whatever

submit let's see what it Cooks up if

it's pretty bad I can always change to

uh D free in the settings I mean this is

okay I guess nothing crazy but the point

here is just have an icon so going to

open Photoshop and just make the three

different sizes 16 by 16 okay let's

start by 128 by 128 so I'm going to

do8

by

128 boom create and this is our

icon let's take this image and let's you

know I'm going to just screenshot it

paste and obviously it's much bigger

than that so we have to center it boom

boom and realign it obviously this icon

I mean I would spend a lot more time on

the logo but like this is not about the

logo so yeah this will work icon 128.

PNG

okay all

right so let's go back into Photoshop

and save this as one icon one 28 and El

has to be

BNG and the next one

was 48 and 16 okay so let's do the same

simply you know changing the name icon

48 and then going PNG and you don't have

to use Photoshop you can just any image

edit anything tool and what I just did

was very uh stupid because I did not

even change

the size so obviously I have to change

CH the size actually 48x 48 boom

create I'm just going to drag the icon

um I don't even mind doing that so

boom save now we can save this icon

48 and we need 16 as

well so we're going to have our free

icons for our productivity extension

which was generated by perplexity as

well it's ni to have everything

generated by complexity makes it um I

don't know makes it more nice more

complete you know shows you like you can

seriously do everything with just one AI

tool which is kind of insane you know

even a year ago you couldn't do that so

yeah so this is going to be icon 16 this

is the last one we need

beautiful now we have we have our free

icons let's go

back test your Chrome extension okay

exciting so actually we need to

do one more thing

right what I'm going to do is I'm going

to use Chad gp.com as our productivity

kind of ironic or actually let's

dolex.com why not I mean pity. a not.com

a that's going to be some different

website so I'm going to do the

suggestions right I'm going to

do copy our current JavaScript code and

I'm going to explain

what I envisioned so again you only need

the idea and the determination to see it

through so I'm going to say um here is

my current Javascript file boom paste

it I want to

make the following two changes and I'm

just going to copy this straight from

this our skip needs to change the

current

website okay

wait what else did I want to do oh yeah

I know okay the current website and yeah

yeah

so and

then current website not a new

tab okay our script needs to

change the current website

okay the URL for

the produ deductive option will be and

then we just give it perplexity a but

like the whole thing right so

boom okay this is going to be change

number

one and then change number two change

number two is to change the current

website not a new

tab

um option not just

open a new

tab

okay if the

user chooses to be

productive all right I think this is

solid let's see how perplexity CLA 3

updates it here's the updated JavaScript

code with the changes as

requested

okay so let me just copy the code and

paste it inside save

and then as you can see it changes the

URL to

this here is what changed the URL for

the productive option is now set to

perplexity for the second change instead

of opening a new tab The Screen Now

updates the current tabs URL to the

protective option

URL Chrome tabs query again you don't

have to understand any of this let's

just test it out okay so let me say

great now give me step by step

instructions on how I should test my

extension out I still only have it in vs

code so it's good to remind it of the

current state of the project where

you're in and give it in as much context

as possible uh is this necessary I have

t project I don't think this is

necessary so I'm going to skip it it

might be necessary though we'll see I

guess if it

struggles H so we might need to do

developer mode and and again if you

haven't built extensions you will not

know that but it I'm betting it will

tell us that so here are stepbystep

instructions for testing your Chrome

extension from V by the way one thing I

should have done with this prompt is

turn off the pro search that way it was

it would be faster because I don't need

to go through 20 websites for

this you know this is a good thing you

learn over time when you can trust the

llm and when you need external website

so open your extension um

okay is the Manifest properly set up pop

up

HTML we'll see I guess the best way is

to test it

out ensure your extensions manifest

file in Chrome open the extension

page actually in Brave so whatever but I

can open it like this so these are my

Chrome extensions as you can see I'm

using 1 two three

4

five for productivity you can say like

even the you know hu block origin is for

productivity but yeah I'm using five

productivity extensions so time to add a

six one if you don't have any extensions

obviously it will be empty but you

probably have a few so you will see them

you have to toggle developer mode first

now let's go back let's follow the

instructions I mean I'm I'm not doing

anything crazy

after enabling load unpacked so we have

to click on load unpacked this will open

up um

simple folder so I'm going to go into

here and we have the code right here

what do we have to search though let's

see H in the file dialogue that appears

navigate to your extension project

folder select

folder all right so I have to load

unpacked and select my folder here

select folder boom we have the extension

with the correct icon loaded helps you

stay focused by redirecting from

distracting sides where is that written

in the Manifest yes sir beautiful let's

go

back if the

file if the file dialogue that appears

what okay yeah we did that chome will

now load extension if there are no

errors you should your extension with

its icon beautiful if your extension has

a popup click the extension puzzle icon

in the Chrome toolbar and pin your

extension for easy to use during testing

so we can actually do that you can pin

it and test it out more

easily test your extension functionality

if it has a popup click the extensions

icon to open it interact with your

extension and verify it behaves and

expect it so okay um

let's let's try it out right what I'm

going to do is I'm actually going to

turn off this one because I have this

setup for Twitter as well as this one so

I'm going to turn these two off and I'm

going to turn our off just to test it

out so this is what happens when I go to

Twitter by default right open up Twitter

and it just opens up right going to load

the feed and we have some posts that are

probably just wasting our time by the

way this is arav inas the creator of

perplexity it's kind of ironic that

right now I'm making video on perplexity

and one of the top tweets is from him so

now I'm going to close Twitter I'm going

to enable our extension productivity

extension super original name let's

rename that let's do

David's super

duper extension boom save a little bit

more fun uh I'm going to click on reload

boom and we reloaded the name beautiful

let's go back to Twitter and test the

moment of

truth it did not

work maybe it's because of it's

x.com yeah it's yeah I think it's

because of that so let's go back to

perplexity and uh mention

it I went onto Twitter and it did not

work maybe it's because recently Elon

migrated Twitter to

x.com but I would

rather make the

extension work on both URLs just to be

safe and now we can actually give it the

code so probably the JavaScript is the

most important one and actually it's if

am I crazy or is it checking the URL

somewhere I don't even know man okay

actually I'm going I'm going to include

all that in PR so here is

the Json file

boom then I'm going to do the HTML

file here is the HTML

file boom you know separated with these

four dashes um that way you keep the

prompt organized here is the Javascript

file and the reason I'm doing this is to

give the llm context again to remind it

of the current state of the project that

way it knows what to change and what to

keep and here is the Cs s s file

boom analyze the entire

project write down a

paragraph or two reasoning why it

probably doesn't work and then only then

implement the changes the reason I'm

asking to do this is to burn some tokens

on reasoning on an analysis before

it you know starts changing stuff up

after analyzing project I can see a

couple of reasons functionality is not

tied to specific websites oh

no that is a

problem yeah okay so to make the

extension work specifically for Twitter

and x.com you'll need to modify the code

to check the current website URL and

only show the popup or perform actions

if the user is on one of those sites

here's how you can Implement those

changes update the JavaScript code right

so I'm going to copy this paste into

JavaScript make sure make sure you paste

the correct file you know you don't want

to paste JavaScript into CSS or vice

versa and

then we update the CSS update the CSS to

initially hide the

popup wait

what okay just the body I

guess we need to change the CSS body

boom and then wait what is in this

updated code we use chrome. tabs. Query

to get the current types URL okay if

it's Twitter or

X includes yeah okay that's

good we showed the

popup all right adding display none

let's let see so I've saved these both

files with contrl s make sure everything

is saved let's go back to our extensions

and reload this very important reload it

now let's open up Twitter

again and it still does not work let's

see why does the extension not work

reload

it update extensions

now I think that's going to ignore our

extension but whatever uh yeah I don't

know why this doesn't work wa is it like

I have to click this or

something oh I have to click the

extension and then it works go to task

list

oh so okay the extension is solid but it

just needs to appear take up the whole

screen I see okay

so all right yeah

yeah the extension is basically finished

maybe this is Famous Last Words except

for the fact that I have to click on the

icon of the extension to make it pop up

and redirect me to to the

productive option this is not how I

envisioned the Chrome extension to run

it has to

automatically open

while I

visit either of these two sites taking

up the entire screen and not letting me

browse

Twitter the current

functionality is I mean okay I'll say

the

core features are there it's just the UI

that needs to

change because right now it's

not making not going to make

me any more

productive let's be honest all of us

need Custom Chrome extensions because

all of us has different sites or styles

of wasting time which is just beautiful

now you can build your own Chrome

extension 5 years ago was 50 times

harder let's see if perplexity

understands the issue

actually you know what for this I have

an idea we should probably go to a new

threet that's just for writing and paste

that inside I'm going to do that I'm

going to go here take this entire

prompt okay I'm going to take this

entire prompt put it

here and then

oh actually you know

what yeah we should probably do this in

writing mode that way we don't get

unnecessary

interruptions yeah yeah this is my bad I

should have not done this so I'm going

to what changed CSS changed so let's do

this uh let's oh my God okay

whatever all right

so I just want to copy this long prompt

to be

honest yeah so I'm going to use the

perplexity feature which is for editing

the

prompt sometime it's kind of annoying

it's like here edit query but you have

to scroll to the bottom of the query

find the button could be better could be

next to the prompt but hey whatever so

I'm going to copy this go here create a

new threet for writing do not um I'm not

going to use the pro feature because I I

don't need it um okay I'm going to

actually send it so we create a new

thread and then I'm going to change the

what do we change we change the

Javascript file so I'm going to stop the

generation and edit the

prompt Bas on is the same JavaScript

file is different boom save oops not

like

this and then CSS file has been altered

slightly

so the extension works but only when I

click the

icon in the top right it has to automat

that is

not ended it it has to automatically

take up the whole screen when

visiting twitter.com or

x.com preventing me from wasting time on

the

website okay make the required changes

beautiful so now we are not going to get

any interference from the web search

because right now we don't need web

search before it was useful now it could

be potentially distracting the

llm we just want to use the best of CLA

3 which is amazing at programming to

help us fix this so to make the

extension orally take up the whole

screen when visiting twitter.com you

need to modify the Manifest file so I'm

going to copy this manifest file I'm not

sure why it's not in what the

heck why is not as a code

block make sure to Output the code in

code

blocks why did it not do

that that's very

weird yeah much

better yeah I don't know why I didn't do

that so I'm just going to copy this boom

this is the Json go back change this up

and then we need to change

the oh new file new file name content JS

interesting all right why not new file

content Js

copy the

code wait remove the popup JS file Jesus

okay I'm just going to create a new

folder. old and drag popup JS into there

sure

and I should probably do new new folder

icons and then drag everything in there

but we have to you know change it

obviously so we have to do icon slash

hopefully this

works or maybe slash icons or whatever

we'll see we'll see if it works or not

um update CSS

okay so from the

H2 boom

save and let's see let's reload the

extension and see if third time is the

charm we have it reloaded let's go

Twitter can it block it can it block it

no it did not block

it

h x.com

home x.com

all right so obviously we have to

somehow debug it which is kind of tough

because I'm a complete Noob when it

comes to Chrome

extensions but hey at least I have the

power of AI at my fingertips so

whatever uh we are right here so I'm

going to close this threet I'm not using

that one

anymore I'm going to

say the extension still does not work

when I visit x.com or twitter.com it has

to it has

to take up the entire

screen before the site even loads and

showing the two

buttons in the

center

with the text above very simple

step one brainstorm three

paragraphs where you look at all of the

current files

reasoning on why it does not work step

two

implement the changes and give me the

full code of all changed files in code

blocks I don't know why I had to mention

that last time but it's good to use code

blocks for you know just visibility

because without them it's kind of hard

to orient yourself into

response it appears the main issue lies

in the content script script is injected

into web page I have to this load

it it is the overlay is not displayed

though like I'm here and overlay does

not

display hm

TR again then there you know no shame in

debugging and this is also maybe a good

thing that is happening live as I'm

doing it is that it's you know if it

worked on the first try I think it would

set unrealistic expectations because you

might want to build something more

advanced and it might take you few few

tries to do it you would be like oh my

God David why did it work for you

doesn't work for me now you can see like

I have to actually put some effort and F

into it to make it happen because AI is

not perfect yet now obviously I could

use more AI tools I could utilize GitHub

copilot from vs code I could utilize

curser IDE CH

GPD I was just this video is about

building anything with Gemini so I just

want to not Gemini perplexity I just

want to use perplexity to do the entire

job so I think we can do that so let's

see um

but actually I have an idea earlier if

you remember I said that gbd4 is better

at

debugging than perplexity right so what

I'm going to do is I'm going to copy

this go into settings change the AI

model to GPT 40 the greatest model from

open AI which is perhaps the best model

at debugging and I'm going to use this

to debug the code let's see if it

figures out let's let's cut to the chase

update the Manifest Json

file okay

copy boom save might need to bring this

guy up revive

it inject a full screen overlay when you

visit these sides here I can do it so we

have the new Json file again I'm going

to copy paste save Let's see we made the

changes maybe I should tell it to always

output the whole code or something like

that we'll see I'm going to reload it it

is reloaded and actually let's do by

attacking distracting sides save reload

right beautiful let's go Twitter oh

excuse my language but it actually works

I mean I can still scroll it in the

background but this is this is

amazing

wow I'm actually going to use this

extension I'm not even not even joking

so go to task list and we go to

perplexity which is the URL we set

oh my God and okay let's do another test

it actually works go continue to side

and I can continue to side wow obviously

this is not perfect you know if I were

to spend more time on this I could fix

it up but like wow okay maybe uh one

last change I want to do is that you

know instead of like lowering the

opacity just make the background black

like fully

black uh yeah I mean I'm just going to

I'm just going to ask it why not

wow this is amazing this is actually

amazing man I'm going to be using this

extension like actually so let's see um

instead of dimming

the background slash lower lowering

opacity which is what the code is doing

is doing now why not just make it fully

black so I don't even see the tweets

below it

make the necessary changes is it in the

CSS I'm going to copy change the CSS

file and then we do no changes to

anything else yes makes sense reload the

extension and let's see boom fully black

background I mean I would say this is

amazing success as you can see it took

me less than an hour to build a Chrome

extension that will save me many hours

in the future and I'm a complete Noob

when it comes to JavaScript Json HTML

and CSS I've built all okay all of the

Chrome extens I've built in the past

were with ch gbt or proxity none of them

by myself so don't get scared thinking

oh my God it involves code I cannot do

this you absolutely can just decide what

you're going to do and start making

progress on it and as I always say if

you get stuck in anything just ask

perplexity to help you get unstuck St

describe the situation give it all the

necessary context and use these AI tools

to achieve your goals if you found this

video valuable Please Subscribe because

I'm I'm blown away I'm actually going to

use this and if you want the code to uh

extension I'm going to leave it um in

the description below thanks for

watching