# Transcript: make-me-a-chrome-extension One conversation, session 9762ae90-1f6d-499e-9dbe-c17331e32b30, model claude-sonnet-5-5, 2.1.287 (Claude Code), run with claude -p on 2026-10-02. Claude could only create, read and edit files in an empty folder (told that files it saves are offered to the user as downloads), the nearest headless equivalent of claude.ai with file creation switched on. No terminal, no web search, no connectors. Each step was sent with --resume so Claude saw everything before it. Replies are verbatim; lines in *[brackets]* mark where Claude saved a file, and the files themselves are published unedited. --- ## Prompt 1: you I'd like a small Chrome extension and I've never made one. I'm Ruth. I write short pieces for my village newsletter, and every piece has a word limit, so I'm forever pasting text into word counter websites. I'd like a button in Chrome: I highlight some text on any web page, click the button, and it tells me how many words I've highlighted. Some things that matter to me: - I don't want it reading every website I visit, saving anything or sending anything anywhere. It should only look at the page when I click the button. - Please keep the permissions it asks for to the bare minimum, and explain each one in plain English, so I know what I'm agreeing to. - Large, clear writing. My eyes aren't what they were. I'm not technical, and I don't want to install anything or use the terminal. Before you make anything, ask me anything you need to know, and tell me in plain English what you're going to make. ### Claude Hello Ruth, this is very doable. I haven't made anything yet. Here is what I plan to build, followed by a few questions. ## What I'll make A small button on the Chrome toolbar, at the top right of the window. You highlight some text on a page and click the button. A small box opens and shows the number of words in very large, clear print. - It only looks at the page at the moment you click the button. - It saves nothing and sends nothing anywhere. It has no connection to the internet at all. - It does nothing in the background while you browse. ## The permissions, in plain English I'll ask for only two: 1. **"activeTab"** means Chrome lets the extension look at the page you are on, only after you click the button, and only for that one page. When you move on, the permission ends. This is what stops it reading every site you visit. 2. **"scripting"** means the extension may fetch the highlighted text from that page. Without it, the extension couldn't read your highlighted words, even on a page you had just clicked on. I won't ask for access to all websites, your browsing history, your bookmarks, or storage. Chrome's install screen may therefore show very few warnings. ## How you'd install it You won't need the terminal or any downloads. I'll put the files in a folder. You then open Chrome's extensions page, switch on "Developer mode", click "Load unpacked", and pick the folder. I'll write the steps out in large print with each click spelled out. It takes about a minute. Because the extension doesn't come from the Chrome Web Store, Chrome may occasionally remind you that you're using a developer extension. That is normal and harmless. ## My questions 1. **Which computer do you use?** Windows, Mac or Chromebook? The steps are nearly the same, but I want the instructions to match what you see. 2. **Is Chrome the browser you use?** Edge and Brave would also work, but I'd word the steps differently. 3. **How should it count?** I'd count anything separated by spaces as a word, so "well-known" counts as one word and "10,000" counts as one. That is how Microsoft Word counts. Is that what you want? 4. **Do you want anything besides the word count?** For example, a character count, or a "words remaining" figure if you type in your limit. I'll leave these out unless you ask, to keep it simple. 5. **How big should the text be?** I'm planning a very large number, around 60 pixels tall, with plain dark-on-white colours and a clear message if nothing is highlighted. Would you like it larger, or a different colour scheme, such as a cream background or white on black? 6. **Do you ever count text in PDFs opened in Chrome?** Chrome's built-in PDF viewer often blocks extensions from reading highlighted text. If that matters to you, I'll add a message saying so instead of showing a confusing "0". Answer as many as you like. If you'd rather I use sensible defaults for any of them, just say "your choice" and I'll get started. --- ## Prompt 2: you Thanks, that sounds right. My answers: 1. A Windows laptop. 2. Yes, Chrome. 3. Yes, count it the way Word does. 4. Just the words for now. 5. Your plan for the size sounds good. A cream background would be easier on my eyes. 6. Not really, but a clear message instead of a confusing "0" would be kind. The same goes for when nothing is highlighted. Please call it "Ruth's Word Counter" and make it now. Keep it as simple as possible: just the files I'll need, nothing to install. Tell me which files you made and what each one is for. ### Claude *[Claude saved the file `manifest.json`]* *[Claude saved the file `popup.html`]* *[Claude saved the file `popup.js`]* Ruth's Word Counter is made. I haven't been able to try it in Chrome myself, so the first run on your laptop is the real test. ## The three files 1. **manifest.json** is the extension's "ID card". It gives the name, adds the toolbar button, and lists the two permissions (activeTab and scripting). Nothing else is requested. 2. **popup.html** is the little box that opens when you click the button. It sets the cream background, the very large number (64 pixels) and the large message text. 3. **popup.js** does the work. It fetches the highlighted text, counts the words the way Word does, and shows the number. It also shows the messages for "nothing highlighted" and "can't read this page". I didn't make an icon, to keep things as simple as possible. Chrome will show a grey button with the letter "R" on it instead. I can add a proper picture later if you'd like one. ## How to install it (Windows, Chrome) 1. Find the folder that holds the three files. Make sure all three are together in one folder, and remember where it is. 2. Open Chrome. Click the address bar at the top, type **chrome://extensions** and press **Enter**. 3. At the top right, switch on **Developer mode**. 4. Click **Load unpacked**, which appears at the top left. 5. Choose the folder with the three files and click **Select Folder**. 6. Click the **puzzle-piece** icon at the top right of Chrome, then the **pin** next to "Ruth's Word Counter". The button will now stay on your toolbar. ## How to use it Highlight some text on any web page and click the button. A box opens with your word count. - If nothing is highlighted, it says so and tells you what to do. - If Chrome won't let it read the page, it says that instead of a confusing "0". This happens on Chrome's own settings pages, the Chrome Web Store, and often on PDFs. If anything looks different from what I've described, tell me what you see and I'll fix it. --- ## Prompt 3: you Before I put it into Chrome, please check your work carefully, as if you were trying to find mistakes: what happens if I click it on a page where it isn't allowed to run, if nothing is highlighted, if I highlight a huge amount of text, or text with odd spacing, numbers or hyphenated words. Check too that it's easy to read and that someone using only a keyboard or a screen reader could use it. Tell me in plain English what you found, then fix it in the files. ### Claude I've read through the code the way a fault-finder would. Two things need fixing, plus several smaller improvements. I'll write the fixes now. *[Claude saved the file `popup.js`]* *[Claude saved the file `popup.html`]* *[Claude saved the file `manifest.json`]* I checked the code by reading it closely. I haven't run it in Chrome, so I can't promise every case works until you try it. I fixed everything I found, and all three files have been updated. ## What I found and fixed **Pages where it isn't allowed to run** - On Chrome's settings pages and the Web Store, the old version already showed a polite "Sorry, Chrome doesn't let me read this page" message instead of failing silently. - Some web pages have other websites embedded in them, such as adverts or video players. Chrome can refuse access to those parts, and the old version might then have given up on the whole page. It now tries the whole page first. If that fails, it falls back to the main page, which is where your highlighting almost always is. - Chrome also blocks extensions on web pages saved on your own computer (addresses starting with "file://") unless you change a setting. You'll get the "Sorry" message there. That's a Chrome rule, and I've left it alone so the extension asks for nothing extra. **Nothing highlighted** - It already said so. I added a note that PDFs can cause the same message, because Chrome often hides PDF text from extensions. **A huge amount of text** - Counting a very long selection works fine. - The number itself was a problem. At 64 pixels, a count in the millions would have run off the edge of the box. Numbers longer than seven characters, like 1,234,567, now use slightly smaller type so they fit. - You're unlikely ever to need this, but it's fixed. **Odd spacing, numbers and hyphens** - Extra spaces, tabs, line breaks and non-breaking spaces are all handled. Ten spaces between two words still gives two words. - Some websites hide invisible characters inside text, and these could have been counted as extra words. I now strip them out before counting. - Counting follows Word's rules, so you'll get the same answers: - "well-known" is **one** word. - "10,000" is **one** word. - "3 000" is **two** words. - A dash on its own with spaces round it ( – ) counts as a word, as in Word. - Two words joined by a dash with no spaces, such as "village—and", count as one word. Word does the same. **Easy to read** - The dark text on a cream background has very strong contrast, which is good for tired eyes. - The number is 64 pixels tall, the "words" label is 28 pixels, and messages are 24 pixels, all in Verdana. - I made no changes here. **Keyboard and screen reader** - A screen reader would not have announced the result, because it appeared after the box had opened. I've marked the box as a live area, so it now reads out "12 words" or the message as soon as it appears. - The toolbar button can be reached with the keyboard in Chrome, but that is fiddly. I added a shortcut, **Alt + Shift + W**. Highlight your text, press the three keys together, and the count appears with no mouse. It needs no extra permissions and doesn't change what Chrome tells you at install. - If another program already uses that shortcut, Chrome quietly leaves it unassigned. You can pick your own at **chrome://extensions/shortcuts**. ## Which of the three files changed All three: **popup.js** (the fixes above), **popup.html** (the screen-reader support and the smaller type for huge numbers) and **manifest.json** (the shortcut, and the version number is now 1.1). The installation steps are the same as before. If you already loaded the old version, click the small circular-arrow **reload** button on its card at chrome://extensions to pick up the changes. --- ## Prompt 4: you It's working nicely. One change, please: the online form for the newsletter counts characters, not words, so I'd like it to show the number of characters as well, under the words. Then tell me which files you changed, and what I need to do in Chrome so it uses the new version. ### Claude *[Claude edited the file `popup.html`]* *[Claude edited the file `popup.html`]* *[Claude edited the file `popup.js`]* *[Claude edited the file `popup.js`]* *[Claude edited the file `popup.js`]* *[Claude edited the file `popup.js`]* *[Claude edited the file `popup.js`]* *[Claude edited the file `manifest.json`]* The character count is added. It appears under the word count, with a thin line between them and in the same large type as the "words" label. For example: **245** words ――――― 1,402 characters (including spaces) ## What the character count includes - It counts every visible character: letters, numbers, punctuation and the spaces between words. - It ignores spaces or line breaks at the very start or end of your highlight. That way, if you highlight a little too far, the number isn't inflated. - A line break in the middle of your text counts as one character. Some online forms count it as two, so if the form shows a slightly different number for text with several paragraphs, that is the likely reason. - The permissions are the same as before, and nothing is saved or sent anywhere. I haven't run this in Chrome, so please check the first result against the form. ## Files I changed 1. **popup.js** counts the characters and passes the number to the box. 2. **popup.html** adds the new line for the character count and styles it. 3. **manifest.json** has only the version number changed, to 1.2, so you can tell the new version is loaded. ## What to do in Chrome 1. Save the three updated files in the same folder as before. Chrome reads them straight from that folder. 2. Open Chrome, click the address bar, type **chrome://extensions** and press **Enter**. 3. Find the card for **Ruth's Word Counter**. It should now say **Version 1.2** after you reload it. 4. Click the small **circular arrow** (reload) button on that card. 5. Go to any web page, highlight some text, and click the button or press **Alt + Shift + W**. You don't need to use "Load unpacked" again or pin the button again. If the card still says 1.1 after reloading, check that you saved the new files over the old ones in that same folder. --- ## Prompt 5: you I've downloaded all the files into one folder on my computer. I don't want to use the terminal or install anything. Please tell me, step by step, how I get it into Chrome on my own computer by clicking, what I should see at each step, and how I put a change in later (like the characters). My friend Jean would like it too. Could I put it on the Chrome Web Store so she can install it? What would that involve, and does it cost anything? ### Claude Everything you need is already in the folder, so there's nothing to install and nothing for me to change in the files. If a screen looks different from what I describe, tell me what you see. ## Putting it into Chrome **Before you start:** check that the three files, **manifest.json**, **popup.html** and **popup.js**, are together in one folder. They must not be inside a zip file. If they are, right-click the zip, choose **Extract All**, then **Extract**. Note which folder it is, such as Downloads or Documents. 1. **Open Chrome.** You should see your usual Chrome window. 2. **Click the address bar** at the top, type **chrome://extensions** and press **Enter**. You should see a page titled **Extensions**, possibly with a few extensions already on it. 3. **Switch on Developer mode.** It's a toggle at the top right. Click it so it turns blue. Three new buttons appear at the top left: **Load unpacked**, **Pack extension** and **Update**. 4. **Click Load unpacked.** A window opens showing the files on your computer. 5. **Find your folder and click it once** so it's highlighted. Don't open it and look inside. Then click **Select Folder** at the bottom right. 6. **Check the card.** A card named **Ruth's Word Counter** should appear, with Version 1.2, and the toggle should be blue (on). If you see a red **Errors** button instead, the folder probably holds only some of the files or is the wrong one. Click **Remove** and go back to step 4. 7. **Pin the button.** Click the **puzzle-piece** icon at the top right of Chrome. You'll see a list, so find Ruth's Word Counter and click the **pin** next to it. The button now stays on your toolbar. 8. **Try it.** Open any web page, highlight a few words, and click the button. A cream box appears with the number of words and characters. You can also press **Alt + Shift + W**. ## Putting a change in later 1. Save the new files over the old ones in the same folder, with the same file names. 2. Go to **chrome://extensions** again. 3. Find the Ruth's Word Counter card and click the **circular arrow** (reload) button on it. 4. Check that the version number shown matches the new one, then try it. Keep the folder where it is. If you move or delete it, Chrome loses the extension and will show an error. You then need to load the folder again with **Load unpacked**. When you start Chrome, it may sometimes warn that you have a developer-mode extension and offer to turn it off. Choose to keep it. Nothing is wrong. It's Chrome's general caution about extensions that didn't come from the Web Store. ## Sharing it with Jean You have two options. **Option 1: send Jean the folder (free, and quick).** Put the three files in a zip. In File Explorer, select them, right-click, then choose **Send to** and **Compressed (zipped) folder**. Email the zip to Jean. She extracts it and follows the same eight steps. Updates mean sending her the new files and asking her to click reload. This is fine for one or two friends. **Option 2: the Chrome Web Store.** Jean could then install it with one click, and updates would arrive on their own. Here is what it involves. Google can change the details, so check the current rules on the Chrome Web Store developer pages. - **Cost:** a one-time registration fee of $5 (US dollars, about £4) for a developer account. Publishing and updating after that is free. - **Account:** you'd use a Google account, and Google requires 2-step verification to be switched on for it. - **What I'd need to make:** a proper icon in a few sizes, which I can do. It also needs at least one screenshot and a short description of what the extension does. - **Your side:** you'd zip the three files, upload them, fill in a form about what the extension does and what data it collects (none, in this case), and justify each of the two permissions in plain words. - **Review:** Google checks every extension before it goes live, which usually takes a few days and sometimes longer. Because it asks for so little, I'd expect it to pass, but I can't promise that. - **Visibility:** you could mark it **Unlisted**, so only people with your link can find it. It wouldn't appear in searches, and Jean could install it from the link. - **Your name:** the store may show your name or contact details, depending on the account type. For just Jean, I'd start with option 1. If more villagers want it, the store becomes worth the $5. If you want to go that way, tell me and I'll make the icon, write the description and prepare the answers to the form.