Replace Paragraph Text with User-given Text using Chrome Extension | Chapter 4

Published in

Heptagon

5 min readMar 8, 2019

In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customization to these extensions. Note: Feel free to skip to any chapter by clicking on the links provided at the end of this post.

For now, here are the contents of Chapter 4: Replacing paragraph text with user-given text using Chrome Extension.

Chrome extension-Replacing Paragraph with user given text

Requirements
The Workflow
Initializing the Chrome Extension
The Output
Summary

Requirements

In this chapter, we are going to create a chrome extension that replaces the paragraphs with user-given text. We will also make use of a popup so that when we click on the extension icon, a popup appears which will contain a text field. The text field is to enter the text that will replace the text in the opened webpage with the user-given text.

To create a Chrome Extension that replaces the paragraph text in a webpage with the user-given text, we require the following files.
If you want to know more about the types of files mentioned in this post, do visit Chapter 1: An introduction on chrome extensions via the chapter navigation section at the bottom of this post.

manifest.json: Contains the configurations, properties, and information about the Chrome Extension.
popup.html: Contains the content that pops-up on the screen when the chrome extension icon is clicked.
background.js: Loads when the chrome is launched.
content.js: Contains the content that needs to be performed on chrome.
P5 library: used inside the popup.html file

Step 1: Create manifest.json with the following code

{ 
"manifest_version" : 2, 
"name" : "Paragraph Replacer", 
"version" : "0.001" 
}

Step 2: Create popup.html with a text field and the following code.

We will make use of p5 libraries in the popup.html. P5 is a javascript library that aims to make coding available to artists, designers, educators, and beginners.

Download the p5 library, unzip it and add it to the folder we use for saving all our code files.

The popup.html will look something like this

<html>
<meta charset="UTF-8">
<script src = "p5/p5.js" type="text/javascript"></script>
<script src = "p5/addons/p5.dom.js" type="text/javascrip"></script>
<script src = "background.js" type="text/javascript"></script>
<body>
<h4> Paragraph replacer </h4>
<p><input type="text" id="userinput"></p>
</body>
</html>

Step 2: Include the browser_action in the manifest.json and set popup.html as the default popup and give any title to the popup.

The manifest.json file will look something like this

{ 
"manifest_version" : 2, 
"name" : "Paragraph Replacer", 
"version" : "0.001", 
"browser_action" : { 
"default_popup" : "popup.html", 
"default_title" : "A popup will come" 
} 
}

Step 3: Create a background.js file for the background script which will contain the following code.

console.log("background running");
chrome.browserAction.onClicked.addListener(setup);
function setup() {
noCanvas();
let userinput = select('#userinput');
userinput.input(sendText);
function sendText() {
//Value got from input field in popup
let message = userinput.value();
//Sending message to content
chrome.tabs.query({active: true,currentWindow:true},function(tabs){
chrome.tabs.sendMessage(tabs[0].id,message);
});
}
}

Our Chrome Extension will take the input from popup.html and send it to the content script for further actions.

Explore more about the message passing in the link.

Step 4: Add the background.js script in manifest.json

The manifest.json file will look something like this after including the background script.

{
"manifest_version" : 2,
"name" : "Paragraph Replacer",
"version" : "0.001",
"background" : {
   "scripts" : ["background.js"]
}
"browser_action" : {
    "default_popup" : "popup.html",
    "default_title" : "A popup will come"
 }
}

Step 5: Now let’s write a content script to get all the paragraphs on the webpage and replace it with user input.

The content.js file will look something like this

console.log("Chrome Extension ready to go!");
chrome.runtime.onMessage.addListener(replace);
//Replace
function replace(message, sender, sendresponse) {
console.log(message);
let paragraphs = document.getElementsByTagName("p");
for (elt of paragraphs) {
elt.innerText = message;
}
}

Step 6: Add the code for content.js in manifest.json.

Our complete manifest.json will look something like this

{ "manifest_version" : 2, 
"name" : 
"Paragraph Replacer", 
"version" : "0.001", 
"background" : { 
"scripts" : ["background.js"] 
}, 
"content_scripts" : [ 
{ 
"matches" : [ 
"<all_urls>" 
], 
"js" : ["content.js"]
 }], 
"browser_action" : { 
"default_popup" : "popup.html", 
"default_title" : "A popup will come" 
} 
}

The Workflow

When the Chrome extension icon is clicked, the popup appears and we (the user) enter the text that has to replace the paragraph text contents of the webpage.
The background script then takes that text input and sends it as a message to the content script.
The content script on receiving a message from the background performs the action of changing the text of the paragraphs in the webpage by simultaneously replaces it with the user-given text as the user types the text in the Chrome Extension popup.

Initializing the Chrome Extension

After all the files for the Chrome Extension are created and filled with the given codes, add the Chrome Extension to your browser perform the following steps.

Step 1: Go to Google Chrome and type chrome://extensions in the address bar.

Step 2: Enable Developer Mode option on the top right corner of the page.

Step 3: Click the Load unpacked button.

Step 4: Select the folder where we have written the code and click open.

Now the Chrome Extension is loaded into the browser.

Browser Action: Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can have a tooltip, a badge, and a popup(which we have included here).

Note: Even if you don’t specify a browser action icon, a default icon with the letter of the name of your extension (given in manifest) will be assigned.

The Output

Open any webpage and click on the Chrome extension that we created, a popup will appear with a text box. Enter the new text and the paragraph text in the webpage will change to the new text as you type.

If you want to see the background script running, type chrome://extensions in the address bar. Click on Inspect views Background page to see the background script running.

Summary

Hope this chapter was able to pique your interest in building a Chrome extension. We have learned how to replace the text of a paragraph on any webpage with the user-given text using Chrome Extension.

In the next chapter, we’ll be learning how to replace images on any website using Chrome Extension. Feel free to reach out for any queries.