Building a Chrome Extension for Timestamp Conversion

Inspired by a previous article and personal learning, the author creates a Chrome extension that converts selected time strings directly within the browser, supporting both second‑level and millisecond‑level timestamps as well as full date‑time formats.

Plugin Concept : The extension adds a context‑menu item that appears when a user selects a time string; clicking it opens a popup that performs the conversion. It also allows manual input for conversion.

Key Features : Conversion between seconds, milliseconds, and formatted date‑time strings; handling of both timestamp and date inputs.

Implementation Steps :

manifest.json : Defines the extension name, version, description, required permissions, background service worker, and default popup. Uses { "manifest_version": 3, "name": "TimeStamp-Handle", "version": "1.0", "description": "支持时间戳、年月日时分秒自动转换", "permissions": ["contextMenus", "storage"], "background": {"service_worker": "background.js"}, "action": {"default_popup": "popup.html"} } .

background.js : Registers a context‑menu item, stores the selected text, and opens the popup using chrome.runtime.getURL("popup.html") . It also listens for menu clicks and creates a new window for the popup.

popup.html : Provides a simple UI with an input field, a button, and a result area. The page loads popup.js to handle logic.

popup.js : Contains the conversion logic in function changeMain(timeString) { ... } , handling 19‑character date strings, 10‑digit second timestamps, and 13‑digit millisecond timestamps, returning formatted results or an error message. It also manages communication with background.js , populates the result fields, and binds the button click to the conversion function.

Debugging and Usage : Users enable developer mode in Chrome extensions, load the unpacked extension folder, and then can right‑click selected time strings to convert them. Changes to the code require a refresh of the extension; error messages appear next to the remove button if issues arise.

Finally, a QR code is provided for joining a technical discussion group.