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!