Merge pull request #200 from csfloat/feature/tradeoffer-id-annotate

Shows Trade Offer ID In Trades Page

manifest.json

@@ -32,6 +32,11 @@
             "matches": ["*://*.steamcommunity.com/tradeoffer/*"],
             "js": ["src/lib/page_scripts/trade_offer.js"],
             "css": ["src/global.css"]
+        },
+        {
+            "matches": ["*://*.steamcommunity.com/*/tradeoffers/*"],
+            "js": ["src/lib/page_scripts/trade_offers.js"],
+            "css": ["src/global.css"]
         }
     ],
     "background": {

src/lib/components/trade_offers/offer_id.ts

@@ -0,0 +1,28 @@
+import {html} from 'lit';
+
+import {CustomElement, InjectBefore, InjectionMode} from '../injectors';
+import {FloatElement} from '../custom';
+import '../common/ui/steam-button';
+import {cache} from 'decorator-cache-getter';
+
+@CustomElement()
+@InjectBefore('.tradeoffer .tradeoffer_items_ctn', InjectionMode.CONTINUOUS)
+export class ShowTradeOfferId extends FloatElement {
+    @cache
+    get tradeOfferID(): string {
+        const rawId = $J(this).parent().attr('id');
+        if (!rawId) {
+            return '';
+        }
+
+        return rawId.replace('tradeofferid_', '');
+    }
+
+    async connectedCallback() {
+        super.connectedCallback();
+    }
+
+    render() {
+        return html` <span>Trade Offer ID: ${this.tradeOfferID}</span>`;
+    }
+}

src/lib/page_scripts/trade_offers.ts

@@ -0,0 +1,6 @@
+import {init} from './utils';
+import '../components/trade_offers/offer_id';
+
+init('src/lib/page_scripts/trade_offers.js', main);
+
+function main() {}