How to display the version number on UI - done by LonM
-
Is there anyone who can display the version number somewhere in the UI?
-
@lamarca You could write an extension which extracts the data from
navigator.userAgent
and displays that in the browser Action icon,or in a badge.Something like this:
background.js: version from navigator.userAgent make a canvas ctx = canvas.getContext("2d") ctx.font = "20px Arial" ctx.fillText("version",10,30) canvas render to base64 png chrome.browserAction.setIcon(the base64 image)
-
Thank you.
It didn't work, tested on Stable.
Here my step by step:- the js file created
- added path on browser.html
I prefer CSS over JS
-
@lamarca Hmmm. I tried a new thing:
- Go here: https://github.com/LonMcGregor/VivaldiVersion
- Click "Clone or download", and do so as a ZIP
- unzip the folder somewhere
- Go to chrome://extensions
- Turn on developer mode
- Click "load unpacked"
- Go to wherever you unzipped the folder, and select the SRC folder
-
@lonm Lovely, works, of course you can pack the extension as crx and drag the crx to install it.
-
@ian-coog Were I a smart person, I would have done that first...
One advantage of doing it this unpacked way is you can choose the font and colour of the icon.
(
src/bg.js
lines 12 for colour and 13 for font if anyone is interested - you'll probably want to set it to #ffffff for white if you use a dark theme) -
@lonm will do thanks
-
@lonm said in How to display the version number on UI:
Hmmm. I tried a new thing:
That's more than I expected. You saved a great amount of time.
Job well done, congrats and many thanks -
@lamarca said in How to display the version number on UI:
I run different Vivaldi versions simultaneously, themes don't work to identify the version/build number
I do two things to distinguish Stable from Snapshot:
- Run them on different screens.
- Use different themes (to be still able to recognize them, when I move windows between the screens).
I guess I'm a simple person...
-
@pafflick said in How to display the version number on UI:
I do two things to distinguish Stable from Snapshot:
Run them on different screens.
Why? Their icons have different colors - red & black. It doesn't apply to me. V icons are all green.
@pafflick said in How to display the version number on UI:
I guess I'm a simple person...
That make two of us.
-
@lamarca said:
It doesn't apply to me. V icons are all green.
I know I've seen the code anywhere, but where it is? Is it only the code from Changing icons with CSS II with added
fill
? -
@potmeklecbohdan You can change the icon's color with custom CSS, but he's actually talking about Soprano builds, which use green icons by default.
BTW. I almost never notice the Vivaldi icon color, as I almost never look in that direction. I prefer to use different themes, they are easily distinguishable.
-
@pafflick said in How to display the version number on UI:
he's actually talking about Soprano builds, which use green icons by default.
The green icon makes no difference. My CSS knowledge is primitive, have a look at this shot:
https://forum.vivaldi.net/post/219635
It's linked thumbnail which always opens in a new tab
-
I made this simple CSS:
.toolbar-addressbar button.button-toolbar.home::after { content: " Build: 2.1.1337.20 "; font-weight: bold; padding-left: 3px; padding-right: 3px; } .toolbar-addressbar button.button-toolbar.home:hover::after { content: " Build: 2.1.1337.20 "; font-weight: bold; padding-left: 3px; padding-right: 3px; color: black; }
Updated!
The advantage is: no extention is needed.
The desadvantage: you have to change the Build number manually after every update.
It should be possible automate this with js. Could somebody help me? I cannot javascript.
-
@burbuja Antonin!!! How did you get it??
Build 2.1.1337.17 -
@lonm
Manifest file is not readable.Sorry, it works -
@burbuja Very angel
-
Another possibility:
#header > div.topmenu > nav > ul > li:last-of-type > a::after { content: " Build: 2.1.1337.17 "; font-weight: bold; padding-left: 50px; }
Ctrl + M for horizontal menu, the version is shown next to "Help" Item:
-
And here we go again
-
@burbuja One small problem when using panel toolbar:
edit: can be solved by adding
.toolbar-addressbar
before the selector