Jude Osborn

It's kind of fun to do the impossible -- Walt Disney

0 notes

Overview of Chrome Extensions

There seems to be a lot of confusion amongst developers about how the various components of Chrome Extensions work together. I thought I’d post an answer I gave on Stack Overflow that I think provides a pretty goog overview. It’s worded as an answer to a specific question, but the info is generic enough.


I think what’s confusing you is the non-existant concept of a “content page”. There is no such thing. What you’re likely referring to is a “content script”. Let me explain the three main components of an extension:

Background Page

As you said, this is the persistent aspect of a Chrome Extension. Even though it can be HTML page it is never rendered. You simply use it to run JavaScript and other content that stays persistent. The only way to “refresh” the background page is to refresh the extension in the extension manager, or to re-install the extension.

This is most useful for saving information that should remain persistent, such as authentication credentials, or counters that should build up over time. Only use the background page when absolutely necessary, though, because it consumes resources as long as the user is running your extension.

You can add a background script like to manafest file like this:

"background": {
    "scripts": [
        "background.js"
    ]
},

Or like this:

"background": {
    "page": "background.html"
},

Then simply add background.js to background.html via a typical tag.

Popup

This is what you see when you click the icon on the toolbar. It’s simply a popup window with some HTML. It can contain HTML, JavaScript, CSS, and whatever you would put in a normal web page.

Not all extension need a popup window, but many do. For example, your highlight extension may not need a popup if all it’s doing is highlighting text on a page. However, if you need to collect a search result (which seems likely) or provide the user with some settings or other UI then a popup is a good way to go about this.

You can add a popup to the manifest file like this:

"browser_action": {
    "default_popup": "popup.html"
},

Content script

As I mentioned, this is not a “page” per se — it a script, or set of scripts. A content script is what you use to infuse JavaScript into pages the user is browser. For example, a user goes to Facebook and a content script could change the background to red. This is almost certainly what you’ll need to use to highlight text on a page. Simply infuse some JavaScript and any necessarily libraries to search the page or crawl the dom, and render changes to that page.

You can inject content scripts every time a user opens any URL like this:

"content_scripts": [
    {
        "matches" : [
            "<all_urls>"
        ],
        "js" : [
            "content.js"
        ]
    }
],

The above injects “content.js” into “all urls”.

You’ll also need to add this to the permissions:

"permissions": [
    "<all_urls>",
]

You can even add JQuery to the list of content scripts. The nice thing about extensions is that the content scripts are sandboxed, so the version of JQuery you inject will not collide with JQuery on pages the user visits.