<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Vitalii</title>
    <description>The latest articles on DEV Community by Vitalii (@vitalii_sh).</description>
    <link>https://dev.to/vitalii_sh</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4177654%2F632148a4-6f48-4bf9-96ee-b507209662bb.png</url>
      <title>DEV Community: Vitalii</title>
      <link>https://dev.to/vitalii_sh</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vitalii_sh"/>
    <language>en</language>
    <item>
      <title>Why Copying Web Page Text Isn't Enough for AI — and What I Built Instead</title>
      <dc:creator>Vitalii</dc:creator>
      <pubDate>Sun, 18 Oct 2026 11:46:25 +0000</pubDate>
      <link>https://dev.to/vitalii_sh/why-copying-web-page-text-isnt-enough-for-ai-and-what-i-built-instead-679</link>
      <guid>https://dev.to/vitalii_sh/why-copying-web-page-text-isnt-enough-for-ai-and-what-i-built-instead-679</guid>
      <description>&lt;p&gt;I often use AI assistants when working with websites and web applications. Sometimes I need to ask a question about a page I'm looking at, but the AI has no idea what's actually on my screen.&lt;/p&gt;

&lt;p&gt;I can copy the text and paste it into the chat, but that doesn't always work well. On a simple article page, it's usually enough. On a dashboard or a settings page, things get more complicated.&lt;/p&gt;

&lt;p&gt;A lot of useful information is lost: which elements are buttons, which are links, whether a menu is open, or how different parts of the interface are connected.&lt;/p&gt;

&lt;p&gt;I wanted a better way to share this information with AI, so I started building a browser extension.&lt;/p&gt;

&lt;p&gt;The result is &lt;strong&gt;Copy as Context&lt;/strong&gt;, a free, open-source extension for Chrome and Firefox.&lt;/p&gt;

&lt;h2&gt;
  
  
  What does it do?
&lt;/h2&gt;

&lt;p&gt;The idea is pretty simple. Instead of copying only the visible text, the extension captures the page's structure and converts it into a text format that an AI assistant can understand.&lt;/p&gt;

&lt;p&gt;There are two output formats:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Semantic Text&lt;/strong&gt; — keeps information about elements such as buttons, links, input fields, and their states.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Markdown&lt;/strong&gt; — creates a more readable version of the page, useful for AI chats or personal notes.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I also added four compression levels. You can keep more details or make the output smaller if you don't need everything.&lt;/p&gt;

&lt;p&gt;For example, when working with a large page, I usually don't want to send thousands of characters of repetitive information to an AI. The compression options help reduce that.&lt;/p&gt;

&lt;h2&gt;
  
  
  Here's a quick demo
&lt;/h2&gt;

&lt;p&gt;I recorded a short video showing the extension in action. It covers the main features and shows how to copy page context into an AI chat.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/6NjQ28gr5ZE" width="710" height="399"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  A real example
&lt;/h2&gt;

&lt;p&gt;One situation where I find this useful is working with admin panels.&lt;/p&gt;

&lt;p&gt;Imagine you're on a settings page with several menus and options. You want to ask ChatGPT where to find a particular setting.&lt;/p&gt;

&lt;p&gt;If you copy the page text normally, ChatGPT might see the names of the settings, but it won't necessarily know which text belongs to which button or menu.&lt;/p&gt;

&lt;p&gt;With Copy as Context, I can copy a structured representation of the page and ask something like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Which section am I in? What can I change here? How do I open the environment settings?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The AI can then use the captured structure to answer the question.&lt;/p&gt;

&lt;p&gt;It doesn't mean the AI can interact with the page. The extension doesn't click anything or control the browser. It just provides more useful context.&lt;/p&gt;

&lt;h2&gt;
  
  
  Some technical details
&lt;/h2&gt;

&lt;p&gt;I built the extension using TypeScript and WXT.&lt;/p&gt;

&lt;p&gt;One thing I found interesting was how differently Chrome and Firefox handle page information.&lt;/p&gt;

&lt;p&gt;In Chrome, I use the browser's accessibility tree to get information about page elements. In Firefox, the extension works with HTML and ARIA attributes.&lt;/p&gt;

&lt;p&gt;Both approaches have advantages and limitations, and they don't always produce identical output.&lt;/p&gt;

&lt;p&gt;Compression was another part I spent time on. A web page can contain a lot of repeated or unnecessary information, especially when it has a complex layout.&lt;/p&gt;

&lt;p&gt;I wanted users to have control over how much detail they export, rather than forcing everyone to use one format.&lt;/p&gt;

&lt;p&gt;I also worked on support for embedded pages (iframes), which turned out to be more complicated than I initially expected because of browser permissions and cross-origin restrictions.&lt;/p&gt;

&lt;h2&gt;
  
  
  What about privacy?
&lt;/h2&gt;

&lt;p&gt;This was important to me from the beginning.&lt;/p&gt;

&lt;p&gt;The extension processes page content locally in the browser. It doesn't send captured information to my server or directly to an AI service.&lt;/p&gt;

&lt;p&gt;There's no account to create and no API key to configure. You simply copy the result and decide what to do with it.&lt;/p&gt;

&lt;p&gt;I added an option to redact detected sensitive values, but I wouldn't rely on it as a complete security solution. It's still worth checking the exported text before sharing it.&lt;/p&gt;

&lt;p&gt;There are also some limitations. The extension can only capture content it can access on the current page. It doesn't use OCR, and it won't automatically load content that hasn't appeared on the page yet.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where to get it
&lt;/h2&gt;

&lt;p&gt;Copy as Context is free and open source. You can try it here:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://chromewebstore.google.com/detail/copy-as-context/ghkjolcdeccimnjhdebaklffpekfmojd" rel="noopener noreferrer"&gt;Chrome Web Store&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://addons.mozilla.org/firefox/addon/copy-as-context/" rel="noopener noreferrer"&gt;Firefox Add-ons (Desktop and Android)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/V-Shkrobatskyi/Copy-as-Context" rel="noopener noreferrer"&gt;GitHub repository&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'm still improving the extension, and I'd be interested to know how it works on different websites.&lt;/p&gt;

&lt;p&gt;If you try it and find a page where the exported context is incomplete or confusing, feel free to open an issue on GitHub. Real examples would be especially helpful.&lt;/p&gt;

&lt;p&gt;And if you find the project useful, a GitHub star is always appreciated!&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>opensource</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
