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 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 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 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 really doesn’t work. I will try one more thing before giving up, and that is to wrap jQuery code with document ready. It might be, that JS code is running before the website is loaded.

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

Apparently this was not the case. In the next 30 minutes, I tried various things that had no effect:

  • adding logging with console.log
  • remove jQuery and revert back 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 slash at the end of the URL, so I remove URL for now.

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

Also, 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 really excited about this journey and can’t wait to build and test the next feature. See you in the next post!

 

Share it!