Skip to content
Docs

Color Changer

This Extension allows you to change the color of the background of the page currently opened in the tab.

  • Directorycolor_changer_extension
    • manifest.json
    • content.js
    • popup.html

manifest.json

Section titled “manifest.json”
{
    "manifest_version": 3,
    "name": "Color Changer",
    "version": "1.0",
    "content_scripts": [
        {
            "js": ["content.js"]
        }
    ],
    "action": {
        "default_popup": "popup.html"
    }
}

popup.html

Section titled “popup.html”
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Popup Content</title>
    <style>
        .container{
            padding: 30px;
        }
    </style>
</head>
<body style="height:400px;">
    <div>
        <p>Change background color</p>
        <input type="color" id="backgroundPicker">
    </div>
    <div>
        <p>Change text color</p>
        <input type="color" id="textPicker">
    </div>
    <div>
        <p>Change div color</p>
        <input type="color" id="divPicker">
    </div>
    <script>
        // Handling color changes and sending messages
        document.getElementById('backgroundPicker').addEventListener('input', (e) => {
            browser.tabs.sendMessage(null, {type: "body_color", color: e.target.value});
        });
        document.getElementById('textPicker').addEventListener('input', (e) => {
            browser.tabs.sendMessage(null, {type: "text_color", color: e.target.value});
        });
        document.getElementById('divPicker').addEventListener('input', (e) => {
            browser.tabs.sendMessage(null, {type: "div_color", color: e.target.value});
        });
    </script>
</body>
</html>

content.js

Section titled “content.js”
browser.runtime.onMessage.addListener((request) => {
    if (request.type === "body_color") {
        document.body.style.backgroundColor = request.color;
    } else if (request.type === "text_color") {
        document.body.style.color = request.color;
    } else if (request.type === "div_color") {
        const divs = document.getElementsByTagName('div');
        for (let i = 0; i < divs.length; i++) {
            divs[i].style.backgroundColor = request.color;
        }
    }
});

Key Points

Section titled “Key Points”
  • Listening for Messages: Utilizes browser.runtime.onMessage.addListener to listen for messages from the Popup HTML.
  • Dynamic Style Changes: Based on the type of message received (body_color, text_color, div_color), the script dynamically updates the webpage’s styles accordingly.