Create a Keyword Generator Chrome Extension🔥

Introduction

Browser extensions have become increasingly popular in recent times. They are no longer just simple mini applications, but rather well-tailored, profitable products that are used by hundreds of users every day. As these extensions grow in size and complexity, it becomes important to consider building them using helpful JavaScript libraries. By leveraging these libraries, developers can create more attractive and engaging extensions that offer a better user experience. With the right tools and techniques, browser extensions can be transformed into powerful tools that users rely on every day.

In this tutorial I'm going to teach you, how you can create a a use-full and very power-full google chrome extension. Anyway, to do this we are goin to use CRXJS which is a vite plugin and also most famous and use-full ReactJs.

Here's a little sneak peek 👀

• Main screen
• Modal screen

Technology

Let's talk about about technology which we are goin to use in this tutorial.

Vite

Vite is a build tool for modern web applications. It is designed to be fast and efficient allowing developers to quickly build prototype their applications. Vite supports a variety of modern web technologies, including ES modules, TypeScript, and CSS preprocessors. It also includes a built-in development server with hot module replacement, making it easy to develop and test applications in real-time. Vite is a popular choice for building Vue.js applications, but it can also be used with other frameworks and libraries. Overall, Vite is a powerful and flexible tool that can help streamline the development process for modern web applications.

React | Preact

ReactJS is a JavaScript library for building user interfaces. It uses a component-based and a virtual DOM to efficiently update the UI. ReactJS is fast, flexible, and widely used in modern web development.

or

If you want you can use Preact. PreactJS is a lightweight alternative to ReactJS, designed for high performance and compatibility. is often used in applications where performance is critical and has a small footprint.

I think you need know what is CRXJS. So, here is my the question and answer for you🙂

What is CRXJS?

CRXJS Vite Plugin is a tool that helps you make Chrome Extensions using modern web development technology.

Alright now we can jump to start coding 🚀

Code

To create our CRXJS project just we need to run this code into our terminal. There was a funny thing @jacksteamdev does predict to create a CRXJS project it take only 60 second.😍

npm init vite@latest

Now select typescript as a template and choice React for this project.

When init finished then run this command to install plugin.

yarn add @crxjs/vite-plugin@latest -D

Finally we are ready to see our output🙂. Just 1 step is left.

We have to update the Vite config

To do that just go to your project directory and find vite.config.ts. Open this file then delete everything and paste this code right there.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { crx } from "@crxjs/vite-plugin";
import manifest from "./manifest.json";

export default defineConfig({
  plugins: [react(), crx({ manifest })],
});

Now if I don't wrong currently your are face a error message in the 4 line.😅
Howerver to fixed this issue just call manifest.json from tsconfig.node.json.
Open tsconfig.node.json from the project dir. Now you have to add manifest.json file in the include array. Anyway here is the code example.

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts", "manifest.json"]
}

Now create a file called manifest.json with this command

touch manifest.json

After creating manifest.json file then past this code into your new manifest.json file.

{
  "name": "Keyword Maker",
  "description": "A powerfull keyword maker google chrome extension. Give a paragraph it's make keyword for you.",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html",
    "default_title": "Keyword Maker",
    "default_icon": {
      "16": "icon.png",
      "24": "icon.png",
      "32": "icon.png"
    }
  },
  "icons": {
    "128": "icon.png",
    "16": "icon.png",
    "256": "icon.png",
    "48": "icon.png"
  }
}

As you can see I'm using icon. Bu we don't have any icon yet. However, you can download a icon from anywhere and paste into your /public folder.

I hope now your project directory should look like this:

Run run the development server

yarn run dev

That's it! CRXJS will do the rest.

Now it's ready to add to our chrome. to do this follow this step. or if you know to load manifest in extension then continue this...

Add the extension to Chrome

Let's try it out.

When the build completes, open Chrome or Edge and navigate to chrome://extensions. Make sure to turn on the developer mode switch.
Drag your dist folder into the Extensions Dashboard to install it. Your extension icon will be in the top bar. The icon will be the first letter of the extension's name.

Now just change the App width;

/* App.css */
.App {
  text-align: center;
  min-width: 350px;
}

Now can see like this output. 🚀

Add UI library and another dependencies.

For the UI purpose I'm going to use Chakra-UI which is very popular component based UI library. Also we will a use a react-hot-toast for make a awesome toast.

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-hot-toast axios && yarn dev

So far, we have ready to create awesome UI and functionality.
Anyway, we have to set ChakraProvider from the Chakra-UI also we have to set Toaster in the main.tsx file. To do that just go to the src -> main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
// import "./index.css";
import { ChakraProvider } from "@chakra-ui/react";
import { Toaster } from "react-hot-toast";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <ChakraProvider> // chakra provider setup
      <Toaster position="bottom-center" reverseOrder={false} /> // toaster provider setup
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

let's create main screen UI
Here is the code. for App.tsx

import {
  Button,
  Center,
  Container,
  HStack,
  Heading,
  Image,
  Text,
  Textarea,
  VStack,
} from "@chakra-ui/react";

const App = () => {
  return (
    <Container w="400px" h="auto" mx="auto" p={4}>
      <Center>
        <Image w="16" src="icon.png" alt="logo" />
      </Center>
      <VStack spacing={0} my={2}>
        <Heading as="h1" fontSize="xl" fontWeight="bold">
          Keyword Macker AI
        </Heading>
        <Text
          fontSize="sm"
          color="gray.600"
          fontWeight="400"
          textAlign="center"
        >
          Past your text in the bellow section and it will generate{" "}
          <strong>Keyword</strong> for you. 🙂
        </Text>
      </VStack>
      <VStack my={4}>
        <Textarea w="full" h="auto" placeholder="Past your text here..." />
        <Button colorScheme="twitter">Generate Keyworld</Button>
      </VStack>
      <HStack
        w="full"
        textAlign="center"
        fontWeight="semibold"
        mt={3}
        justify="center"
      >
        <Text>Created by </Text>
        <Text
          cursor="pointer"
          color="green"
          textDecor="underline"
          onClick={() =>
            window.open("https://www.showwcase.com/devlopersabbir")
          }
        >
          @devlopersabbir
        </Text>
      </HStack>
    </Container>
  );
};

export default App;

Now create some state using useState React hooks. I'm going to create text state for store prompt text. And 2nd one is keyword state that will be help us to store our response data as keyword. 3rd is loading state to make spinner when HTTP request is pending... And the last one is useDisclosure hooks from the @chakra-ui/react because of we will create a modal later.

Also we have to take text from the onChange method. after then now set a click handler into our generate button.

State

  const [text, setText] = useState<string>("");
  const [keyword, setKeyword] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const { isOpen, onOpen, onClose } = useDisclosure();

Handler Function

const generate = async () => {}

Update our code

<Textarea
          onChange={(event: any) => setText(event.target.value)}
          w="full"
          value={text}
          h="auto"
          placeholder="Past your text here..."
        />
        <Button disabled={loading} colorScheme="twitter" onClick={generate}>
          {loading ? <Spinner /> : "Generate Keyword"}
        </Button>

Our function should be async because of we will make HTTP request.

OpenAI integration

Now we are going to create api_key for generate our keyword. We will use OpenAI platform. If you have openAi account then okey or if not then create a new account. And now go to this url to create api key Click me to create api_key.

Copy secret key and paste anywhere because of we will never see this key again.

Now create a variable in the App.tsx file called YOUR_API_KEY.

const YOUR_API_KEY = "Enter your secret key here...";

So far, we have finished a lot's of thing. At this time we are ready to make a http request using axios and our api key.

Configure body data & header

Make a object using data variable for prompt data.

const datas: any = {
       model: "text-davinci-003",
      prompt: `Make some keyword with this text. For example prompt is javascript and we expect response should be like js, javascript, javascript course, js tutorial, JavaScript Programing.. etc. Here is the text prompt: ${text}`,
      temperature: 0.5,
      max_tokens: 200,
      top_p: 1.0,
      frequency_penalty: 0.8,
      presence_penalty: 0.0,
     };

Now set up our header with bearer token.

 headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${YOUR_API_KEY}`,
          },

Alright now you are ready to seen full App.tsx file???

Here is our complete App.tsx code.

import {
  Button,
  Center,
  Container,
  HStack,
  Heading,
  Image,
  Spinner,
  Text,
  Textarea,
  VStack,
  useDisclosure,
} from "@chakra-ui/react";
import { useState } from "react";
import Modals from "./components/Modals";
import axios from "axios";
import { toast } from "react-hot-toast";

const App = () => {
  const YOUR_API_KEY = "sk-xxxxxxxxxxxxxxxxxxxxxxxx";
  const [text, setText] = useState<string>("");
  const [keyword, setKeyword] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const { isOpen, onOpen, onClose } = useDisclosure();

  const generate = async () => {
    setLoading(true);
    const datas: any = {
      model: "text-davinci-003",
      prompt: `Make some keyword with this text. For example prompt is javascript and we expect response should be like js, javascript, javascript course, js tutorial, JavaScript Programing.. etc. Here is the text prompt: ${text}`,
      temperature: 0.5,
      max_tokens: 200,
      top_p: 1.0,
      frequency_penalty: 0.8,
      presence_penalty: 0.0,
    };
    try {
      const { data } = await axios.post(
        "https://api.openai.com/v1/completions",
        datas,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${YOUR_API_KEY}`,
          },
        }
      );
      const keyword = data.choices[0]?.text?.trim();
      toast.success("Keyword generated😍");
      setText("");
      onOpen();
      return setKeyword(keyword);
    } catch (error: any) {
      if (!error?.response?.data || !error?.response)
        return toast.error("Something went wrong!😒");

      const mess = error?.response.data?.message;
      if (mess) return toast.error(mess);
      toast.error("Fail to generate keyword😪");
    } finally {
      setLoading(false);
    }
  };
  return (
    <Container w="400px" h="auto" mx="auto" p={4}>
      <Center>
        <Image w="16" src="icon.png" alt="logo" />
      </Center>
      <VStack spacing={0} my={2}>
        <Heading as="h1" fontSize="xl" fontWeight="bold">
          Keyword Macker AI
        </Heading>
        <Text
          fontSize="sm"
          color="gray.600"
          fontWeight="400"
          textAlign="center"
        >
          Past your text in the bellow section and it will generate{" "}
          <strong>Keyword</strong> for you. 🙂
        </Text>
      </VStack>
      <VStack my={4}>
        <Textarea
          onChange={(event: any) => setText(event.target.value)}
          w="full"
          value={text}
          h="auto"
          placeholder="Past your text here..."
        />
        <Button disabled={loading} colorScheme="twitter" onClick={generate}>
          {loading ? <Spinner /> : "Generate Keyworld"}
        </Button>
      </VStack>
      <HStack
        w="full"
        textAlign="center"
        fontWeight="semibold"
        mt={3}
        justify="center"
      >
        <Text>Created by </Text>
        <Text
          cursor="pointer"
          color="green"
          textDecor="underline"
          onClick={() =>
            window.open("https://www.showwcase.com/devlopersabbir")
          }
        >
          @devlopersabbir
        </Text>
      </HStack>
      <Modals data={keyword} isOpen={isOpen} onClose={onClose} />
    </Container>
  );
};

export default App;

Note: As we can see here have a Modals component. But we haven't create like this component yet.
To do that let's create a component folder into src -> component -> and create a component called Modals.

So, here is our modal component code.

import {
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
} from "@chakra-ui/react";
import { toast } from "react-hot-toast";

interface IModals {
  isOpen: boolean;
  onClose: () => void;
  data: string;
}

const Modals = ({ isOpen, onClose, data }: IModals) => {
  return (
    <Modal size="sm" isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>Keyword</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Text fontSize="lg" fontWeight="500">
            {data}
          </Text>
        </ModalBody>
        <ModalFooter>
          <Button colorScheme="blue" mr={3} onClick={onClose}>
            Close
          </Button>
          <Button colorScheme="green">
            Copy
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default Modals;

As we can see in the Modals component we receive 3 parameter as a props. Also we use a interface. However, have you seen this?? we have copy button😎.
What do you thing??🤣
Sorry for lot's of fun. We will create a simple functionality for copy our result keyword. Okey, let's create...

Copy keyword in clipboard

const handleCopyClick = async () => {
    try {
      await navigator.clipboard.writeText(data);
      toast.success("🚀 Keyword copied🥹");
    } catch (error) {
      toast.error("Fail to copy the keyword!");
    }
  };

// add replace copy button line with this line.
<Button onClick={handleCopyClick} colorScheme="green">
            Copy
          </Button>

Finished

Finished our extension😁
Anyway, if you want you see full source code into my GitHub profile Repo Link. Also here is the YouTube video tutorial link
.
.

Author

Full Name Sabbir Hossain Shuvo. And the GitHub profile is https://github.com/devlopersabbir.

For support just Buy Me A Coffee
https://www.buymeacoffee.com/devlopersabbir