Accelerate Web Testing with a Chrome Extension for Hunter Tracing

Background

Google Chrome extensions provide window control, network request control, and event listening, making them widely used in browsers. The team considered integrating such extensions with the testing process to improve efficiency.

Distributed Tracing System – Hunter

With the rise of SOA, many internet companies have mature distributed tracing systems such as Google Dapper, Twitter Zipkin, Taobao Eagle Eye, JD Hydra, eBay CAL, and Dianping CAT. Kukejia (酷家乐) needs to visualize a user's request end‑to‑end to aid performance analysis and online monitoring. The system aims to:

Monitor health of each subsystem.

Trace the complete call chain of a user request, speeding up debugging.

Assist service governance, identify pressure points, and guide performance optimization.

Hunter system architecture is shown below:

Improving Hunter Search Efficiency

During web testing, backend interface errors often cause bugs, requiring testers to open Chrome DevTools (F12) to locate the unique hunterId. By using a Chrome extension to monitor interface responses, the extension can instantly alert when an error occurs and provide a link to the corresponding call chain, saving considerable time.

After obtaining the hunterId, the extension can directly query Hunter for the call‑chain information. The simplified chain is illustrated in the following screenshot.

Extension Development Files

The essential file is manifest.json:

{
    "manifest_version": 2,
    "name": "demo",
    "version": "1.0.0",
    "description": "Simple Chrome extension demo",
    "icons": {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    "background": {
        "page": "background.html"
    },
    "browser_action": {
        "default_icon": "img/icon.png",
        "default_title": "This is a sample Chrome extension",
        "default_popup": "popup.html"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            "css": ["css/custom.css"],
            "run_at": "document_start"
        },
        {
            "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    "permissions": [
        "contextMenus",
        "tabs",
        "notifications",
        "webRequest",
        "webRequestBlocking",
        "storage",
        "http://*/*",
        "https://*/*"
    ],
    "web_accessible_resources": ["js/inject.js"],
    "homepage_url": "https://www.baidu.com",
    "chrome_url_overrides": {
        "newtab": "newtab.html"
    },
    "options_page": "options.html",
    "options_ui": {
        "page": "options.html",
        "chrome_style": true
    },
    "omnibox": { "keyword" : "go" },
    "default_locale": "zh_CN",
    "devtools_page": "devtools.html"
}

The popup page ( popup.html and popup.js) is displayed when the user clicks the extension icon (browser_action or page_action). It shows a temporary window that closes when focus leaves.

The background script ( background.js) runs continuously, has high privileges, can use all Chrome extension APIs, and can perform unrestricted cross‑origin requests.

Implementation Principle

The architecture is illustrated below:

Background.js listens to network requests; when an abnormal interface is detected, it forwards the information to popup.js via message passing. Popup.js then displays the result in popup.html.

Current Results

After being online for nearly two months, the extension has been used by 45 users and received positive feedback.

Reference Documentation

https://developer.chrome.com/extensions

http://open.chrome.360.cn/html/dev_doc.html

https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

https://developer.chrome.com/extensions/webRequest

https://developer.chrome.com/extensions/samples