@Hadden89 awesome! I'll check this out! Thank you!

This simple solution apparently breaks confirmation popups. For whatever reason the buttons are added to footer.

edit: oh well, furious I accidentally loaded the mod twice and that broke everything, all working as expected

@legobuilder26 I never brought the update to the mod here. We have custom buttons now, there is no reason to load a toolbar icon with Javascript. See first post for the updated version.

Thanks for the info. @nomadic

@tam710562 Thanks for the update. Works now. It also adds feed favicons in the mail panel.

@stardepp Yes, should give you 2 quotes every day.

If you just want a single new quote every day, then you could set the NEW_QUOTE_FREQUENCY to "daily" and the interval will be ignored.

Thank you very much!

I had given up on this functionality!

Hello! first time posting on a forum like this but I like many others have gotten fed up with Franz/Ferdi/Ferdium and similar apps for their pricing plans or "meltdowns" while the free/open source solutions do not allow extensions so I took it upon myself to recreate most of what I've been missing in Vivaldi.

I am not exactly available to maintain this code -- I just wanted to share it so that others may contribute/improve upon it for everyone else rather than keep it to myself... it kinda already does everything I need/want it to lol so I am not very motivated to polish it any further.

You can find/download the code here (or just copy it from the post):
https://github.com/oms9/VivaldiMod

Custom.js: const tabX = 0; const spacing = 3; const ptabHeight = 60; const ptabWidth = 60; let lastY = 0; let normExist = false; const observer = new MutationObserver(setHeights); function enlargePinnedTabs() { "use strict"; let pinnedTabs = document.getElementsByClassName("tab-position is-pinned"); let idx = 0; Array.from(pinnedTabs).forEach(function (tab) { //Default cssText str: "--PositionX: 0px; --PositionY: 0px; --Height: 30px; --Width: 72px; --ZIndex: 2;" let tabY = (idx * 60) + spacing; tab.style['cssText'] = `--PositionX: ${tabX}px; --PositionY: ${tabY+spacing}px; --Height: ${ptabHeight}px; --Width: ${ptabWidth}px; --ZIndex: 2;`; idx ++; lastY = tabY; }); }; function setHeights(){ //<div id="tabs-tabbar-container" class="left dotted" style="width: 72px; height: 100%;"> observer.disconnect() let CONT = document.getElementById("tabs-container"); if (CONT.className == 'overflow left'){ let CONT = document.getElementsByClassName("left dotted"); CONT[0].style['cssText'] = `width: 82px; height: 100%;` } else{ let CONT = document.getElementsByClassName("left dotted"); CONT[0].style['cssText'] = `width: 72px; height: 100%;` } enlargePinnedTabs(); let tabBar = document.getElementsByClassName("tab-strip"); Array.from(tabBar[0].children).forEach(function (elem) { target = elem.firstChild; // Get the inside in a separate var if ((target.className).includes('is-pinned')){ // PINNED TABS HERE ; //skip } else if (elem.className == "separator"){ // SEPARATOR HERE elem.style['cssText'] = `--PositionX: 0px; --PositionY: ${lastY+ptabHeight+spacing}px; --Height: 20px; --Width: 72px; --ZIndex: 0;` lastY += spacing + 56; // 20 + 30 + 2x spacing } else if (target.className == "tab-position"){ // NORMAL TABS HERE target.style['cssText'] = `--PositionX: 0px; --PositionY: ${lastY+spacing+20}px; --Height: 30px; --Width: 72px; --ZIndex: 2;` lastY += 33; } else if (target.className == "button-toolbar newtab"){ // NEW TAB BUTTON HERE sepExist = document.getElementsByTagName("hr"); if (sepExist.length == 1){ // SEPARATOR target.style['cssText'] = `--PositionX: 21px; --PositionY: ${lastY+spacing+20}px; --Height: 30px; --Width: 30px; --ZIndex: 0; left: 21px; top: ${lastY+spacing+20}px;` } else{ // NO SEPARATOR target.style['cssText'] = `--PositionX: 21px; --PositionY: ${lastY+ptabHeight+spacing+10}px; --Height: 30px; --Width: 30px; --ZIndex: 0; left: 21px; top: ${lastY+ptabHeight+spacing+10}px;` } } else { // everything else here (nothing as of yet) //console.log('Found ELSE: ' + target.className); } }); observer.observe(tabBar[0], {attributes: true, childlist: true, subtree: true}); } // Loop waiting for the browser to load the UI let intervalID = setInterval(function () { const browser = document.getElementById("browser"); if (browser) { clearInterval(intervalID); // set init size document.getElementsByClassName("left dotted")[0].style['cssText'] = `width: 72px; height: 100%;`; // call function once setHeights(); } }, 300); // Don't forget to thank @luetage for the standard 300 ms CSS: #browser.color-behind-tabs-on .tab-position .tab.active.active { background-color: #7b7b7b; color: #FFFFFF; } :not(.ui-transparent-tabs).transparent-tabbar:not(.acc-dark.bg-dark.color-accent-from-page.color-behind-tabs-on) .tab-position .tab { background-color: #1c1c1c; } Preview:

Screenshot_1.png

@vivekkrishna I am just a mechanical engineer that thought it was a good idea to add a computer science major to my coursework at college "for fun" (was not fun); I am not an expert by any means.

Being a programmer involves being good at searching for stuff online. I spend half my time on coding projects looking at StackOverflow, JSFiddle, CodePen, or GitHub. You try something, break it, search up errors to better understand how it broke, looking up better ways to solve it now that you have better vocabulary to describe the issue, then try and adapt what you found to make it work for your application. Then slowly over time you become better at solving the problems you encounter without needing to search online for solutions.

I don't have any specific tutorials to suggest. Just do a search and see what you find. For the actual deployment, many hosting providers have instructions for how to set up some popular methods on their services.

@vivekkrishna said in Show Quotes on New Tab:

some people say that focus on any one role like web developer or python developer, WT do u say

I haven't ever worked in a programming job, but I can give you my limited insight.

It definitely helps to have a specialty where you are particularly proficient, but it is important to be flexible. Programming is always changing in what is relevant and useful. With stuff like web development, there is always some new framework that everyone starts using, so you have to be able to adapt and learn new things.

Employers often like to see a portfolio of projects you have worked on so they can gauge your ability to try out different technologies and learn how to use them.

Edit: And now I go to sleep. Stayed up way too late...

@dude99 I know your take is meant to be lighthearted, but that’s exactly how it played out. It’s the reason we don’t pay for this browser with ca$h, the devs feed off our pain and confusion instead. Why would you allow your users the liberty to mess with your carefully constructed program, if not to torture them.

Made an update to the mod for the new buttons experiment. This is the only toolbar icon which can’t be exchanged with the toolbar editor, therefore a mod is still needed, if an SVG icon is preferred.

Now this........ IS AMAZING. I love it!!

The new snapshot 2482.13 breaks this mod. I pushed an update and it should be fine now.

@goedl Not really, they created a “fork.” Here is the original ☛ https://forum.vivaldi.net/post/259327

@explorerthegeneral I just tested it, and other than needing to update an event handler to bring it up to date with 5.1.2567.73 (see original post for updated code), it should hibernate background tabs in all open windows.

GIF showing it working

hibernating.gif

One thing that the mod won't do is hibernate the active tab of any given window (even if it isn't focused). This is more a limitation of Vivaldi than a conscious choice I made while writing the mod. However, this behavior does make sense. Any active tab will need to be loaded again instantly, so it doesn't make much sense to allow hibernation for active tabs.

But it got me thinking, looking at the code (and I'm no coder), it looks like it could be modified to loop through all the windowId's rather than just the currently active one.

It is looping over all tabs rather than windows. The beginning section with the mention of the current windowId is for one of the config parameters. Here is a more thoroughly commented section of the relevant code to better explain it's function:

function hibernateBackgroundTabs() { // This section is needed for the SKIP_ACTIVE_TAB_STACK_TABS config parameter // ================ START ================ // figure out the ID of the active window to allow fetching the active tab vivaldi.windowPrivate.getCurrentId((currentWindowId) => { // get the active tab chrome.tabs.query({ active: true, windowId: currentWindowId }, (activeTab) => { activeTab = activeTab[0]; // see if the active tab is in a tab stack, and if so, get the stack ID let activeTabStackID = (regex.exec(activeTab.extData) || [false])[0]; // ================= END ================= // get tabs from all normal (not devTool or popup) windows chrome.tabs.query({ windowType: "normal" }, (tabs) => { // loop through all tabs and check if it should be hibernated or not based off of parameters of the tab and mod config tabs.forEach((tab) => { if (tab.discarded) return; // already discarded, so can skip it if (tab.windowId === currentWindowId && tab.active) return; // skip active tab; apparently not needed; Vivaldi already handles if (SKIP_SELECTED_TABS && tab.highlighted) return; // skip selected tabs if configured to do so // skip tabs in the same tab stack as the active tab if configured to do so if (SKIP_ACTIVE_TAB_STACK_TABS && activeTabStackID) { let stackID = (regex.exec(tab.extData) || [""])[0]; if (stackID === activeTabStackID) return; } chrome.tabs.discard(tab.id); }); }); }); }); }

@luetage Any exit message that isn't an error is a success in my view. angel

Let's Celebrate!!

Celebrating Syrup 's Mod.jpg

YuMmmmmm....!

Hurry up!!

Celebrating Syrup 's Mod

New version! First post has been updated. I renamed the mod and from now on it will load as a native command chain button. Please tell me whether you have any problems with implementing it.