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.