Devlog 2: What’s Inside?

Today for MultiCopy, I added viewing functionality! It took so much longer than I thought because I had a few bugs in my copying code that prevented me from actually copying anything. I fixed those up, and then I added the viewbox. It was a lot of work, learning about shadow roots and grapheme clusters, but it was all worth it.
Basically, what happens is that the service worker (background.js) detects the keyboard shortcut that the user specified, and sends a message to the content script (content.js). In response to the message, the content script modifies an already created shadow root to display the text sent by the service worker. The content script shows the box for five seconds, then hides it.

But what if the copied text is too long?
Well that’s how grapheme clusters come into play. I want the text to be cut off at around 30 characters, but emojis to slice() are two characters long. That means that an emoji may get cut in half and be show incorrectly (😃😃=>😃�), so we use the spread operator in an array.

[..."value😃"].slice(0,30)+"..."

I’m not going to go into the specifics of actually how it works, but that’s the general idea.

Next, I’m going to do the pasting work (how am i going to do this) then I’m going to work on the CSS! Wish me luck!

Devlog #1: Getting Started!

I have never made a Chrome Extension before, so I used a fair bit of AI to look up commands (I pieced it together myself though).

MultiCopy is going to be a Chrome Extension that you can use to copy and paste content with multiple shortcuts.
For example:

|--------| Copy -| Paste -| View -----|
|--------|-------|-------|------------|
| Slot 1 | Alt+Z | Alt+A | Ctrl+Alt+Z |
| Slot 2 | Alt+X | Alt+S | Ctrl+Alt+X |
| Slot 3 | Alt+C | Alt+D | Ctrl+Alt+C |
etc.

Today, I managed to get the service worker successfully communicate with the injected script when I pressed the keyboard shortcut Alt+X. When the keyboard shortcut is pressed, the service worker communicates to the injected script by executing

const response = await chrome.tabs.sendMessage(tab.id, message)

and the injected script listens for it via

chrome.runtime.onMessage.addListener(() => {/*code*/})

So when the keyboard shortcut is pressed, the service worker sends an instruction to the injected script telling it to copy the current selected text. We do this with

const text = window.getSelection().toString()

This approach can’t copy images though, so I’ll have to make support for it later.

Then, we send a response back to the service worker:

sendResponse({ status:"success", text: [text] })

I haven’t added the storage logic yet, so now the service worker just logs the text to the console:

console.log(response.text)

Next I will add the copying logic, then I will add the pasting logic. The pasting logic will be a challenge because I have to find a way to paste it into the middle of text, but hopefully it will not be too much of a challenge.