DEV Community: Kumar Priyank

One-Click Chrome Extension: Change Your Background with Style (or Chaos)

Kumar Priyank — Thu, 02 Jan 2025 17:10:28 +0000

If you’ve ever wanted to spice up your browser with just a single click—because who has time for more than one, right?—then a One-Click Chrome Extension is what you need. These extensions are designed to do something useful (or hilariously pointless) with just the click of a button. In this article, we’ll show you how to build your very own One-Click extension in a snap. Get ready to change the world… or just the background color of a webpage. We’re not here to judge.

What is a One-Click Chrome Extension?

Think of a One-Click Chrome Extension as your browser’s magic button. You click it, and—voila!—something happens. Whether it’s changing a background color, giving you an inspirational quote, or triggering a dancing cat animation (we won’t stop you), the world is your oyster. For this tutorial, we’ll start with something simple: turning a webpage’s background into a soothing shade of light blue with one click. Easy? You bet.

Step 1: Create Your Extension Folder (AKA The “Everything Is Gonna Be Fine” Folder)

First, you need to set up a folder to store your extension files. Call it one-click-extension or something more dramatic like turn-the-world-blue. Inside this folder, you’ll need a few essential files:

manifest.json (your extension’s brain)
background.js (this is the wizard behind the curtain)
popup.html (what the user sees when they click the extension icon)
popup.js (the magic script that does things)

Folder Structure:

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

Step 2: Create the Manifest File (AKA the Extension's Brain)

Your manifest.json is the brain of your extension. It tells Chrome what your extension does and how to make it work. Without it, your extension is like a car without an engine—nice to look at but completely useless.

Here’s a sample manifest that will tell Chrome to load our extension:

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

Step 3: Build the Popup UI (AKA The “Hey, Click Me!” Button)

The popup is what users see when they click on your extension icon. In our case, we want a button that, when clicked, changes the background color of the page. Pretty straightforward, right? It’s like a magic wand, but without the danger of being cursed.

Here’s the popup.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>One Click Background Changer</title>
  <style>
    body {
      width: 200px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f4f4f4;
      font-family: Arial, sans-serif;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <button id="change-bg-btn">Change Background</button>
  <script src="popup.js"></script>
</body>
</html>

Step 4: Handle the Button Click (AKA The Button Does Stuff!)

Now let’s make the button do something useful (or at least entertaining). In the popup.js file, we’ll make it change the background color of the page to a soothing light blue. Or, you know, we could make it change to neon green if you want to be adventurous. But today, we’re feeling chill.

Here’s the magic code:

document.getElementById('change-bg-btn').addEventListener('click', () => {
  // Tell Chrome to change the background color to something *beautiful*
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      func: changeBackgroundColor,
    });
  });
});

function changeBackgroundColor() {
  document.body.style.backgroundColor = "lightblue"; // Calm, relaxing, and blue
}

Step 5: Background Script (AKA The “Don’t Touch Me, I’m Working” File)

Your background.js file runs in the background. It’s the silent worker that does all the heavy lifting—like making sure your extension works when you’re not looking. In this case, we don’t need much, but you could add more complex features here if you were feeling fancy.

For now, just add this basic setup:

chrome.runtime.onInstalled.addListener(() => {
  console.log("One-Click Background Changer Extension Installed!");
});

Step 6: Add Icons (Optional, But Highly Recommended)

Icons are like your extension’s wardrobe—they make it look good in the toolbar. You can add icons of different sizes (e.g., 16x16.png, 48x48.png, 128x128.png). These will be used by Chrome whenever it needs to display your extension.

Just create an icons folder and add the icons you want to use.

Step 7: Load Your Extension into Chrome (AKA The “Moment of Truth”)

It’s time to test your masterpiece. Here’s how to load your extension into Chrome:

Open Chrome and go to chrome://extensions/.
Enable "Developer mode" (it’s like enabling cheat codes for life).
Click on "Load unpacked" and select the one-click-extension folder.
Your extension icon should now appear in the toolbar. Look at it. Admire it. Click it.

Step 8: Test It Out (AKA The “Yay, It Works!” Moment)

Click on your extension icon. A popup should appear with a button that says “Change Background.” When you click it, the background color of the current webpage should turn light blue, like a calm ocean on a perfect day.

Conclusion (AKA The “You Did It” Section)

Congratulations! You’ve built your very own One-Click Chrome Extension. This simple tool can be expanded into anything you want, whether it’s changing the color of the page, adding motivational quotes, or making the page play smooth jazz. The possibilities are endless.

Now that you’ve got this under your belt, you’re ready to make the internet just a little bit more fun. Go forth and create something amazing, or at the very least, something that will make your friends think you’re some kind of wizard. ✨

How to Implement Image Drag-and-Drop in React

Kumar Priyank — Thu, 02 Jan 2025 17:03:46 +0000

How to Implement Image Drag-and-Drop in React Using Only CSS

React is widely recognized for building interactive UIs. In this tutorial, we’ll guide you through creating a drag-and-drop feature for images in React with just CSS.

Step 1: Set Up Your React Project

Start by setting up your React project. You can use create-react-app for an easy setup.

npx create-react-app drag-and-drop

Step 2: Update `App.js` and `App.css`

Next, modify the App.js file to create a container for the image and a heading.

import './App.css';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area"></div>
    </div>
  );
}

export default App;

In App.css, style the page:

.App {
  text-align: center;
  width: 100vw;
  height: 100vh;
}

.heading {
  font-size: 32px;
  font-weight: 500;
}

Step 3: Create the `ImageContainer` Component

Create a new file ImageContainer.js and define a basic drag-and-drop container.

import React from 'react';

const ImageContainer = () => {
  return (
    <div className="image-container"></div>
  );
};

export default ImageContainer;

Style this container in ImageContainer.css:

.image-container {
  width: 60%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 0, 0, .3);
}

Step 4: Add Image Upload Functionality

Enhance the ImageContainer with a file input and text instructions for the user.

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
  const [url, setUrl] = React.useState('');

  const onChange = (e) => {
    const files = e.target.files;
    if (files.length > 0) {
      setUrl(URL.createObjectURL(files[0]));
    }
  };

  return (
    <div className="image-container">
      <div className="upload-container">
        <input
          type="file"
          className="input-file"
          accept=".png, .jpg, .jpeg"
          onChange={onChange}
        />
        <p>Drag & Drop here</p>
        <p>or</p>
        <p>Click</p>
      </div>
    </div>
  );
};

export default ImageContainer;

And style the upload-container:

.image-container {
  width: 60%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 0, 0, .3);
}

.upload-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.upload-container > p {
  font-size: 18px;
  margin: 4px;
  font-weight: 500;
}

.input-file {
  display: block;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

Step 5: Preview the Image

Modify the component to conditionally render the uploaded image or the drag-and-drop area.

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
  const [url, setUrl] = React.useState('');

  const onChange = (e) => {
    const files = e.target.files;
    if (files.length > 0) {
      setUrl(URL.createObjectURL(files[0]));
    }
  };

  return (
    <div className="image-container">
      {url ? (
        <img className="image-view" style={{ width: '100%', height: '100%' }} src={url} alt="" />
      ) : (
        <div className="upload-container">
          <input
            type="file"
            className="input-file"
            accept=".png, .jpg, .jpeg"
            onChange={onChange}
          />
          <p>Drag & Drop here</p>
          <p>or <span style={{ color: "blue" }}>Browse</span></p>
        </div>
      )}
    </div>
  );
};

export default ImageContainer;

Step 6: Import and Run the Application

Finally, import ImageContainer into App.js and run the app.

import './App.css';
import ImageContainer from './ImageContainer';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area">
        <ImageContainer />
      </div>
    </div>
  );
}

export default App;

Now you can run the app and enjoy coding your image drag-and-drop feature with React and CSS.

The tutorial covers how to set up a basic drag-and-drop area for images with React, utilizing file input and CSS for styling, and handling the image preview.