You're reading API documentation and want to inspect a JSON example. A stylesheet link needs formatting. There's a colour in an image you'd like to reuse. Each task usually starts with a small detour: select, copy, find a tool, paste.
HelpyTools Companion brings those tools into your browser's right-click menu. Choose an action on the thing you're looking at, and the extension opens a HelpyTools tool with the content already loaded. It also adds live requests to the HTTP Analyser, so you can inspect a response from the server itself.
The Companion is free and requires no account. It installs from the Chrome Web Store in Chrome, Edge and Brave, and from a Mozilla-signed build for Firefox — both links, with the steps, are on the Companion extension page.
Start with a code example
The newest action is Open this code block with HelpyTools. Right-click inside a preformatted code example and choose it. You don't have to drag a selection across every line first.
The extension reads the complete block, preserves indentation and line breaks, and excludes identifiable copy buttons and line numbers. Nested syntax-highlighting spans don't break the example into fragments. It then opens:
- JSON Formatter for JSON.
- JS / CSS Beautifier for JavaScript or CSS.
- SVG Editor for SVG source.
Try it on this fictional product response after installing the extension:
{
"product": "Field Notes",
"price": 12.5,
"currency": "AUD",
"inStock": true,
"tags": ["stationery", "notebook"],
"shipping": {
"standardDays": 3,
"expressDays": 1
}
}
Right-click the block, choose Open this code block with HelpyTools, and the JSON Formatter opens with the response ready to explore. Expand shipping, inspect the values, or switch between its output views.
A real Companion handoff into JSON Formatter. The screenshots in this guide use local demo data. Open any screenshot for a closer look.
This works for code you want to tidy up, too. Send the following example to the JS / CSS Beautifier and format it there:
.product-card{display:grid;gap:16px;padding:24px;border-radius:12px}
Or open this small icon in the SVG Editor:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect x="8" y="8" width="48" height="48" rx="12" fill="#7c3aed"/>
<path d="M20 32l8 8 16-16" fill="none" stroke="white" stroke-width="5"/>
</svg>
The code arrives as text for the receiving tool. Extracting JavaScript does not run it.
When the format isn't obvious
A fragment such as margin: 0 auto; lacks the surrounding selector that makes a complete CSS rule recognisable. Instead of forcing a guess, Companion asks you to choose among the three code destinations.
An ambiguous fragment opens a chooser on the source page. Choose a tool, or press Escape to cancel.
Ordinary preformatted blocks are the best fit. Inline snippets and custom editor widgets may not be supported, and unfamiliar page decorations can remain in the extracted text. If a block is too large to transfer, Companion reports that instead of opening a truncated example.
Open the resource behind a link
Sometimes the useful content is one click away: a products.json download, a stylesheet, a Markdown document or an image URL.
Right-click that link and choose Smart Open with HelpyTools. Companion fetches the linked resource and routes it using the response's content type, with filename and content detection where needed.
For example, a raw JSON response opens in JSON Formatter. A CSS file opens in JS / CSS Beautifier. An image opens in Image Converter, ready for you to choose an output format. Markdown and SVG have their own destinations, too.
There's a useful distinction here: code-block extraction reads the example already on the page; Smart Open fetches the resource behind the link. Choose the action that matches what you want to inspect.
Smart Open fetches without cookies. If a link returns an HTML login page instead of the expected JSON file, that response opens in HTTP Analyser with its status, headers and body. It won't silently treat the login page as your data.
Grab a colour, an image or just the selected text
Right-click a colour on a page and choose Pick this colour. In a supported top-level page, Companion samples the actual pixel under the click and opens Color Tools with that colour loaded. That includes colours inside an image or gradient, where there may be no single CSS value to copy.
The demo's violet swatch arrives in Color Tools, ready to copy or adjust.
If you need the image itself, choose Convert this image with HelpyTools instead. For example, send a PNG illustration to Image Converter, choose WebP, and compare the output before downloading it.
Text selections have their own menu. Highlight a paragraph, token or snippet, then use Send selection to HelpyTools to choose a compatible tool. Suggest a tool… puts likely matches first while keeping manual destinations available. A few useful combinations:
- Select a paragraph and send it to Text Stats to check its length.
- Select a JSON snippet embedded in prose and send it to JSON Formatter.
- Select encoded text and send it to Encoder / Decoder to inspect it.
For a complete code block, the code action saves you from making that selection in the first place.
Send a real request from HTTP Analyser
HTTP Analyser already explains pasted HTTP messages. With Companion installed, its Send button can make a live request through the extension and bring the response back into the tool.
Imagine you're checking an endpoint that should return the product JSON above. Open HTTP Analyser, enter the request for your endpoint, and click Send. Now you can inspect the returned status, content type, cache instructions and response body together.
This screenshot shows a request to the guide's local demo endpoint. Use your own endpoint when following along.
This is useful when the server doesn't allow a normal website to read its response through CORS. The request comes from the extension on your machine; it does not pass through a HelpyTools proxy. The destination server still receives the request, and its authentication and access rules still apply.
What about page layouts?
Companion also has page and element actions for CSS Wireframe. The normal toolbar click starts a page capture; Open this element in CSS Wireframe targets the element you right-clicked.
These actions capture sanitized structure and styles, removing page text and executable elements. They're intended for inspecting layout, rather than copying an article or making a screenshot of a page. Results depend on the source layout and available styles; the tool reports partial captures or loading failures.
To collect a page's colours instead, right-click the toolbar button and choose Extract this page's colour palette.
What happens to the content?
The extension asks for broad website access because the page, link or image you choose can belong to any site. Its content-reading actions run when you invoke them. A small pointer tracker remembers the right-click location so the extension can find the intended element or pixel.
Formatting and conversion happen in the receiving tool on your machine. Captured content isn't uploaded to a HelpyTools processing server. Network actions are explicit: Smart Open fetches the link you chose, image capture downloads the image, and HTTP Analyser sends the request you entered.
Text transfers use tool URLs whose fragments contain the input, so a copied tool URL can include that content. Receiving tools may also remember drafts in browser storage. Local processing doesn't mean the content disappears when you close the tab.
Try Companion on your next small task
Start with one workflow: install Companion, return to the JSON example in this article, and right-click it. Once you've seen the whole response arrive in JSON Formatter, try a stylesheet link or a colour from a page you're working on.