So I was trying to build a chrome extension just like Colorzilla that picks up colors from the web. I have implemented EyeDropper API which is experimental.

This is my popup.js

document.addEventListener('DOMContentLoaded', function () {
    const btn = document.querySelector('.changeColorBtn');
    const colorGrid = document.querySelector('.colorGrid');
    const colorValue = document.querySelector('.colorValue');

    btn.addEventListener('click', async () => {
        let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

        chrome.scripting.executeScript(
            {
                target: { tabId: tab.id },
                function: pickColor,
            },
            (injectionResults) => {
                const [data] = injectionResults;
                if (data && data.result) {
                    const color = data.result.sRGBHex;
                    colorGrid.style.backgroundColor = color;
                    colorValue.innerText = color;
                    try {
                        navigator.clipboard.writeText(color);
                    } catch (err) {
                        console.error('Failed to copy color to clipboard', err);
                    }
                } else {
                    console.error('No color picked');
                }
            }
        );
    });
});

async function pickColor() {
    try {
        const eyeDropper = new EyeDropper();
        return await eyeDropper.open();
    } catch (err) {
        console.error('EyeDropper failed: ', err);
        return { sRGBHex: null };  // Return a fallback value
    }
}

Error handling response: TypeError: injectionResults is not iterable

The extension console is showing this error everytime

I don’t understand where I am wrong. Is the code not working or EyeDropper API?

I was trying to implement EyeDropper API but it’s not working