How to Create a Find and Replace Text Browser Extension

Preface

As someone who frequently works with text on a Chromebook, I found myself constantly needing a reliable and quick way to find and replace text. Unfortunately, I noticed that the text editors available for Chromebooks lack this essential feature. While there are numerous online tools that offer find-and-replace functionality, relying on these online solutions has its downsides.

Firstly, these online tools require an internet connection, which can be a significant limitation when working offline or in areas with poor connectivity. Secondly, there are privacy concerns with using online tools. Many of these websites might include hidden spyware or adware within their scripts, posing a risk to user privacy and security. These scripts can track users’ activities across the web, compromising their data and browsing habits.

To address these issues, I decided to create my own browser extension for text find-and-replace. This extension is always just one click away, embedded right in the browser toolbar. It works offline, ensuring that I have access to this functionality anytime I need it, without relying on internet connectivity. Additionally, because it runs entirely within the browser, it eliminates the risk of hidden spyware or adware, making it a much more secure option.

This guide will walk you through the steps to create this tool yourself, allowing you to enjoy the same convenience and security. Whether you’re working offline or just want a more secure solution, this extension will be a valuable addition to your toolkit.

Who’s this tool for?

The target audience for a tool like this would include:

1. Students and Academics:

   • Often need to edit large documents, essays, or research papers.
   • Benefit from quick, reliable text editing tools.

2. Writers and Bloggers:

   • Require efficient text editing and formatting for content creation.
   • Appreciate tools that enhance productivity and maintain focus.

3. Office Professionals:

   • Frequently work with documents, reports, and emails.
   • Value tools that streamline repetitive tasks.

4. Developers and Coders:

   • Need to search and replace code snippets.
   • Prefer offline tools for security and speed.

5. Privacy-Conscious Users:

   • Concerned about data privacy and online security.
   • Prefer tools that don’t require an internet connection.

6. Chromebook Users:

   • Often find native text editors lacking advanced features.
   • Seek enhancements that integrate seamlessly with their devices.

7. General Productivity Enthusiasts:

   • Always looking for tools that improve efficiency and workflow.
   • Appreciate having quick-access, offline solutions.

This tool is particularly useful for anyone who values privacy, security, and efficiency in text editing.

Tutorial: How to Create a Text Find-and-Replace Browser Extension

In this tutorial, we’ll guide you through the process of creating a simple browser extension that allows you to find and replace text in a web page. The extension will also include buttons to reset the text and copy the modified text to the clipboard.

Step 1: Set Up Your Project

1. Create a new directory for your extension.

   • Example: text-find-replace-extension

2. Inside this directory, create the following files:

   • manifest.json
   • popup.html
   • popup.js
   • popup.css

Step 2: Create the Manifest File

The manifest.json file tells the browser about your extension and its components.

{
  "manifest_version": 2,
  "name": "Text Find and Replace",
  "version": "1.0",
  "description": "A simple text find and replace extension.",
  "permissions": [
    "activeTab",
    "clipboardWrite"
  ],
  "browser_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"
  },
  "content_security_policy": "script-src 'self' 'sha256-oZgqF/yEqIad+rsDfqFwJXe6WzpjBGuP3LhsxGSXn5k='; object-src 'self'"
}

Step 3: Create the HTML File

The popup.html file defines the user interface for your extension.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Find and Replace</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="container">
<h1>Text Find and Replace</h1>
<textarea id="inputText" placeholder="Enter your text here..."></textarea>
<input type="text" id="findText" placeholder="Text to find">
<input type="text" id="replaceText" placeholder="Text to replace">
<button id="replaceBtn">Replace</button>
<button id="resetBtn">Reset</button>
<button id="copyBtn">Copy to Clipboard</button>
</div>
<script src="popup.js"></script>
</body>
</html>

Step 4: Style the Extension

The popup.css file will add some basic styling to your extension.

body {
font-family: Arial, sans-serif;
width: 300px;
padding: 20px;
}

.container {
display: flex;
flex-direction: column;
gap: 10px;
}

textarea, input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}

button {
padding: 10px;
cursor: pointer;
}

h1 {
font-size: 18px;
text-align: center;
}

Step 5: Add Functionality with JavaScript

The popup.js file contains the logic for your extension.

document.addEventListener('DOMContentLoaded', function () {
const inputText = document.getElementById('inputText');
const findText = document.getElementById('findText');
const replaceText = document.getElementById('replaceText');
const replaceBtn = document.getElementById('replaceBtn');
const resetBtn = document.getElementById('resetBtn');
const copyBtn = document.getElementById('copyBtn');

replaceBtn.addEventListener('click', function () {
const findValue = findText.value;
const replaceValue = replaceText.value;
const textValue = inputText.value;
const replacedText = textValue.split(findValue).join(replaceValue);
inputText.value = replacedText;
});

resetBtn.addEventListener('click', function () {
inputText.value = '';
findText.value = '';
replaceText.value = '';
});

copyBtn.addEventListener('click', function () {
inputText.select();
document.execCommand('copy');
});
});

Step 6: Add Icons

Add icons for your extension. Create an icons directory in your project folder and add icons of different sizes:

• icon16.png (16×16 pixels)
• icon48.png (48×48 pixels)
• icon128.png (128×128 pixels)

Creating Icons with Canva

Making icons for your browser extension is easy with Canva, a free and user-friendly graphic design tool. Here’s a quick guide:

1. Sign Up or Log In:

   • Go to Canva and create a free account or log in if you already have one.

2. Create a New Design:

   • Click on the “Create a design” button and choose “Custom size.”
   • Set the dimensions to 128×128 pixels, which is a common size for browser extension icons.

3. Design Your Icon:

   • Use Canva’s vast library of elements, shapes, and icons to design your extension icon.
   • Ensure your icon is clear and recognizable at smaller sizes (16×16, 48×48, etc.).

4. Download Your Icon:

   • Once your design is complete, click on the “Download” button in the top-right corner.
   • Choose the PNG format for a high-quality image with a transparent background.

5. Resize if Necessary:

   • If you need different sizes of the icon, you can resize them using Canva or any other image editing tool.

By using Canva, you can quickly create professional-looking icons that enhance the visual appeal of your browser extension.

Step 7: Load Your Extension in the Browser

1. Open your browser’s extension page.

   • In Chrome: Go to chrome://extensions/.
   • In Firefox: Go to about:debugging#/runtime/this-firefox.

2. Enable Developer Mode.

3. Click “Load unpacked” (Chrome) or “Load Temporary Add-on” (Firefox) and select your extension’s directory.

4. Your extension should now be loaded, and the icon should appear in the toolbar.

Here it is, in the image above, the extension ready to perform.

Now, to test if everything is working fine, proceed with the following:

1. Copy the text from your webpage or application, then paste it into the input area in the finder box.
2. Write the text to find in the top single line input field.
3. Write the text to replace with in the lower single line input field.
4. Once you’re ready, hit the green button and your text will be changed immediately. 

5. Now that you have replaced all the instances of that word or phrase, copy it to your clipboard by pressing the blue button. That’s it, you can now paste the modified text wherever you need to. You can use the red “reset” button if you need to start over.

Conclusion

Congratulations! You’ve successfully created a text find-and-replace browser extension. This extension allows you to find and replace text, reset the text, and copy the modified text to the clipboard.

Feel free to customize and expand this extension to suit your needs. Happy coding!

Note for Advanced Users

Some of you might be thinking: “You can run Linux on a Chromebook and then install Sublime Text or any other excellent text editor.” While that’s a valid option, my answer is that this Google Chrome extension is designed for those who have repurposed old Windows PCs and are running on low specs, perhaps with Google Chrome OS Flex. These setups may not support installing a Linux environment. This extension ensures you have a lightweight, secure, and efficient tool at your disposal, perfect for those working with minimal hardware capabilities.