1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bumblebee: browser automation</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bumblebee: browser automation</title>
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/skeleton.css">
</head>
</head>
<body>
<div id="nav-container" class="container">
<ul id="navlist" class="left">
<li >
<a href="/" class="link-decor-none">hme</a>
</li>
<li class="active">
<a href="/log/" class="link-decor-none">log</a>
</li>
<li >
<a href="/projects/" class="link-decor-none">poc</a>
</li>
<li >
<a href="/about/" class="link-decor-none">abt</a>
</li>
<li><a href="/feed.xml" class="link-decor-none">rss</a></li>
</ul>
</div>
<main>
<div class="container">
<div class="container-2">
<h2 class="center" id="title">BUMBLEBEE: BROWSER AUTOMATION</h2>
<h6 class="center">02 APRIL 2025</h5>
<br>
<div class="twocol justify"><p>Bumblebee is a tool I built for one of my employers to automate the generation
of web scraping scripts.</p>
<video style="max-width:100%; margin-bottom: 10px" controls="" poster="poster.png">
<source src="bee.mp4" type="video/mp4" />
</video>
<p>In 2024, we were tasked with collecting market data using various methods,
including scraping data from authorized websites for traders’ use.</p>
<p>Manual authoring of such scripts took time. The scripts were often brittle due
to the complexity of the modern web, and they lacked optimizations such as
bypassing the UI and retrieving the data files directly when possible, which
would have significantly reduced our compute costs.</p>
<p>To alleviate these challenges, I, with the help of a colleague, Andy Zhang,
built Bumblebee: a web browser powered by C# Windows Forms, Microsoft Edge <a src="https://developer.microsoft.com/en-us/microsoft-edge/webview2" class="external" target="_blank" rel="noopener noreferrer">WebView2</a>, and
the <a src="https://github.com/desjarlais/Scintilla.NET" class="external" toarget="_blank" rel="noopener noreferrer">Scintilla.NET</a> text editor.</p>
<p>Bumblebee works by injecting a custom JavaScript program that intercepts
client-side events and sends them to Bumblebee for analysis. In addition to
front-end events, Bumblebee also captures internal browser events, which it
then interprets to generate code in real time. Note that we developed Bumblebee
before the advent of now-popular LLMs. Bumblebee supports dynamic websites,
pop-ups, developer tools, live manual override, event debouncing, and filtering
hidden elements and scripts.</p>
<p>Before settling on a desktop application, we contemplated designing Bumblebee
as a browser extension. We chose the desktop app because extensions don’t offer
the deep, event-based control we needed. Besides, the company’s security
policy, which prohibited browser extensions, would have complicated the
deployment of an extension-based solution. My first prototype used a C# binding
of the Chromium project. WebView’s more intuitive API and its seamless
integration with Windows Forms led us to choose it over the Chromium wrapper.</p>
<p>What began as a personal side project to improve my own workflow enabled us to
collectively improve the quality of our web scripts at a much larger scale.
Bumblebee predictably reduced the time we spent on authoring scripts from hours
to a few minutes.</p>
</div>
<p class="post-author right">by W. D. Sadeep Madurange</p>
</div>
</div>
</main>
<div class="footer">
<div class="container">
<div class="twelve columns right container-2">
<p id="footer-text">© ASCIIMX - 2025</p>
</div>
</div>
</div>
</body>
</html>
|
