‘Trump’ Removal Chrome Extension : How To Build A Chrome Extension In 9 Minutes


Google Chrome is the best web browser around right now, and part of Chrome’s appeal is owed to its excellent extensions. The good news: It’s not that hard to get started making your own Chrome extensions. In this guide, we’ll make a extension that will find term “Donald Trump” or “Mr. Trump” on a given page and replaces it with “Crime master Gogo” this will help you to get started on becoming Chrome-extension-making guru.

The process is divided in following steps:

1. Make Manifest.json file:

Every Chrome extension consists of, at minimum, a file called manifest.json, which defines the basics of your extension—its name, description, version number, what kind of extension it is (there are a handful of different things a Chrome extension can do, which we’ll talk more about below), the permissions it needs to run (e.g., what web sites it needs access to), and so on.

So let’s get started. Create a new folder—let’s name it Trump Removal—and, using your favorite text editor, create a new text file called manifest.json. Copy and paste the following code into it:

{
"manifest_version": 2,
"name": "Trump Removal",
"version": "1.0",
"description": "Remove Trump",
"content_scripts":
[
{
"matches": ["*://*/*"],
"js": ["myscripts.js"], //Javascript that you will code
"run_at": "document_end"
}
],
"browser_action": {
"default_icon": "logo.png"
}
}

Most of the above is simple but there’s two thing’s to take notice of as for future knowledge,

 

Match Patterns

 

Host permissions and content script matching are based on a set of URLs defined by match patterns. A match pattern is essentially a URL that begins with a permitted scheme (http, https, file, or ftp, and that can contain ‘*’ characters. The special pattern matches any URL that starts with a permitted scheme. Each match pattern has 3 parts:

    scheme — for example, http or file or *
    host — for example, www.google.com or *.google.com or *; if the scheme is file, there is no host part
    path — for example, /*, /foo*, or /foo/bar. 
    The path must be present in a host permission, but is always treated as /*.

Note: Access to file URLs isn’t automatic. The user must visit the extensions management page and opt in to file access for each extension that requests it.

Here’s the basic syntax:

 := ://
 := '*' | 'http' | 'https' | 'file' | 'ftp'
 := '*' | '*.' +
 := '/' 

 

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 also have a tooltip, a badge, and a popup.

 "browser_action": {
          "default_icon": "logo.png",          // any icon you want to show of Extension in toolbar of chrome
          "default_title": "Google Mail",      // optional; Put title if any
                   }

2. Creating Javascript file:

Now let’s code the javascript file ” myscripts.js” that gets loaded on the the site and does the removal of words “Mr.Trump and Trump”.


var str = document.body.innerHTML;
var c = (str.match(/\Mr. Trump\b/g) || []).length;
var m = (str.match(/\Trump\b/ig)|| []).length;
var i;
for(i=0;i<c;i++)
{
 document.body.innerHTML = document.body.innerHTML.replace(/\Mr. Trump\b/g, 'Crime master Gogo');
i=i+1;
}
for(j=0;j<m;j++)
{
 document.body.innerHTML = document.body.innerHTML.replace(/\Trump\b/ig, 'Crime master Gogo');
j=j+1;
}

3.Uploading to Chrome

Collect your manifest.json, myscripts.js, and your icons in a new folder by themselves. Now, navigate to chrome://extensions/ in your browser window. Now, click the checkbox to put Extensions in “Developer Mode.” This will give you a few more options regarding what you can do with your extensions.

Click “Load unpacked extension…” and navigate to your Chrome extension folder. If all is well, it should upload without a hitch. If it returns an error, there’s most likely a syntax error in your code, so check it and try again.

Success! The image above shows my extension among others I’ve installed. Now check out all the code to my extension on GitHub, clone your own copy, and make your own find-and-replace extension. I used this to prank my editor, but the possibilities are endless! You could prank your family or friends, too. Or you could even—gasp—use the find-and-replace action to create something useful!

Here’s my Github link to the extension => GitHub

In any case, I’d love to see what you build. Tell us all about it in comments.

Ayush Chandel
A tech enthusiastic,developer and blogger who loves to write about technology and help bridge the gap between techies and mainstream readers. Always ready to suggest people on technology and especially the web development. He's also the Founder of this site and just hate Taylor Swift.

Comments 1

Leave a Reply

‘Trump’ Removal Chrome Extension : How To Build A Chrome Extension In 9 Minutes

log in

reset password

Back to
log in
Choose A Format
Story
Formatted Text with Embeds and Visuals
%d bloggers like this: