Insert HTML, CSS, and JS into any Web Page with a Chrome Extension

Overview

Chrome extensions have pretty good documentation and pretty good community support. Naturally, you might expect that between docs and forums that you can get a small project up and running quickly.

Unfortunately, sometimes minor simple tasks can get lost in the weeds. Documentation usually only covers the basic, small, happy flow cases and forums usually only ask about difficult, large problems. Well what about issues of medium size and complexity? Leave that to the bloggers!

Here we’ll take a look at how to create a chrome extension that uses a Content Script to change the background color of any page using jQuery.

Manifest.json

First things first. You need a way to tell chrome what your intentions are, what components come with your extension, and when they apply. To do this, we’ll use a manifest file.

The manifest file contains some JSON formatted data that Google knows how to read. There is a lot of boiler plate info that you can explore, but, for our purposes, we want to pay special attention to the content script section:

{
  "manifest_version": 2,
  "name": "Page Changer",
  "version": "0.1",
  "description": "Page Changer",
  "icons": { "16": "Icons/Logo16.png",
             "32": "Icons/Logo32.png",
             "48": "Icons/Logo48.png",
            "128": "Icons/Logo128.png" },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["jquery.min.js", "script.js"]
    }
  ]
}

The content script must specify two things:

  1. The pages against which to run the code
  2. The external code files to run.

In this case, we’ve specified that we want to our content to run whenever the web url matches the pattern *://*/*, which is to say for all protocols, for all domains, for all pages (in other words, run everywhere).

If you just wanted to target google.com or any of it’s content pages, then you could put that there.

The second thing we’ve specified is which files to run and in which order. First we’ll load jQuery from a local copy that we deploy, and next we’ll run a file called script.js that we’ll look at in a second.

Script.js

In this simplified example, let’s say we just want to change the background color of the current page for a very obvious example of whether or not all the right components have been called. In a real world example, you might want to find all the links in the page and turn them a particular color. Or attach some code to any images on the page to allow you to easily email them. Whatever you want!

For now, let’s just run the following script which will find the body element and use the css() method in jQuery to apply the value blue to the background property:

$(function() {
	$("body").css("background","blue");
});

Note: Just so I don’t get comments about it. If this was the only change you wanted to make to the page, you can and should do this purely with CSS. The idea was to add jQuery to a page in a trivial example so you can implement your own functionality later.

Deployment

To run the extension, do the following steps:

  1. In Chrome, Open the Browser Menu
  2. Click on Tools, and then Extensions
  3. Make sure Developer Mode is checked (usually in the top right)
  4. Click Load Unpacked Extension and select the folder that contains your manfiest and extension files.

That’s it! Go to any affected page and hit refresh to see your changes applied:

Demo

To get started, you can download all the files you need to run this extension from the SkyDrive folder below.


If you’ve made changes and are happy with them, you can even deploy to the Chrome Extension Store for other people to use after getting a developer account.

Here’s a couple of extensions I’ve built for chrome, along with their source code if you’re looking for examples. Feel free to leave comments on GitHub with any suggestions or bugs using GitHub’s issue tracker.

  • Link Finder - Find all links to named anchors within the page so you can create descriptive links to content within a page
  • Copy Tabs - Creates a keyboard shortcut (Ctrl + Shift + C) which copies links for selected tabs

Upcoming: Part 2 - How to Insert HTML, CSS, and JavaScript into any page using a browser action.

24 comments:

  1. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    Webdesining course in chennai

    ReplyDelete
  2. Great job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too. There tend to be not many people who can certainly write not so simple posts that artistically. Continue the nice writing thebestvpn.uk

    ReplyDelete
  3. Such a strikingly basic article.I basically wish to offer a creature proceed for the standard data you have perfect here on this post. https://internetprivatsphare.de/ist-serienstream-to-legal/

    ReplyDelete
  4. Thanks for posting this info. I just want to let you know that I just check out your site and I find it very interesting and informative. I can't wait to read lots of your posts. die besten vpn

    ReplyDelete
  5. PSD to HTML, PSD to HTML or PSD to CSS - design conversion options are chosen considering what a site owner wants to get in the end. CSS HTML image coding

    ReplyDelete
  6. Hmm!! This blog is really cool, I’m so lucky that I have reached here and got this awesome information. vpnveteran

    ReplyDelete
  7. Magnificent goods from you, man. I’ve understand your stuff previous to and you are just extremely magnificent. I really like what you’ve acquired here, really like what you are saying and the way in which you say it. You make it entertaining and you still take care of to keep it smart. I can not wait to read far more from you. This is really a tremendous website.|
    Regards: eve hunt

    ReplyDelete
  8. The most important tip to date, your development company must be able to support you as a customer and provide ongoing maintenance and service.skrajučių dizainas

    ReplyDelete
  9. Hmm!! This blog is really cool, I’m so lucky that I have reached here and got this awesome information. internetprivatsphare

    ReplyDelete
  10. "Here to pay tribute to the hacking spirit! This is a really nice skill to learn. I imagine it is possible to use the developer console in chrome to just download some data table from a website? Sometimes they are separated by pages. Anyway I'm fairly comfortable with Python, how can I improve my JS skills to get to a point where I can treat any webpage as something hackable? Any recommendations for JS tutorial / class to catch up with you back in 2013?


    Regards: Eve Hunt

    ReplyDelete
  11. hello!,I like your writing very much! percentage we be in contact extra about your post on AOL? I require a specialist on this area to solve my problem. Maybe that’s you! Having a look forward to peer you.Regards: Eve Hunt

    ReplyDelete
  12. You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. lemigliorivpn.com

    ReplyDelete
  13. Great blog. Thanks for sharing this useful information Aviation web design

    ReplyDelete
  14. Interesting post. I Have Been wondering about this issue, so thanks for posting. Pretty cool post.It 's really very nice and Useful post.Thanks Webdesign

    ReplyDelete
  15. I’m so happy to read this. This is the kind of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this greatest doc.



    https://www.techlazy.com/free-movie-streaming-sites-no-sign-up-required/

    ReplyDelete
  16. I’m so happy to read this. This is the kind of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this greatest doc.
    Regards:
    https://www.techlazy.com/free-movie-streaming-sites-no-sign-up-required/

    ReplyDelete
  17. When you use a genuine service, you will be able to provide instructions, share materials and choose the formatting style. Webdesign bureau

    ReplyDelete
  18. I’m so happy to read this. This is the kind of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this greatest doc.
    Regards:https://www.techlazy.com/websites-to-watch-free-movies-online-without-downloading/

    ReplyDelete
  19. "An interesting discussion is definitely worth comment.
    I think that you should write more about this subject, it may not
    be a taboo matter but usually folks don’t speak about such topics.
    To the next! Kind regards"
    Regards:https://www.techlazy.com/websites-to-watch-free-movies-online-without-downloading/

    ReplyDelete
  20. An impressive share! I have just forwarded this onto a coworker who had been doing a little
    homework on this. And he actually ordered me dinner simply because
    I found it for him… lol. So allow me to reword this….
    Thank YOU for the meal!! But yeah, thanks for spending some time to discuss
    this topic here on your blog.
    Regards:https://www.techlazy.com/websites-to-watch-free-movies-online-without-downloading/

    ReplyDelete
  21. Thank you for any other wonderful post. The place else may anybody get that type of information in such an ideal way of writing? I’ve a presentation next week, and I am at the look for such info.
    REGARDS:https://www.techlazy.com/live-tv-streaming-sites/

    ReplyDelete
  22. I have read some just right stuff here. Certainly value bookmarking for revisiting. I surprise how much attempt you place to make this type of excellent informative website.
    regards:https://www.techlazy.com/live-tv-streaming-sites/

    ReplyDelete
  23. I’m so happy to read this. This is the kind of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this greatest doc.
    regards:https://www.techlazy.com/live-tv-streaming-sites/

    ReplyDelete