Chrome Extension Change Page Content

How do Chrome Extensions modify webpages using content scripts?

Originally appeared here

If you are landing on this page, you probably googled Content Script or have some idea about Content Scripts.

I decided to write this post because when creating an extension, I found that info on Content Script as of writing of this post is very segregated on the internet and hence it took me a lifetime to get the job done.

Hopefully it will help others in same situation to get the job done faster.

I will not be talking about other features of Chrome Extensions such as Page Action, Background Pages, Browser Action etc — may just mention them in passing here and there.

If you like to know all the stuff Chrome Extensions can do,check out this post

Google Extensions enhance user experience by adding additional tools to the Chrome browser. Sometimes these user tools require manipulating existing webpage's CSS or HTML.

Think the pin it button on images for Pinterest Extension. Such a manipulation is only possible through Content Scripts feature of Google Chrome Extensions.

So what are content scripts?

As Google's documentation says it,

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

Here are other examples of what content scripts can do:

Find unlinked URLs in web pages and convert them into hyperlinks
Increase the font size to make text more legible

When reading about Content Scripts, a lot of the articles will not differentiate them from injected scripts. There is a difference. Additionally, content scripts differ from Extension Scripts.

Here is a great explanation, thanks to this stack overflow answer

JavaScript code in Chrome extensions can be divided in the following groups:

Extension Scripts — Full access to all permitted chrome.* APIs.
This includes the background page, and all pages which have direct access to it viachrome.extension.getBackgroundPage(), such as thebrowser pop-ups.
Content scripts (via the manifest file or chrome.tabs.executeScript ) — Partial access to some of the chrome APIs, full access to the page's DOM (not to any of the window objects, including frames).
Content scripts run in a scope between the extension and the page. The global window object of a Content script is distinct from the page/extension's global namespace.
Injected scripts (via this method in a Content script) — Full access to all properties in the page.No access to any of the chrome.* APIs.
Injected scripts behave as if they were included by the page itself, and are not connected to the extension in any way. See this post to learn more information on the various injection methods.

To send a message from the injected script to the content script, events have to be used. See this answer for an example. Note: Message transported within an extension from one context to another are automatically (JSON)-serialised and parsed.

A visualization to help,

https://developer.chrome.com/extensions/overview

Thanks to Rob W for the above answer. It helped me a great deal as all other articles(tons of them I read) failed to mention this important point.

We should try avoiding injecting scripts as much as we can unless we are required to use them. They pose security problems and may interfere with current page's scripts. Since Content Scripts also have access to the DOM and live in their own isolated world, we should strive to use them anywhere DOM manipulation is being done.

And that's it. In the next post, I will try to explain the concept of Content Scripts via an example. We will add a pop up window to a webpage on a certain user action using Content Scripts.

Be sure to ask any questions in the comments below and I will be sure to respond at my earliest.