Design chrome new tab your own by building a simple chrome extension with HTML, CSS, JS and some open API's

Vijaya Kumar — Sat, 18 Sep 2021 07:07:07 +0000

Today, I want to share how to design chrome new tab with simple steps. Minimal configuration with basic knowledge of HTML, CSS and JavaScript and JSON.

I hope I'm able to help anyone who wants or needs to design their own chrome extension Here I am going to share how to design new tab. Like this we can create awesome chrome extensions.

Create a root folder inside that add new file name it manifest.json

{
  "name": "New Tab",
  "description": "Replace new tab page with a personal dashboard time, weather, quotes, and inspiration.",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "chrome_url_overrides": { "newtab": "index.html" }
}

How to add our source code to chrome browser as extension?

Open chrome browser go to settings page.
Select extensions link from left panel.
Turn On developer mode right top corner in extension page.
Click Load unpacked button and select your root folder which we created at beginning.
Turn off developer mode. Open new tab to see your design based on your HTML, CSS and JavaScript.

Write your own HTML, CSS and JavaScript and design your new tab as you like.

Note: We are storing data in chrome.storage method which we can access later wherever we need.

For reference I am sharing my design code [inprogress repo] link: https://github.com/vulchivijay/chrome-extension-newtab

Build a React accordion widget in 2 minutes

Vijaya Kumar — Sat, 18 Sep 2021 03:59:11 +0000

This is my first post in dev community. Today, I want to share build simple plain accordion using react. This section is really important section of an app or a website, since you have an opportunity to have important questions and answers about your services/product or even your industry and rank better organically in Google.

I hope I'm able to help anyone who wants or needs to build an accordion section for their website or their app.

I'm leaving the URL of the code and styles at the end of the article and also a working demo if you want to check it out.

We will use React useState hooks. Which is enough to accomplish the accordion implementation.

Simple Click event,


  const [active, setActive] = useState(-1);
  const accordian = [
    {
      title: 'Accordion 1',
      paras: [
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
      ],
    },
    {
      title: 'Accordion 2',
      paras: [
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
      ],
    },
    {
      title: 'Accordion 3',
      paras: [
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
      ],
    },
  ];

  const handleClick = (index) => {
    if (index === active) setActive(-1);
    else setActive(index);
  };

Then we have the DOM rendering part of the code using an onClick and ternary operators, like so

<ul className="accordian">
        {accordian.map((item, index) => {
          return (
            <li
              key={index}
              onClick={() => handleClick(index)}
              className={index === active ? 'active' : ''}
            >
              <div className="accordian-title">{item.title}</div>
              <div className="accordian-content">
                {item.paras.map((para) => {
                  return <p>{para}</p>;
                })}
              </div>
            </li>
          );
        })}
</ul>

demo link: https://stackblitz.com/edit/react-u5w7ex

DEV Community: Vijaya Kumar

Design chrome new tab your own by building a simple chrome extension with HTML, CSS, JS and some open API's

How to add our source code to chrome browser as extension?

Build a React accordion widget in 2 minutes