Chrome throws an error

[Jemeni11]

I cloned the repo and loaded it into Chrome. However, I'm getting an error.

'browser_action' requires manifest version of 2 or lower.

{
  ...
  "manifest_version": 3,
  "browser_action": {
    "default_title": "Color Picker",
    "default_popup": "index.html",
    "default_icon": "icon.png"
  }
}

I modified the file and changed it to manifest_version: 2 and I got a different error, a deprecation warning error.

Then I realized I'd already dealt with this before (literally last week lol :laughing:), so I fixed the problem The new manifest.json that throws no errors:

{
  "name": "Color Picker",
  "version": "1.0",
  "description": "A Chrome extension that lets you know the color codes of a website without opening devtools",
  "manifest_version": 3,
  "action": {
    "default_title": "Color Picker",
    "default_popup": "index.html",
    "default_icon": "icon.png"
  }
}

More on the new action API

One last thing. After loading the extension, when I click it, there's a small pop up and that's it. No modal. The console.log is also only logging to the extension's console and not the main one.

[kaf-lamed-beyt]

Broooo!!!

How can thank you!!! 😆

[kaf-lamed-beyt]

I honestly thought i had changed that manifest version tbh!

[kaf-lamed-beyt]

I realized just now that i did not set the width and height explicitly in the body element of the modal.

[kaf-lamed-beyt]

...and the reason why the colors are not being rendered is because, I didn't include the "content_script" property in the manifest file.

II'm working on that right now though

[kaf-lamed-beyt]

Hafa @Jemeni11,

I pushed some changes just now. I'd love you to help me test on your end too.

[Jemeni11]

Yo The pop up shows now The only problem I have now is how to use the extension

Also what does this do:

tokenElement.style.setProperty("--bg", item);

https://github.com/kaf-lamed-beyt/color-picker/blob/de6d72ffc4366961baf82fbc9e60d4076f2868c8/index.js#LL16C50-L16C50 Shouldn't this be

tokenElement.style.setProperty("background", item);

[kaf-lamed-beyt]

Sorry for circling back a bit late @Jemeni11

This snippet below

tokenElement.style.setProperty("--bg", item);

...attaches a custom CSS property to the style rule I'm using here https://github.com/kaf-lamed-beyt/color-picker/blob/de6d72ffc4366961baf82fbc9e60d4076f2868c8/style/app.css#L77-L82

They perform the same function to some extent.