Build a Lorem Ipsum Generator Chrome Extension: Complete Guide
If you are a web developer, designer, or content creator, you have probably encountered the need for placeholder text more times than you can count. Whether you are prototyping a new website layout, testing a design system, or filling in content for a client presentation, Lorem Ipsum has been the industry standard for generating dummy text for centuries. In this comprehensive guide, we will walk you through the process of building a Lorem Ipsum Generator Chrome Extension that puts the power of placeholder text generation right at your fingertips.
This tutorial is designed for developers who want to expand their Chrome extension development skills while creating a genuinely useful tool. By the end of this guide, you will have a fully functional extension that can generate paragraphs, sentences, and even custom-length text directly from your browser toolbar.
Why Build a Lorem Ipsum Chrome Extension?
Before we dive into the code, let us explore why building a Lorem Ipsum generator as a Chrome extension makes perfect sense. The Chrome browser is the most popular web browser in the world, with billions of users relying on it daily for work and personal tasks. By building a Chrome extension, you are placing your tool directly in the workflow of millions of potential users.
A Lorem Ipsum extension offers several advantages over web-based generators. First, it is always accessible with a single click from your browser toolbar, eliminating the need to navigate to a separate website. Second, it can integrate with your clipboard system, allowing you to copy generated text instantly. Third, you can customize the extension to match your specific needs, whether that means adding favorite phrases, adjusting paragraph lengths, or implementing special formatting options.
The development process itself is straightforward. Chrome extensions primarily use HTML, CSS, and JavaScript, technologies that most web developers already know. This means you do not need to learn a new programming language or framework to get started. The Chrome extension platform uses Manifest V3, the latest version of the extension framework, which provides improved security, better performance, and modern APIs.
Project Planning and Architecture
Every successful Chrome extension starts with a solid plan. Let us outline the architecture of our Lorem Ipsum generator extension before writing any code.
Core Features
Our Lorem Ipsum generator extension will include the following features:
- Paragraph Generation: Generate multiple paragraphs of Lorem Ipsum text with a single click.
- Sentence Control: Allow users to specify the number of paragraphs or sentences they want to generate.
- Copy to Clipboard: One-click copy functionality to paste the generated text anywhere.
- Customizable Options: Allow users to choose between classic Lorem Ipsum and modern placeholder alternatives.
- Word Count Display: Show the word count and character count of generated text.
File Structure
A Chrome extension typically consists of several key files. For our Lorem Ipsum generator, we will need:
manifest.json: The configuration file that defines our extensionpopup.html: The user interface that appears when clicking the extension iconpopup.css: Styling for our popup interfacepopup.js: The JavaScript logic that handles text generation and user interactionslorem ipsum.js: A module containing the text generation algorithms
This simple structure keeps our code organized and maintainable. As you build more complex extensions, you might add background scripts, content scripts, and additional assets, but this foundation is perfect for a utility extension like ours.
Creating the Manifest File
The manifest.json file is the backbone of every Chrome extension. It tells Chrome about your extension’s name, version, permissions, and the files that should be loaded. Let us create a Manifest V3 compliant manifest for our Lorem Ipsum generator.
{
"manifest_version": 3,
"name": "Lorem Ipsum Generator",
"version": "1.0.0",
"description": "Generate Lorem Ipsum placeholder text with one click. Perfect for designers and developers.",
"permissions": ["clipboardWrite"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
There are a few important things to notice about this manifest. First, we are using manifest_version 3, which is the current standard for Chrome extensions. Second, we have included the “clipboardWrite” permission, which allows our extension to copy text to the user’s clipboard. Third, we have defined the popup.html as our default popup, which will appear when users click the extension icon.
If you are following along, you will need to create an icons folder and add placeholder icons for your extension. For development purposes, you can skip the icons or use simple placeholder images, but you will need proper icons before publishing to the Chrome Web Store.
Building the Popup Interface
The popup is what users see when they click your extension icon in the browser toolbar. It is essentially a small web page that appears in a pop-up window. Let us create an attractive and functional interface for our Lorem Ipsum generator.
Create a file called popup.html in your extension folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lorem Ipsum Generator</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="container">
<header>
<h1>Lorem Ipsum Generator</h1>
<p class="subtitle">Generate placeholder text instantly</p>
</header>
<main>
<div class="controls">
<div class="control-group">
<label for="paragraphs">Paragraphs:</label>
<input type="number" id="paragraphs" min="1" max="20" value="3">
</div>
<div class="control-group">
<label for="type">Type:</label>
<select id="type">
<option value="classic">Classic Lorem Ipsum</option>
<option value="words">Random Words</option>
<option value="sentences">Plain Sentences</option>
</select>
</div>
</div>
<button id="generate" class="btn btn-primary">Generate Text</button>
<div class="output-container">
<textarea id="output" placeholder="Your generated text will appear here..."></textarea>
<div class="output-stats">
<span id="word-count">0 words</span>
<span id="char-count">0 characters</span>
</div>
</div>
<button id="copy" class="btn btn-secondary">Copy to Clipboard</button>
</main>
<footer>
<p>Built with Chrome Extension Guide</p>
</footer>
</div>
<script src="lorem ipsum.js"></script>
<script src="popup.js"></script>
</body>
</html>
This HTML structure provides a clean, intuitive interface. We have input controls for specifying how many paragraphs to generate, a dropdown for choosing the type of placeholder text, a text area for displaying the output, and buttons for generating and copying text.
Styling the Popup
Now let us add some CSS to make our extension look professional and polished. Create a file called popup.css:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
width: 350px;
background-color: #f8f9fa;
color: #333;
}
.container {
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #e9ecef;
}
h1 {
font-size: 18px;
font-weight: 600;
color: #1a73e8;
margin-bottom: 4px;
}
.subtitle {
font-size: 12px;
color: #666;
}
.controls {
display: flex;
gap: 12px;
margin-bottom: 15px;
}
.control-group {
flex: 1;
}
.control-group label {
display: block;
font-size: 12px;
font-weight: 500;
margin-bottom: 6px;
color: #555;
}
.control-group input,
.control-group select {
width: 100%;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 13px;
background-color: white;
}
.control-group input:focus,
.control-group select:focus {
outline: none;
border-color: #1a73e8;
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}
.btn {
width: 100%;
padding: 10px 16px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 12px;
}
.btn-primary {
background-color: #1a73e8;
color: white;
}
.btn-primary:hover {
background-color: #1557b0;
}
.btn-secondary {
background-color: #34a853;
color: white;
}
.btn-secondary:hover {
background-color: #2d8e47;
}
.output-container {
margin-bottom: 12px;
}
#output {
width: 100%;
height: 150px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 13px;
line-height: 1.5;
resize: vertical;
font-family: 'Georgia', serif;
}
#output:focus {
outline: none;
border-color: #1a73e8;
}
.output-stats {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 11px;
color: #888;
}
footer {
text-align: center;
padding-top: 15px;
border-top: 1px solid #e9ecef;
font-size: 11px;
color: #999;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn.copied {
background-color: #1e8e3e;
}
This CSS provides a modern, clean look that follows Chrome’s design guidelines. We have used a subtle color palette with blue as the primary accent color, which is consistent with Chrome’s branding. The interface is responsive and works well on different screen sizes.
Implementing the Lorem Ipsum Algorithm
Now we need to create the JavaScript file that generates the Lorem Ipsum text. This is the core functionality of our extension. Create a file called lorem ipsum.js:
// Classic Lorem Ipsum text source
const loremIpsumText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.`;
// Word array for random word generation
const randomWords = [
'lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipiscing',
'elit', 'sed', 'do', 'eiusmod', 'tempor', 'incididunt', 'ut', 'labore',
'et', 'dolore', 'magna', 'aliqua', 'enim', 'ad', 'minim', 'veniam',
'quis', 'nostrud', 'exercitation', 'ullamco', 'laboris', 'nisi', 'aliquip',
'ex', 'ea', 'commodo', 'consequat', 'duis', 'aute', 'irure', 'reprehenderit',
'in', 'voluptate', 'velit', 'esse', 'cillum', 'fugiat', 'nulla', 'pariatur',
'excepteur', 'sint', 'occaecat', 'cupidatat', 'non', 'proident', 'sunt',
'culpa', 'qui', 'officia', 'deserunt', 'mollit', 'anim', 'id', 'est',
'laborum', 'perspiciatis', 'unde', 'omnis', 'iste', 'natus', 'error',
'voluptatem', 'accusantium', 'doloremque', 'laudantium', 'totam', 'rem',
'aperiam', 'eaque', 'ipsa', 'quae', 'ab', 'illo', 'inventore', 'veritatis',
'quasi', 'architecto', 'beatae', 'vitae', 'dicta', 'explicabo', 'nemo',
'aspernatur', 'aut', 'odit', 'fugit', 'consequuntur', 'magni', 'dolores',
'eos', 'ratione', 'sequi', 'nesciunt', 'porro', 'quisquam', 'numquam', 'modi'
];
// Split classic text into paragraphs
const classicParagraphs = loremIpsumText.split('\n\n').filter(p => p.trim());
/**
* Generate classic Lorem Ipsum paragraphs
*/
function generateClassic(paragraphCount) {
const paragraphs = [];
for (let i = 0; i < paragraphCount; i++) {
const index = i % classicParagraphs.length;
paragraphs.push(classicParagraphs[index]);
}
return paragraphs.join('\n\n');
}
/**
* Generate random words as placeholder text
*/
function generateRandomWords(paragraphCount, wordsPerParagraph = 30) {
const paragraphs = [];
for (let p = 0; p < paragraphCount; p++) {
const words = [];
for (let w = 0; w < wordsPerParagraph; w++) {
const randomIndex = Math.floor(Math.random() * randomWords.length);
words.push(randomWords[randomIndex]);
}
paragraphs.push(words.join(' '));
}
return paragraphs.join('\n\n');
}
/**
* Generate plain sentences without Lorem Ipsum
*/
function generateSentences(paragraphCount, sentencesPerParagraph = 5) {
const paragraphs = [];
const sentenceStarters = [
'The quick brown fox jumps over the lazy dog.',
'Pack my box with five dozen liquor jugs.',
'How vexingly quick daft zebras jump!',
'Sphinx of black quartz, judge my vow.',
'Two driven jocks help fax my big quiz.',
'The five boxing wizards jump quickly.',
'Jackdaws love my big sphinx of quartz.',
'Crazy Frederick bought many very exquisite opal jewels.'
];
for (let p = 0; p < paragraphCount; p++) {
const sentences = [];
for (let s = 0; s < sentencesPerParagraph; s++) {
const starter = sentenceStarters[Math.floor(Math.random() * sentenceStarters.length)];
sentences.push(starter);
}
paragraphs.push(sentences.join(' '));
}
return paragraphs.join('\n\n');
}
/**
* Main generation function
*/
function generateLoremIpsum(paragraphCount, type = 'classic') {
switch (type) {
case 'words':
return generateRandomWords(paragraphCount);
case 'sentences':
return generateSentences(paragraphCount);
case 'classic':
default:
return generateClassic(paragraphCount);
}
}
/**
* Calculate word count
*/
function countWords(text) {
return text.trim().split(/\s+/).filter(word => word.length > 0).length;
}
/**
* Calculate character count
*/
function countCharacters(text) {
return text.length;
}
// Export functions for use in popup.js
if (typeof module !== 'undefined' && module.exports) {
module.exports = { generateLoremIpsum, countWords, countCharacters };
}
This JavaScript module provides three different types of placeholder text generation. The classic Lorem Ipsum uses the traditional Latin text that designers have used for centuries. The random words option generates random English words without coherent meaning, which is useful for testing layout flexibility. The plain sentences option provides readable English sentences that can serve as more natural-looking placeholder content.
Connecting the Logic to the UI
Now we need to create the popup.js file that connects our UI to our generation logic:
document.addEventListener('DOMContentLoaded', () => {
const generateBtn = document.getElementById('generate');
const copyBtn = document.getElementById('copy');
const output = document.getElementById('output');
const paragraphsInput = document.getElementById('paragraphs');
const typeSelect = document.getElementById('type');
const wordCountEl = document.getElementById('word-count');
const charCountEl = document.getElementById('char-count');
// Generate text on button click
generateBtn.addEventListener('click', () => {
const paragraphCount = parseInt(paragraphsInput.value) || 3;
const type = typeSelect.value;
const generatedText = generateLoremIpsum(paragraphCount, type);
output.value = generatedText;
updateStats(generatedText);
});
// Copy to clipboard
copyBtn.addEventListener('click', async () => {
const text = output.value;
if (!text) {
copyBtn.textContent = 'Nothing to copy!';
setTimeout(() => {
copyBtn.textContent = 'Copy to Clipboard';
}, 1500);
return;
}
try {
await navigator.clipboard.writeText(text);
copyBtn.textContent = 'Copied!';
copyBtn.classList.add('copied');
setTimeout(() => {
copyBtn.textContent = 'Copy to Clipboard';
copyBtn.classList.remove('copied');
}, 2000);
} catch (err) {
console.error('Failed to copy text: ', err);
copyBtn.textContent = 'Copy failed!';
setTimeout(() => {
copyBtn.textContent = 'Copy to Clipboard';
}, 1500);
}
});
// Update statistics when output changes
output.addEventListener('input', () => {
updateStats(output.value);
});
function updateStats(text) {
const words = countWords(text);
const chars = countCharacters(text);
wordCountEl.textContent = `${words} word${words !== 1 ? 's' : ''}`;
charCountEl.textContent = `${chars} character${chars !== 1 ? 's' : ''}`;
}
// Generate initial text on load
generateBtn.click();
});
This script handles all the user interactions in our popup. It listens for clicks on the generate and copy buttons, updates the statistics display, and provides visual feedback when text is copied to the clipboard. The code is clean and straightforward, making it easy to understand and modify.
Testing Your Extension
Before publishing your extension, you need to test it thoroughly to ensure everything works correctly. Chrome provides a simple way to load unpacked extensions for testing.
- Open Chrome and navigate to
chrome://extensions/ - Enable “Developer mode” using the toggle in the top right corner
- Click “Load unpacked” and select your extension folder
- The extension icon should appear in your browser toolbar
- Click the icon to test the popup interface
- Generate some Lorem Ipsum text and try copying it
If you encounter any errors, check the console for JavaScript errors. You can right-click on the popup and select “Inspect” to open the developer tools for your extension popup.
Publishing to the Chrome Web Store
Once you have tested your extension and are satisfied with its functionality, you can publish it to the Chrome Web Store. Here are the steps:
First, create a zip file containing all your extension files. Make sure to include the manifest.json, popup.html, popup.css, popup.js, lorem ipsum.js, and any icons.
Next, navigate to the Chrome Web Store Developer Dashboard and create a developer account if you do not already have one. You will need to pay a one-time registration fee of $5.
Upload your zip file and fill in the required information, including the extension name, description, and screenshots. Google will review your extension before publishing, which typically takes a few hours to a few days.
Once approved, your extension will be available in the Chrome Web Store for anyone to install. You can share the link with others and even promote it on social media or developer communities.
Conclusion
Congratulations! You have successfully built a complete Lorem Ipsum Generator Chrome Extension from scratch. This extension demonstrates key concepts in Chrome extension development, including Manifest V3 configuration, popup UI creation, JavaScript logic implementation, and clipboard integration.
The skills you have learned in this tutorial can be applied to build many other types of Chrome extensions. Whether you want to create a productivity tool, a developer utility, or a content management helper, the fundamentals remain the same. Chrome extensions are an excellent way to solve everyday problems and share your solutions with millions of users worldwide.
Consider adding more features to your Lorem Ipsum generator, such as the ability to save favorite phrases, export settings across devices using Chrome sync storage, or add keyboard shortcuts for faster access. The Chrome extension platform offers many APIs that can help you expand your extension’s functionality.
Remember to check out the Chrome Extension Guide for more tutorials and resources on building Chrome extensions. Happy coding!