PSA: How to prevent your scripts from breaking after site updates

I noticed a ton of scripts just broke due to recent updates to the website. 

Per cloudjumper's reply to one of the bug threads:

This is basically on the script writers to fix, not for Torn devs. Torn uses React with CSS modules, which generates class names like status-icons___xYz123 where the suffix is a hash that changes between builds. Never hardcode the full class name - it will break when Torn deploys updates. Based on what the devs have told me, this is just down to bad scripting practices. You need to reach out to the script writers to get the issue fixed.

 

Closing and locking the report.

Examining a lot of the scripts I use which broke, I found that they all fall victim to hardcoding the react generated class names instead of an attribute selector with substring matching.

Using cloudjumper's example, here is how you can fix it to not have to fix this again in the future.

Change

document.querySelector('status-icons___xYz123');

To

document.querySelector('[class^="status-icons___"]');

This tells querySelector to search for any elements whose class name starts with status-icons___  and completely ignores the randomly generated react class name ending.

Here are my selectors for many different native torn elements in the code for my torn-stock-pocket script. Personally I omit most of the 3 underscores ___  just for the sake of readability.

export const STOCK_MARKET_SELECTOR = 'div[class^="stockMarket"]'


export const STOCK_DROPDOWN_ID = 'panel-ownedTab'


export const BUY_BUTTON_SELECTOR = '#panel-ownedTab button[class*="buy_"]'


export const SELL_BUTTON_SELECTOR = '#panel-ownedTab button[class*="sell_"]'


export const STOCK_LIST_SELECTOR = '#stockmarketroot > div[class^="stockMarket"] ul'


export const STOCK_NAME_SELECTOR = 'li[class^="stockName"]'


export const STOCK_ACRONYM_SELECTOR = '[data-acronym]'


export const STOCK_ACRONYM_ATTRIBUTE = 'data-acronym'


export const STOCK_AMOUNT_OWNED_SELECTOR = "p[class^='count_']"


export const STOCK_ICON_SVG_URL = 'https://www.torn.com/images/v2/stock-market/dark-mode/logos/'

Something like this should work. *= means contains. You can also use ^= which means "starts with".

GM_addStyle(`
    [class*="formTitle___"] {
        flex-direction: column;
        text-align: left;
    }
`);

According to the documentation that I found of waitForKeyElements (https://gist.github.com/BrockA/2625891) then yes, it should work in the same way.

The function takes a jQuery selector string as the first parameter, so you should be able to use any of the methods listed here: https://api.jquery.com/category/selectors/

Now fixing scripts upon request for free, see this thread and reply with any scripts you'd like fixed for the time being

https://www.torn.com/forums.php#p=threads&f=67&t=16564195&b=0&a=0

What the FLOCK, I can't believe they would break scripts.

i know scripts irl and they would not do that

Great utility, useful for beginner devs for sure :)

Granted if I were them I would take this opportunity to learn more about the DOM, React, CSS, etc and fix it without that just to gain experience, however for those who just want to fix their shit and move on this is perfect

How does that root example even make sense from a developer perspective? Why not give it different names?

Any idea of adding thing to chat3.0? These `root`s are really annoying...😂