Brave New Tab line is offset

[DogeLord081]

Describe the bug The new tab bottom line, as you can see in the image, is on the center of the new tab, not the bottom

To Reproduce

1. Install doki theme on Brave

Expected Behavior New tab line is on the bottom

Environment I use VSCode, but here's the environment pasted from there:

Version: 1.83.1 (user setup)
Commit: f1b07bd25dfad64b0167beb15359ae573aecd2cc
Date: 2023-10-10T23:48:05.904Z
Electron: 25.8.4
ElectronBuildId: 24154031
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Windows_NT x64 10.0.19045

Screenshots

[notasuka]

Seems to be on all chromium browsers.

Uncaught TypeError: Cannot read properties of undefined (reading 'onMessage')
This is repeated on the following:
js/selectionStyleInjection.js
js/scrollbarStyleInjection.js

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
js/background.js

I am on Chrome Version 118.0.5993.89 (Official Build) (64-bit)

[aKqir24]

/Replace manifest.json with this code/

{ "name": "Doki Theme: Shima Rin", "short_name": "Doki Theme", "version": "88.2.3", "description": "A dark theme modeled after Rin from Yuru Camp", "manifest_version": 3, "theme": { "images": { "theme_tab_background": "images/tab_inactive.png" }, "colors": { "bookmark_text": [ 176, 176, 176 ], "button_background": [ 58, 65, 72 ], "frame": [ 50, 55, 66 ], "frame_inactive": [ 43, 48, 59 ], "frame_incognito": [ 43, 48, 59 ], "frame_incognito_inactive": [ 50, 55, 66 ], "ntp_background": [ 50, 55, 66 ], "ntp_header": [ 43, 48, 59 ], "omnibox_background": [ 44, 48, 57 ], "omnibox_text": [ 102, 136, 173 ], "theme_toolbar": [ 61, 71, 84 ], "ntp_text": [ 176, 176, 176 ], "tab_background_text": [ 176, 176, 176 ], "tab_background_text_inactive": [ 90, 98, 108 ], "tab_text": [ 176, 176, 176 ], "toolbar": [ 43, 48, 59 ] }, "tints": { "buttons": [ 0.5868544600938967, 1, 0.5392156862745099 ], "frame": [ 0.5868544600938967, 1, 0.5392156862745099 ] }, "properties": { "ntp_background_alignment": "right", "ntp_logo_alternate": 0 } } }

[TheAriyan]

[DogeLord081]

/Replace manifest.json with this code/

{ "name": "Doki Theme: Shima Rin", "short_name": "Doki Theme", "version": "88.2.3", "description": "A dark theme modeled after Rin from Yuru Camp", "manifest_version": 3, "theme": { "images": { "theme_tab_background": "images/tab_inactive.png" }, "colors": { "bookmark_text": [ 176, 176, 176 ], "button_background": [ 58, 65, 72 ], "frame": [ 50, 55, 66 ], "frame_inactive": [ 43, 48, 59 ], "frame_incognito": [ 43, 48, 59 ], "frame_incognito_inactive": [ 50, 55, 66 ], "ntp_background": [ 50, 55, 66 ], "ntp_header": [ 43, 48, 59 ], "omnibox_background": [ 44, 48, 57 ], "omnibox_text": [ 102, 136, 173 ], "theme_toolbar": [ 61, 71, 84 ], "ntp_text": [ 176, 176, 176 ], "tab_background_text": [ 176, 176, 176 ], "tab_background_text_inactive": [ 90, 98, 108 ], "tab_text": [ 176, 176, 176 ], "toolbar": [ 43, 48, 59 ] }, "tints": { "buttons": [ 0.5868544600938967, 1, 0.5392156862745099 ], "frame": [ 0.5868544600938967, 1, 0.5392156862745099 ] }, "properties": { "ntp_background_alignment": "right", "ntp_logo_alternate": 0 } } }

This just makes the lines disappear altogether

[UsikaDesu]

~~I still got the same issue is there any way to fix it? I run it with chrome version 125.0.6422.113.~~

I found how to fix it guys, I just randomly tought it my self how to fix it and it worked. So here is what you need to do:

1. Go to an image resizer what ever you use(if you can custom the size then it's better, why custom size? because you can just extend the height/wide side only without changing the lenght one), but here i'm using shutterstock image resizer

2. What you wanna do is to upload tab_highlight.png from doki-theme-web-master/(what browser theme that you use)/(what theme that you wanna use/theme/images

3. Set the image size small as shown in the picture above, then just download it

4. After you download it, you wanna replace the old tab_highlight with the new one

5. You can try to apply the theme again and you will see that it is fixed now it is shown in my picture below

Why this is happend? from my thought is that the image either have a wrong Y position or the image doesn't have enough height/wide to make the line touch the bottom of the tab so i came up with this idea, hope this help you guys who have the same issue and for the developer to update it.

I did found in other issue that someone already fixed it too using photoshop here if you want to see it https://github.com/doki-theme/doki-theme-web/issues/120#issuecomment-1757091486

[Krishna717-boop]

How to Fix the Persistent Underline Disappearing + Console Error

Hey everyone! 👋 If your custom underline fix for the tab_highlight.png works initially but disappears after restarting Chrome — and you’re seeing this error in the DevTools console: Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist. Here’s how I PERMANENTLY FIXED IT : Fix it in js/background.js Open or create background.js (should already be in js/ folder), and add this code:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.hello === "world") { sendResponse({ reply: "hi" }); } });

This makes sure your background script is actually listening, so no more errors! ✅

Reload the Extension Go to chrome://extensions, enable Developer mode, and click Reload on your theme.

DONE! Now your underline stays exactly where it should be, and no more error messages every time you open a new tab.

Hope this helps someone! 😄 — Krishna