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.

Devlog #4: READ ME READ ME

I managed to make a README! It’s very basic, but it’ll do. Now all that’s left is to ship! (hopefully i remembered everything)

Devlog #3: Adding Some Style!

Adding CSS was probably the easiest part of the mission. I just added a font (Google Sans Code, if you’re wondering), changed the background colour (to #001), and added some pseudo elements (I omitted the zigzag, as it looked quite weird). You can see the CSS below.

Also, I think that the mountains look pretty cool. 🏔️ 🏔️

Now all that’s left to do is write a README!

Devlog #2: Stealing Fetching the Data

Time to fetch the data! You can now fetch data from the NASA API with my API key!
Today’s one is a simulation of the universe named TNG50.
Next I’m going to add some fancy CSS, then I’ll get to work on a README!

Devlog #1: Got it Published!

I’m currently working on The Daily Cosmos, a daily article with images about space.

Currently, there is nothing on the site, but I plan to add some info and a picture from NASA and some fancy CSS.

Devlog #4: Music Player

I made a music player! I used some AI since it’s been a while since I coded JavaScript, but I put together the thing myself. Here’s how it works.

First, I get the file from the user in the form of <input id="musicFile" accept"audio/*" type="file">.
Then, I listen for a change in the input by adding an event listener: musicFile.addEventListener("change", loadMusic);.
Once the user adds a file, I fetch the file :const file = this.files[0];.
Then I assign it to a blob URL: musicURL = URL.createObjectURL(file);.
Next, I assign the blob URL to the source tag: musicSource.src = musicURL;.
Finally, I reload the audio tag for the changes to take place: musicPlayer.load();.

Here’s the code:
HTML Code:

<input id="musicFile" type="file" accept="audio/*">
<audio id="musicPlayer" controls>
    <source id="musicSource" src="">
</audio>

JavaScript Code:

function loadMusic() {
  const file = this.files[0];
  if (file) {    
    if (globalThis.musicURLblob){
      URL.revokeObjectURL(globalThis.musicURLblob);    
    }
    globalThis.musicURLblob = URL.createObjectURL(file);
    musicSource.src = globalThis.musicURLblob;    
    musicPlayer.load();
    musicPlayer.play();  
  }
}

let musicURLblob = null;
const musicFile = document.querySelector("#musicFile");
const musicSource = document.querySelector("#musicSource");
const musicPlayer = document.querySelector("#musicPlayer");

musicFile.addEventListener("change", loadMusic);

Devlog 3: About Screen

About my project:

Browser!!

I’ve created a browser!
Most links don’t work(because it’s an <iframe>)

Cricket, a very basic OS

Cricket is a very basic operating system. When it’s done, it will have a lot of features, including:

• a text editor [✓],
• a terminal [-],
• a web browser [-],
• a media player/viewer [ ],
• and a bunch of other stuff.

So far, I’ve done the first one, the second two are in progress, and the third has not been started yet.

Here is an image: