Viet Phan X

Building Chrome Extension Day 2 - Inject HTML To Any Page

πŸ‘¨β€πŸ’» Software Development
4694
Jan 26, 2020

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.

Nohtml 1536x419

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.

Htmlinserted 1536x410

Yes, my HTML code appears in the developer console!

Htmlinserted2

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".

Appenttypo

$(".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.

Hideworks

Also, the append function works as expected.

Appendworks

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!

 


You need a

Innovation Advisor

Fresh eyes help generate new perspectives. Book a free call in which we identify hidden opportunities.

15 min call

Get product feedback


If You Like what I do
You can buy me a coffee πŸ‘‡
Send β˜• via PayPalSend β˜• with Bitcoin

πŸ€™ Let's connect

Made by Viet Phan Β© 2018-2024Privacy Policy