Lorem Clipsum Chrome Extension | Portfolio

Why We Built a Chrome Extension

As a team, we’re constantly building out wireframes and demo sites. When we’re in those early stages of building, we use a lot of stock photos & filler text. The most popular filler text is called Lorem Ipsum because it’s a block of text that starts with the latin words Lorem Ipsum.

We thought that building a Chrome extension with different options for copying to the clipboard would help our team prototype just a little quicker - but really, we built this for the exercise. The Chrome extension is called Lorem Clipsum. Once installed, all you need to do is click the button to get the text copied directly to your clipboard.

How to Build a Chrome Extension

We referenced the official documentation as well as this Free Code Camp article to build the extension - for anyone who wants to learn, these two resources will be a great jumping off point. The idea that makes this work is that the extension is just a small, locally hosted website with special APIs & tools it can use to interact more with the browser. It’s built on HTML, CSS, and JavaScript, just like a normal website, and requires a little setup to get it started.

The Manifest

The Chrome Extension manifest is the entry point for your extension. It’s a .json file that communicates to the browser all the important information about your extension. The information in the file includes the extension name, description, logo file, the author, the file to show when the extension is activated, how the extension is activated, and much more. See the sample on this page of the manifest.json for the Lorem Clipsum extension for a basic understanding of how it looks. The most important parts are the lines that denote the manifest version and action. The manifest version tells Chrome which set of standards to use as their standards have changed over time. The current manifest version is 3, older versions will not be published - but that’s okay if you’re using the extension locally.

{ "version": "2", "manifest_version": 3, "name": "Lorem Clipsum", "description": "Get some Lorem Ipsum in your clipboard", "author": "Nate Northway", "action": { "default_popup": "popup.html", "default_icon": "icon.png" }, "commands": { "_execute_browser_action": { "suggested_key": { "default": "Ctrl+Shift+L", "mac": "MacCtrl+Shift+L" }, "description": "Opens popup.html" } } }

Draw the Rest of the Owl

Now that you’ve drawn out the frame, you can draw the rest of the owl. In the manifest above, we defined an entry point for our extension by defining the action property with a property named default_popup. That entry point is called popup.html, but you can call yours whatever you'd like. Create that file and that's where all the functionality will be called from. Build your “site”, then save as a .zip file.

How to Publish to the Chrome Web Store

Once your extension is built & compressed in a .zip file, you can upload it and publish it to the store. Start by going to the developer console and signing in. You’ll need to follow a few verification steps (like setting up 2-factor authentication and verifying your email) before your extension can be approved. Once any verification steps are complete, you can click “Add New Item” and upload your extension’s .zip file. Verify the information in the next step, then submit for review.

The review process can take some time, but most items are reviewed within 3 days. After your extension is reviewed, you’ll receive an email notification (if you’ve enabled that option, which we suggest you do). Once approved, you can view your item in the Chrome Web Store and viola! You’re a published developer! Congratulations!

Our Portfolio

What Our Partners Are Saying

Robert Burns

Facility Now

Nate is not a mere architect of code; he is a digital sorcerer, manipulating the elements of design with an otherworldly finesse. The visuals transcended the boundaries of aesthetics, pushing the envelope of what the mind could conceive. Color schemes bled into one another, creating a synesthetic symphony that resonated in the deepest recesses of my consciousness. 10/10, would Nate again.

Jaedon Nauriyal

Bound Couriers

We reached out to Nate to build our website shortly after we started our business. Nate is not only great with website design but also has a lot of industry experience with courier work. His combination of skills led to a great end result. He has also consistently maintained our website on the day-to-day, making changes upon our request.

Lorem Clipsum