Anyone know of any way / Chrome extension to remove, resize, etc. elements on T212’s portfolio page and for these settings to apply each time you access it?
I know enough HTML & CSS to modify the page.
Just need something to remember those changes and apply them on page load.
Thanks!
Hey,
From my very limited knowledge of chrome extensions, you would probably use a content.js script to inject some JS and CSS that modifies the layout using the DOM.
You probably remember me from the other thread I authored, I had also mentioned there that I was planning to add a chrome extension to fix common complaints like this. Layout being one, but I wanted to ask, would you be willing to use a chrome extension developed by a stranger on a website which has your financial data. If not, what measures would make it acceptable (open source etc..)?
Sorry for the slight hijaking, hope you don’t mind.
Yes I do remember you & I don’t mind your reply.
I’d only use extensions from reputable companies for my portfolio.
I wouldn’t mind on the other hand if there was a guide on how to do this myself - assuming it’s not a 300 step process.
Totally fair. I’d probably feel the same way if the roles were reversed.
There’s only really one option that kind of fits what you’re looking for:
An open source Chrome extension or Tampermonkey script. You’d be able to copy/download it and install it yourself in seconds — takes under 30 seconds, and pretty much no expertise.
But here’s the tricky part — even with open-source code, the trust issue doesn’t completely go away. Unless someone’s technical enough to review the script and understand what it’s doing (Legitimate DOM manipulation vs. data exfiltration), there’s always a risk that something shady could be buried inside.
I’d be more than happy to develop such an extension/script when my project get’s to that stage. But, as I’ve said, those trust problems above don’t go away.
Yup, found this solution on ChatGPT too :))
Hey!
I looked into this some time ago because I couldn’t use the “new” web app as is (the chart window was way too small). Since I didn’t get the impression that this problem was going to be fixed anytime soon… I just modified the UI layout to my liking. I ended up going with Stylus and writing a bunch of custom CSS code. The way it works is that your custom styles code gets auto loaded every time you visit the T212 site (so you always see your version of the site and not T212’s version). Occasionally some styling will break (this is because T212 updated some code related to the layout) and you just have to adjust the styling to fix it. It isn’t a perfect solution, but good enough for my own needs.
One thing to note is that it was very, very annoying to target certain elements on the page due to the way the code is written, but eventually I got it working and to a point where I’m much happier with the main layout now. The chart window is bigger and thus more usable.
Good luck!
Yeeeees, I will definitely put this to use ASAP.
Thank you very much, @confid194
For everybody else, this is the Chrome extension: https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en-GB
Hello,
I’d suggest to look at Tampermonkey. You can add custom scripts and decide where to run it, and it will automatically apply it to the website. Maybe it’s what you are looking for.
Also this code to remove the top ad on the home page (see red box of my screenshot):
.style-scope.ytd-ad-slot-renderer {
display:none !important;
}
I’ve started to use Stylus to also block ads on YouTube.
For a start - I’m blocking ads on the home page - those that are among normal videos.
Here’s the code:
.style-scope.ytd-in-feed-ad-layout-renderer {
display:none !important;
}
This will leave gaps in places where the ads were:
In case anyone wants to duplicate my changes (using Stylus) - see below.
Most may be self-explanatory.
Will probably make more changes.
[data-testid=“instrument-screen-section-header-stats”] {
display: none !important;
}
[data-testid=“instrument-screen-section-header-keyFinancials”] {
display: none !important;
}
[data-testid=“instrument-screen-section-header-about”] {
display: none !important;
}
[data-testid=“instrument-screen-section-header-news”] {
display: none !important;
}
[data-testid=“instrument-screen-section-header-about”] {
display: none !important;
}
[data-testid=“instrument-avatar-equity”] {
display: none !important;
}
[data-testid=“instrument-screen-header-title”] {
display: none !important;
}
[data-testid=“portfolio-create-pie-cta”] {
display: none !important;
}
[data-testid=“instrument-screen-section-header-priceAlerts”] {
display: none !important;
}
[data-testid=“tab-button-social”] {
display: none !important;
}
[data-testid=“lightweight-chart-footer”] {
display: none !important;
}
[data-testid=“instrument-market-status-button”] {
margin-top: -10px !important;
}
/* removes alerts buttons (also removes reorder + history from left side) */
.r-18u37iz {
display: none !important;
}
[data-testid=“instrument-screen-header”] {
margin-top: -10px !important;
margin-bottom: -40px !important;
background-color: rgba(255, 0, 0, 0) !important;
z-index: 1!important;
margin-left:500px !important;
}
[data-testid=“instrument-lightweight-chart-container”] {
margin-top: -230px !important;
z-index: -1 !important;
opacity: 0.3 !important;
}
I see that you are taking a liking to Stylus, @Vio! It’s quite nice… isn’t it?
I’m also a little jealous that the changes you made had easy selectors to target. Some of mine were ridiculous. No data-testid, no id, no class. Only the HTML element (e.g. div) and a style tag with CSS.
pretty sure you should be able to use the same lines of code I used for your portfolio - it’s the same interface.
It was a pain because yeah, all the divs are labeled the exact same.
So glad I found their identifiers.
Oh definitely! I just think our “goals” are probably a little different with the UI changes we respectively want. Though one common goal was getting “rid” of that (imo - useless) watchlists toolbar.
But maybe I’m also blind or they added more data-testid attributes to their code since I first did this?
As I checked one of the elements I was adjusting and I now see a data-testid on it.
data-testid="layout-cell-simple-separator-top"
In my code I had to use stuff like this to target it…
div[style^="z-index: 5; position: absolute; left: -1px; top:"][style$="height: 1px; background-color: rgb(218, 219, 226); box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;"] {
// my CSS style overwrites
}
Oh well! I’ll keep it in mind if I ever want to make further UI changes to search better through the code.
It took a bit of time to find what to target, but once found, they do have the same way of targeting assets for almost everything else.
