How I Built a Chrome Extension That Injects AI Into Exchange Websites
Source: Dev.to
My Journey & Solution
I’ve been trading crypto on and off for a few years—mostly off after the losses.
My biggest problem wasn’t the charts. It was me. I’d see a loss, get frustrated, and immediately enter another trade to “make it back.” Classic revenge trading. Or I’d take a setup on the 15‑minute chart while completely ignoring that the daily chart was screaming the opposite direction.
Nothing in my trading setup actually warned me before I made these mistakes. The charts just… sit there. They don’t say, “Hey, you just lost; maybe don’t trade for the next hour.”
So I built something that does.
What I Built
LenQuant is a Chrome extension that overlays on top of Binance, Bybit, OKX, and TradingView. It adds a side panel with:
- Market regime detection – Is this a trending market or choppy garbage?
- Multi‑timeframe analysis – Do 15 m, 1 h, 4 h, Daily agree or conflict?
- Behavioral tracking – How long since your last trade? Was it a loss?
- AI trade planning – Entry, stop, targets generated from market context
…and a few other things: wallet tracking across exchanges, watchlist, alerts, journal.
The Technical Parts
DOM Extraction Instead of APIs
One decision I’m pretty happy with: I didn’t require API keys for wallet tracking.
Most trading tools ask you to paste in your exchange API keys. That’s a security nightmare—users have to trust you not to steal their keys, and exchanges can change API formats and break your integration.
Instead, LenQuant reads position data directly from the DOM when users have their exchange tab open. The extension’s content script finds the elements showing positions, extracts the values, and displays them in the panel.
// Simplified example of DOM extraction
const positions = document.querySelectorAll('.position-row');
positions.forEach(row => {
const symbol = row.querySelector('.symbol')?.textContent;
const size = row.querySelector('.size')?.textContent;
const pnl = row.querySelector('.pnl')?.textContent;
// Store and display in panel
});
Trade‑off: Only works when the exchange tab is open. But traders usually have their exchange open anyway, so this hasn’t been an issue.
Market Regime Classification
I classify market conditions into three buckets: trending, ranging, choppy. The classification uses a combination of:
- ATR (Average True Range) – volatility measurement
- ADX (Average Directional Index) – trend strength
- RSI patterns – momentum behavior
function classifyRegime(atr, adx, rsiPattern) {
if (adx > 25 && atr.increasing) {
return 'trending';
}
if (adx getTrend(symbol, tf))
);
const bullish = trends.filter(t => t === 'bullish').length;
const bearish = trends.filter(t => t === 'bearish').length;
const confluenceScore = Math.max(bullish, bearish) / timeframes.length * 100;
return {
score: confluenceScore,
direction: bullish > bearish ? 'bullish' : 'bearish',
conflicting: bullish > 0 && bearish > 0
};
}
When someone tries to go long on a 15 m setup but the 4 h and daily are both bearish, they get a warning. Simple idea, but surprisingly effective at preventing bad entries.
Behavioral Tracking
This is probably the most “creepy” feature, but also the most useful. The extension tracks:
- Time since last trade
- Whether the last trade was a win or loss
- How many trades today
- Pattern of trades (rapid‑fire? evenly spaced?)
function checkRevengeTradingRisk(tradeHistory) {
const lastTrade = tradeHistory[tradeHistory.length - 1];
if (!lastTrade) return { risk: 'low' };
const minutesSinceLast = (Date.now() - lastTrade.closedAt) / 60000;
const wasLoss = lastTrade.pnl < 0;
if (wasLoss && minutesSinceLast < 10) {
return {
risk: 'high',
message: 'You closed a losing trade 10 minutes ago. Take a break.'
};
}
// …more checks for overtrading, tilt, etc.
}
I know it sounds obvious, but when you’re in the heat of trading and just took a loss, your brain doesn’t naturally think “wait, let me cool off.” Having software tell you is different from telling yourself.
AI Integration
For trade‑plan generation, I send market context to an LLM (OpenAI/Anthropic):
- Current price and recent price action
- Support/resistance levels
- Regime classification
- MTF confluence data
- Recent news (if applicable)
The response includes entry triggers, stop‑loss placement with reasoning, and multiple targets.
async function generateTradePlan(symbol, context) {
const prompt = `
You are a professional trader analyzing ${symbol}.
Current price: ${context.price}
Regime: ${context.regime}
MTF Confluence: ${context.confluence}%
Key levels: ${context.levels.join(', ')}
Generate a trade plan with:
- Entry trigger
- Stop‑loss with reasoning
- Three targets with reasoning
- Confidence score (0‑100)
- Key risks
`;
const response = await callLLM(prompt);
return parseTradePlan(response);
}
Closing Thoughts
LenQuant ties together market‑state awareness, multi‑timeframe confluence, behavioral safeguards, and AI‑driven trade planning—all without ever asking for your exchange API keys. The result? Fewer revenge trades, better alignment with the broader market, and a disciplined, data‑driven edge in a chaotic crypto world.
# Screen Mode
**Exit fullscreen mode**
---
**Important:** The AI doesn't trade for you. It generates plans. You still decide whether to execute. This is intentional – I wanted a tool that makes me a better trader, not a bot that trades for me.
---
## What I Learned Building This
### 1. Chrome Extension APIs are Actually Pretty Good
Manifest V3 gets a lot of hate, but building with it wasn't bad. Service workers handle background logic, content scripts give DOM access, and side panels provide UI. The separation makes sense.
**Main pain point:** debugging service‑worker crashes. They get terminated when idle, and any unsaved state is lost. I learned to persist everything to `chrome.storage.local`.
### 2. DOM Extraction is Fragile
Every exchange styles its pages differently. Binance Futures uses different classes than Binance Spot, and Bybit recently redesigned its UI, breaking my selectors.
**My approach:**
- Keep a selector config per exchange and update it when things break.
- Allow users to report broken extraction; I can often fix it the same day.
- Use layered fallbacks: network detection, and as a last resort, APIs.
### 3. Traders Have Strong Opinions
Feedback has been… opinionated. Some want more indicators, some fewer. Some want alerts for every 0.1 % price move, others never want a notification.
**Current approach:** make everything configurable. Don’t assume I know what the user wants.
### 4. Performance Matters More Than I Expected
Running real‑time analysis on multiple symbols while a user is trading means you can’t slow down the page.
- Use Web Workers for heavy computation.
- Debounce DOM observations.
- Lazy‑load components.
---
## Current State
The extension is live on the Chrome Web Store.
- **Free tier:** 25 analyses per day (enough for most traders).
- **Paid tiers:** Unlock the full feature set.
If you trade crypto and want to try it: [lenquant.com](https://lenquant.com)
If you’re a developer building Chrome extensions and have questions about anything I mentioned, I’m happy to answer in the comments.