Modding Vivaldi
-
@dissidentrage Unless you've done something strange with symbolic links or junctions† then the program installed in
%PROGRAMFILES%
is completely separate to the one in%LOCALAPPDATA%\Vivaldi\Application
. Changes to one won't affect the other.The only thing that will be common between them‡ is the user data directory (that's the bit that has your bookmarks, history and so on), but you won't install mods in that, so that's not an issue.
To double check which location you've installed to, try launching Vivaldi and visiting the page at
vivaldi://about
and look at the Executable Path. This will tell you which directory you should add your mods to.Hopefully this clarifies my earlier post.
†If like most people you don't know what that means, then you won't have done that, no need to worry
‡Unless you're using launch arguments† or the profile manager -
I am not completely sure if this belong in this post but i'll ask here.. If it's incorrect placed I request a mod to please move it to the correct location (if possible). However I would like to ask if it is possible to mod vivaldi in such a way that the option to mute a page is always in the right click menu, since I tend to want to mute a tab before it starts playing, and so far been trying to get this done with extensions but honestly just having it available in a right click menu would be the most useful thing possible..
Secondly if it is not, i've been testing css modifications but I can't quite get my head around one thing.. I want to move the mute icon to the right and hide the X button (since I use middle mouse for that), all the while not making the favicon dissappear (which was the issue I had last time when moving the mute icon)..
Yes this might be alot, but I am absolutely not a programmer or have decent knowledge of CSS, still learning haha.Thanks in advance for any help offer whatshowever!
p.s. Currently using the latest stable build
-
-
@lonm Also the second part I asked with the css is not possible? I was kinda unhandy to post two or more questions in one post, but personally i'd rather make a large post then spam xD.
Thanks!! -
-
Is there a limit to the number of js files that Vivaldi can use? I tried adding 3 separate custom.js files but Vivaldi only used the first two on the list. How about custom.css files? Is there a limit for that as well?
-
@altcode Show your
browser.html
file. Generally there should be no limit, it could be you have a mistake in there somewhere. On the other hand there isn't really a point in running multiple custom.js or multiple custom.css files, unless you really have a huge amount of code and want to separate it. -
@luetage Here
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vivaldi</title> <link rel="stylesheet" href="style/common.css" /> <link rel="stylesheet" href="style/other.css" /> <link rel="stylesheet" href="style/webpanel-fix.css" /> <link rel="stylesheet" href="style/search-panel.css" /> </head> <body style=" background-color: #263238; background-image: url('resources/vivaldi-splash-icon.svg'); background-size: 16%; background-position: center; background-repeat: no-repeat;"> <div id="app" /> <script src="localeSettings-bundle.js"></script> <script src="background-common-bundle.js"></script> <script src="vendor-bundle.js"></script> <script src="settings-bundle.js"></script> <script src="urlbar-bundle.js"></script> <script src="components-bundle.js"></script> <script src="bundle.js"></script> <script src="custom.js"></script> <script src="extension-toggle.js"></script> <script src="vivaldi-icon.js"></script> </body> </html>
I removed the second one extension-toggle.js, and the last one started working.
-
@altcode Strange, anyway – you should combine the custom.js files into one. They all just need one instance of the wait loop, you can just load all the functions at the same time. And if you wanna disable one, you just take it out of the loop.
-
@bubek said in Modding Vivaldi:
Add a shortcut to Vivaldi parameter:
–remote-debugging-port=2015Run Vivaldi and open:
http://localhost:2015/
In the list locate the page with the end browser.html and work from the web inspector with UI Vivaldi.where do you ad this parameter?
-
@jailbreaking Vivaldi shortcut (Just look at step 2)
-
Hi. I want to try change thumbnails to apple-icon-logo, can I do this by bundle.js? I find site "The Favicon Finder", with it I can get any icon from any site by forming a request "https://besticon-demo.herokuapp.com/icon?url= ... &size=". I want the browser to save the icon received from the site instead of the screenshot.
-
@molex if you mean the speed dials on the start page, you can save the apple icon to a folder on your system, then right click the speed dial and "set it as a thumbnail"
-
Any idea if this is possible:
https://forum.vivaldi.net/topic/36308/is-there-any-way-to-disable-tab-shrinkage-when-pinned/2 -
@Christoph142 If possible, could you update the guide with how the user can use launch arguments to start Vivaldi in debug-packed-apps mode?
vivaldi --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end
This flag is really useful for anyone getting into modding Vivaldi since they can examine UI elements in the inspector.
Thanks!
-
@Pathduck it can be done easier by search debugging in vivaldi://flags/ > enabled flags > restart browser.
-
@Pathduck See https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools (I don't know why it isn't pinned )
-
@potmeklecbohdan I know, but it'd be nice if it was collected in one post is all. Easier to find for the new modders
-
@Christoph142 You should maybe hide the <2.6 part
in a spoiler
like this
-
@Christoph142 Maybe you should add that the CSS files (for >2.6) must be in that folder and not in subfolders.