Messenger update causing poor readability

[LDRyan0]

There was an update to messenger, chat bubble appears white with light gray text. Update seems to have affected messenger-dark-theme also (jerry1100/messenger-dark-theme#28).

EDIT: interestingly replies still seem to have correct CSS

[dadanda]

if you can get the unpacked extension zip
in stylesheet.css, find --wash
then add this on the next line:
--chat-incoming-message-bubble-background-color: (use the same color as wash);
(so like its --chat-incoming-message-bubble-background-color: #2d3640; for deepblue,
--chat-incoming-message-bubble-background-color: #262626; for midnight and
--chat-incoming-message-bubble-background-color: #2a2a2a; for charcoal)
then load unpacked in the extensions page.
I will emphasize THIS MIGHT NOT WORK EVENTUALLY because this is on manifest v2 which is being deprecated.
I might try to make it to manifest v3 but that is a whole other can of worms.

[dadanda]

new manifest.json

{
"update_url": "https://clients2.google.com/service/update2/crx",

  "manifest_version": 3,
  "name": "Charcoal: Dark Mode for Messenger",
  "short_name": "Charcoal",
  "description": "Unofficial Messenger dark mode. Easily swap between dark and light mode.",
  "version": "1.4.2",
  "icons": {
    "128": "assets/[email protected]"
  },
  "action": {
    "default_popup": "charcoal_settings_popup.html"
  },
  "content_scripts": [
    {
      "matches": ["*://*.messenger.com/*"],
      "css": ["styles/stylesheet.css"],
      "js": ["js/settings.js", "js/init.js", "js/charcoal_settings.js"]
    }
  ],
  "permissions": ["storage"],
  "web_accessible_resources": [
  {
	"resources": ["assets/charcoal-messenger.svg",
    "assets/facebook-messenger.svg",
    "assets/midnight-messenger.svg",
    "assets/deepblue-messenger.svg",
    "charcoal_settings.html",
    "onboarding_dropdown.html"],
	"matches": ["*://*.messenger.com/*"]
  }]
}

in (folder)js/settings.js
find

function themeIconURL(theme) {
    if (theme == CHARCOAL_MODE) {
        return chrome.extension.getURL("assets/charcoal-messenger.svg");
    } else if (theme == MIDNIGHT_MODE) {
        return chrome.extension.getURL("assets/midnight-messenger.svg");
    } else if (theme == DEEPBLUE_MODE) {
        return chrome.extension.getURL("assets/deepblue-messenger.svg");
    } else {
        return chrome.extension.getURL("assets/facebook-messenger.svg");
    }
}

and remove the chrome.extension.getURL

in js/load_charcoal_settings_popup.js
replace line 2 from:
xhr.open('GET', chrome.extension.getURL('charcoal_settings.html'), true);
to
xhr.open("GET", "charcoal_settings.html", true);

This should be manifest v3 ready.

[dadanda]

charcoal fix.zip
Just unzip this (use extract here) then in load unpacked select the folder.
You should see manifest.json when you open the folder to be sure.
NOTE: IF YOU MOVE THE FOLDER THE EXTENSION WILL BREAK AND YOU HAVE TO LOAD UNPACKED AGAIN.

[dadanda]

#7 #8 #9 #10

[zeserrado-marques]

https://webkul.com/blog/how-to-install-the-unpacked-extension-in-chrome/
Link for someone who doesn't know what "load unpacked" means. thanks for the fix

[Zonkil9]

It looks like the issue is back. The background is white, while the messages are visible normally.

[karelkryda]

It looks like the issue is back. The background is white, while the messages are visible normally.

hi,
to fix white area, place under this section:

._9dls.deepblue_theme,
._9dls.deepblue_theme .__fb-light-mode,
._9dls.deepblue_theme .__fb-dark-mode {

in styles/stylesheet.css file this line:

--mwp-message-row-background: #1b252f !important;

Correct section and color depends on theme you use (Dark, Charcoal or Deep blue).

[dadanda]

#11
stylesheet.txt
If you downloaded my old charcoal fix, copy-paste the text inside and paste it into the stylesheet.css, or if you have 'show file extensions in file explorer' rename it from '.txt' to '.css' and drop it inside the styles page.
Thanks, @karelkryda for the fix.

[dadanda]

If it broke for you guys again, add !important after the color code in the line --chat-incoming-message-bubble-background-color: at the stylesheet.txt.