Coding

Recreating a Chrome Extension for Pinboard.in Using AI Assistants

by

Recently, one of my most essential Chrome extensions was automatically disabled after an update. Google Chrome has migrated to Manifest V3 for extensions, causing older, unmaintained extensions to stop working. While I’ve dabbled with extension development in the past, I wasn’t familiar with the new manifest format. This presented a perfect opportunity to test the capabilities of AI assistants like ChatGPT and Claude.

The Problem

The extension in question was simple but critical to my workflow: it allowed me to right-click and post the current page or selection directly to Pinboard.in, my bookmarking service of choice. Pinboard offers a straightforward API for adding links – you simply use the pinboard.in/add URL and pass parameters for the title, link, and description. The service then displays a page where you can adjust these values or add tags before saving.

My initial approach was to ask ChatGPT to convert the old extension to the newer manifest format. This failed completely. Since I couldn’t verify the license of the original extension (the creator’s personal website is offline – I hope they’re okay!), I decided to build a new extension from scratch.

Building a new Plugin from Scratch with AI

I started by explaining my goal to ChatGPT and requesting a Manifest V3 template. This generated the foundational file I used moving forward. I think templating is a really good use case for AI assistants to make. But from there, things went a little awry.

For example, a seemingly simple request like:

"When I right click and select my 'post to pinboard' entry, I want a popup to appear with the pinboard.in/add page"

led to several iterations because my language wasn’t as precise as it should have been. First, ChatGPT created a Chrome popup using chrome.action.openPopup() which is technically correct based on my prompt, but not what I needed.  Once I closed the Chrome popup, then a blank pinboard.in/add page opened in the browser window.  The Title and Link info I entered into the popup did not pass to the pinboard window either. Obviously I was going to have to assume less of the AI when writing my prompts.

After clarification, the new code opened the pinboard.in/add page in a new tab which was closer, but still not ideal. I gave it one more try, clarifying I wanted a new window. Finally, it created a separate popup window, but it wouldn’t automatically close after submission

This inability to autoclose the window was tricky for ChatGPT. Once the user clicks the “Add Bookmark” button, the popup window just went completely white, but would not close, regardless of the command I tried in the listener callback function.  This was frustrating because every time I asked for new code, ChatGPT would reply as if it had made some change, but you produce identical code. The responses were something like

You’re right, I added a window.close() call in the function to make the window close when the “Add Bookmark” button is clicked.

After multiple attempts with ChatGPT producing identical code despite my clarifications, I switched to Claude to see if it could help solve the popup closing issue. I pasted in my code and asked it for help closing the pop up window. Initially, Claude produced similar results, but after some persistence, it understood what I was trying to accomplish.  In it’s final response, it mentioned making the popup window a “true popup” which is the solution I was looking for from the beginning.

With the “post page to Pinboard” feature working properly, I then extended the extension to work with selected text. When text is highlighted on a page, the extension now adds it as the description parameter in the Pinboard form – creating a more versatile bookmarking tool. The last step was making custom icons in inkscape and post it on github.

Installing and Using the Final Product

  1. Click here to see the complete, working extension is available on GitHub.
  2. To test this plugin, simply download the code as a zip file to you PC.
  3. Unzip this folder my right-clicking it and selecting “Extract All” if in windows.
  4. Then open chrome://extensions/
  5. In the top right corner, click to activate “Developer mode”
  6. This will show 3 additional button on the top right of the window. Click “Load Unpacked” and select the folder
  7. Then on any webpage, right-click and select “Post page to Pinboard” (Obviously you should have a pinboard.in account for this to work)

This project shows both the potential and limitations of using AI assistants for development tasks. While they excel at generating boilerplate code and understanding common patterns, precise implementation details sometimes require persistence and clear communication. You can spend longer debugging what they give you rather than just writing the code yourself, even if you aren’t familiar with all the details of the language.  By asking the AI tools for a description of how to do atomic tasks, or how a particular function might work if you are unfamiliar, you’ll get farther than just expecting it to produce good ode on its own.

Transfer Files From Phone to PC Easily

by

I have a Pixel phone that for some reason always disconnects when I try to transfer files over USB to my laptop. it is almost full of pics and videos since I can’t really transfer them off. I finally filled the phone up and had to make space, so I figured out the method I’m going to use from now on to transfer files on and off my phone.

I set my phone up to be a simple little WebDAV server. This allows me to very easily map it as a network drive in windows and transfer files at will.

I downloaded HTTP File Server (+WebDAV ) on my phone. Then I opened it and clicked the “Start button to start the server. Obviously you have to give this app file permissions for it to work.

Then on my PC, I mapped the drive by right-clicking the “This PC” and selected “Map Network Drive:

 

Then type in the address from the HTTP Server app.

Once this is done you can access the file from the phone via whatever drive letter you selected when you mapped it. In the above image the drive is the Y:/

 

COM Port Name Pop-up

by

When working with microcontrollers, especially helping students debug their work, I hate having to open device manager or a serial terminal to search for the serial port name of the device I most recently plugged in.  I wrote a small python script to hook into Window’s notification system to know when a new COM port has been plugged in, and then display its name in a popup window.

The first step in this was to find out when something is plugged in.  I tried all sorts of things with windows event viewer to see if I could detect this because I didn’t want to have yet another service running in the background on my PC eating resources all the time, and I wanted the reaction to be fast, so polling every 10 seconds or something would be too long to wait for a popup.  Alas, I couldn’t find any way to get USB port data to trigger an event in windows when you plug in a USB port.

Looking online for examples I only seemed to find C# or VS code.  I’m not installing anything more to develop this one project, and at first I wanted to see if there was a cross-platform solution since I was going to have to write it all from scratch.  Eventually I settled on a windows-only solution because I found an excellent site that is full of good code examples for win32 python interfacing from a user’s post on stackoverflow. these kinds of sites are few and far between, so I’m glad I came across it!  This code example connects into Windows Notification center and WMI (Windows Management Interface) to detect when USB items are plugged in. You can detect drives, networking, and serial ports based on the example in the link.

Once this info is gathered, the next step is to create a popup with the COM port name. For this I came across an example using the plyer library for python which is dead-simple.

When you run python code, by default, the command window is always visible, so I tried a few things to hide it. Firstly, you should be able to just use pythonw.exe instead of python to run the code and it should hide the window. For some reason, this didn’t always work. The next thing I tried was using the win32 library in python. This grabs the foreground window and hides it. Since the foreground window is likely this python script, it works fine. Running it sometimes takes a faction of a second for it to hide the window so sometimes you see it flash a command window.

The final step is to have this app start when you turn on the computer. Some folks said you could just put your python file into the windows startup folder, but this never worked for me. Instead, I keep the python script in my installations folder (where I keep all my useful apps) and I wrote a batch script to run the python code. I saved the batch script into my startup folder and rebooted.  It works great and doesn’t use many resources at all!

Get my python code and batch script here.  If you use it, let me know in a comment.

Now,  if you use linux or mac, I recommend you check out usb-ser-mon which has some of the same functionality of detecting plugged-in devices. Then you can use the same plyer code to generate a popup from what I understand.

Making Procedurally Generating Spalting Patterns

by

I did this a while back, but someone had an interest in this on hackaday so I tried to dig up my old code.

The goal is to generate wood grain patterns for laser cutting/CNC of plywood. Mainly, I wanted to have something similar to spalted maple laser etched onto the plain birch veneered plywood. The thing that inspired this project was this post of speaker boxes on imgur I came across. The design looked really cool, and while spalted maple is expensive, birch plywood is relatively cheap.

My first step was to procedurally create a random pattern.  Similar to the imgur post, I looked at creating camouflage. I found a great example code on openprocessing by ThingOnItsOwn that used perlin noise to create a camouflage pattern. I tweaked the values a bit experimentally, then stretched the entire design to make the final design look more like woodgrain.

The next step was to just capture the edges of these blob shapes from the first pattern. I came across this example from Richard Bourne It is forked from this example from R. Luke DuBois.   Honestly I was being lazy because I had written edge detection code in college as it is standard image processing, but I knew someone else had it already in processing. Instead of using for loops, this version manually calculates out the kernel.

This leaves me with a result that looks pretty realistic.

Camo:

Spalting:

This creates a PNG filetype which can be used to add texture to a 3D print in the slicer. The slicer will adjust the print to incorporate the texture in 3D giving it a woodgrain-like effect. You technically could use this as-is on a laser cutter to create spalting like my inspiration, however being raster data, it would take the laser a long time. It’d have to scan the laser (the thickness of a human hair) across the entire area of the panel you are applying the texture on. To make this faster, you can vectorize the PNG in inkscape or other software to outline the dark areas of the PNG.  This will cut fast as it is a vector (the laser would just have to draw the lines the same way your hand would. That would save a lot of time.

If anyone wants to add vectorizing to my code, please do! You can clone my github and put it on P5.js. I was going to add it, but I got lazy again. I even asked ChatGPT3 to help combine this code with something like potrace or imagetracerjs but it produced code that looked great, some even compiled after a few tweaks, but never worked.

Ultimate List of Tips, Tricks, and Tutorials for Fab Lab Students

by

This post is a not on a lot of techniques for using different types of machines and processes for making stuff. I’ve had this for years but decided to finally publish it. I’ll add to it periodically, but I figured others might find it useful as well. RIGHT-CLICK to open in new windows.

Laser Cutting:

Embedded Systems, Microcontrollers, and Arduino

Circuit Board design and Fabrication:

3D Printing:

Casting and Mould Making:

CNC:

Machines:

Mechanical:

Metal-Bending:

Miscellaneous:

 

 

================================================

My favorite Fabrication-related researchers:

Dr. Stephanie Meuller at MIT’s research group

Dr. Patrick Baudisch at Hasso Plattner Institute Human computer interaction reserach group

 

Teaching Research:

Sketchnoting basics

Graphic Recording

Sketchnote travel journal to get started

Control Theory:

Brian Douglas’s awesome youtube channel explains Control with some great examples.

Kat Kim has another great channel on Controls as well as other Electrical and Computer engineering examples and lectures

George Gillard has a great whitepaper explaining PID controls

Another great PID example is from this Reddit thread

Learning Math concepts:

MathVault – Learn higher-level (college-level) math concepts more intuitively

BetterExplained.com ADEPT model for learning math intuitively

Good sources of materials:

XXXXXXXXXXX    Todo when I’m not so busy or lazy: XXXXXXXXXXXXX

Add sections for PCL shapelock and other named plastics to ultimate FabLab list.

Also add cardboard modeling guy and nibbler tool

Add anodizing alum and titanium, bluing/blacking steel,

And interesting research I like with lasers  hydrographics and uv printers and metal hologram art