chrome extensionjavascript

Find and Replace

Ben Gorman

Ben Gorman

Life's a garden. Dig it.

Find is cool. But you know what's better than Find? Find and Replace.

Challenge

Implement a popup extension that lets you find and replace text on a webpage. It should have

  • an input box for the string you want to find
  • an input box for the string you want to replace it with
  • a Submit button for executing the replacement

Demo

Find and replace demo

Setup

Create a directory named find-and-replace as the project root. Give it a three files: manifest.json, popup.html, and popup.js.

find-and-replace/
  manifest.json
  popup.html
  popup.js
manifest.json
{
  "manifest_version": 3,
  "name": "Find and Replace",
  "description": "Like Find, but includes Replace",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  }
}
popup.html
<html>
<head>
    <title>Find and Replace</title>
    <script src="popup.js"></script>
</head>
<body>
    <label for="find_input">Find</label><br>
    <input type="text" id="find_input" name="find">
 
    <label for="replace_input">Replace</label><br>
    <input type="text" id="replace_input" name="replace">
 
    <button id="submit_btn">Submit</button>
</html>
popup.js
// Code here

Solution

This content is gated

Subscribe to the product below to gain access