Building Chrome Extension MVP Day 2 – Inject And Insert HTML To Any Page

Hi Everyone,

Welcome to the second post of the building a Chrome extension MVP series.

Last time, I built my first chrome extension prototype, which displays a popup window with “Hello World” after clicking on Chrom bar Icon.

Today, I want to up an ante and try to inject and insert HTML code to any random website. So let’s get into it.

How To Insert And Inject HTML to a random website

Edit Manifest JS

First, I need to edit manifest.json and add a few necessary things.

{
    "manifest_version": 2,
    "name" : "Append HTML",
    "description" : "Add HTML to page",
    "version" : "1.0",
    "author" : "Viet Phan",
    "browser_action" : {
        "default_icon" : "icon.png",
        "default_title" : "Add HTML to page extension"
    },
    "permissions" : [
        "tabs"
    ],
    "content_scripts": [
    {
        "matches": ["http://*/*"],
        "js": ["insert_html.js"]
    }
    ]
}

I changed the name, default title, and added content scripts settings. In content scripts, I defined, that the javascript code in the file insert_htm.js should apply to any URL, that visit.

As I understood content script is a part of code, that runs only in the context of the currently displayed web page.

Create Insert HTML Javascript File

Now create a new JS file and name it insert_html.js, then add a code, that will insert some dummy data into the website.

var div=document.createElement("div");
document.body.appendChild(div);
div.innerText="test123";

Reload the extension, go to google.com and see what happens.

By looking at website HTML code inspection, I don’t see my code anywhere. Something is wrong.

Then I notice, that in match configuration, I tell the extension to look after HTTP domains, while the website I have visited uses HTTPS encryption.

"matches": ["http://*/*"],

Let’s fix that and reload the plugin.

Yes, my HTML code appears in the developer console!

And the text is display on the website!

Add jQuery Into Chrome Extension

Now I want to move the text under the Google search bar. I could use Vanilla Javascript, but let’s make life easier with some jQuery magic.

First, add jQuery files to the new folder “libs” and reference the files in the manifest.

"content_scripts": [
    {
        "matches": ["https://google.com/*"],
        "js": ["libs/jquery-3.4.1.min.js", "insert_html.js"]
    }
],
"background": {
    "scripts": ["libs/jquery-3.4.1.min.js", "insert_html.js"]
}

You might notice I added background settings to manifest and specified google domain in matches. In theory, any js script defined in backgrounds should be run in the background so to speak. I don’t know the implication, but it was mentioned somewhere in Chrome documentation.

Now replace vanilla javascript with jquery find selector in the insert HTML file.

var div=document.createElement("div");
div.innerText="test123";
$(".RNNXgb").appent(div);

But it is not working. Nothing is displayed.

Of course, I have a typo in the code! The correct function is “append” not “appent”.

$(".RNNXgb").appent(div);

The fix didn’t help. Now I try another jQuery function, hide, to test if jQuery works at all.

$(".RNNXgb").hide();

Nothing, maybe jQuery doesn’t work. I will try one more thing before giving up, and that is to wrap jQuery code with a document ready. It might be, that JS code is running before the website is loaded.

$(document).ready(function() {
     $(".RNNXgb").hide();
});

This was not the case. In the next 30 minutes, I tried various things that did not affect:

• adding logging with console.log
• remove jQuery and revert to vanilla js
• remove jQuery from manifest all together
• remove background settings from manifest

I was desperate until I removed google URL from matches. Then the text appeared again.

I suspect the matches don’t work with a slash at the end of the URL, so I remove the URL for now.

When I try to hide the search bar it works wonderfully.

Also, the append function works as expected.

 

Phew! Today I learned a lot. With jQuery working, I can speed up the development process ten times. And more importantly, I made the core functionality of my future Chrome Extension plugin work, and that is to insert an HTML code into any website I want.

I am excited about this journey and can’t wait to build and test the next feature. See you in the next post!

 

Share it!