Building Chrome Extensions: Where do I start?

On By Minjoo KwonIn Python Projects

I have no knowledge in building Chrome extensions. Looks like this link will help me get an overview of where I should start!

https://developer.chrome.com/extensions

Summary of video

  • built with simple web programming languages: HTML, CSS, JavaScript and so on.

  •  The structure of extension

    • signed zip file with a bunch of web files in it
    • Needs to have the manifest file: manifest.json
      • describes the extension, lists permissions and points to the extensions’ other components.
      • components give functionalities.
    • At least one of these
      • browser action or page action
        • two UI surfaces the extension system ships with initially.
        • An extension can only have one UI surface or the other.
        • Best if you could be minimal in the design decisions.
      • Browser action
        • appears in the toolbar of every tab.
      • page action
        • selectively appears in the Omnibox and can be toggled on or off for each tab.
      • content scripts
        • arbitrary CSS and JavaScript that are injected into selected pages. similar to user scripts and can be used as a UI alternative to browser and page actions
      • background page
        • The long running page that helps you manage state and coordinate tasks across extension components. As an extension gets more complex, it tends to need a background page.
      • Utility web files
        • you can bundle any other web files with your extension – images, JavaScript libraries, Flash movies, whatever it is your extension needs.

  • the layout of the extension API

    • chrome.extension.*
      • has properties and methods that let you send messages to communicate between extension components and resolve the URLs of extension files.
    • chrome.browserAction.*
      • lets you set the appearance of browser actions and their badges, which are mini text areas overlaid on browser actions.
    • chrome.pageAction.*
      • lets you enable and disable page actions
    • chrome.windows.*
      • lets you open, close, look up, and update browser windows
      • requires tab permission in your manifest file
    • chrome.tabs.*
      • lets you perform the same actions on tabs
      • also requires “tabs” permission
    • chrome.bookmarks.*
      • lets you read from and write to the user’s bookmark tree and requires bookmark permission

 

Example

STEP 1: MANIFEST FILE
{

“name”: “Chritter”,
“version”: “1.0”,
“description”: “A Twitter button for your toolbar.”,
“icons”: {“128”: “icon.png”},
“browser_action”: { //you could also choose page action as well
“default_icon”: “browseraction.png”, //icon that will appear in the toolbar
“default_title”: “Chritter”, //tooltip that will appear when the user mouses over the icon
“popup”: “popup.html” // pop up bubble that appears when the user clicks on the icon
}

popup.html
<html>
<body>

Wouldn’t it be nice to see some tweets here?

</body>
</html>

After installing the extension, we get as advertised. An icon, a tooltip, and a popup. The popup asks “Wouldn’t it be nice to see some tweets here?”

STEP TWO: Fetch public data with XHR

Back in our manifest file, we ask for permission to make cross-origin requests to twitter.com so we can access Twitter’s API. We ask for “tabs” permission, as well so we can open UI links in new tabs.

3.PNG

And in our popup file, we beef up the HTML by inserting a title and a template to present the attributes of each tweet – the user’s profile, their image and name and the tweet itself.

html.PNG

Also have new JavaScript for retrieving and displaying the timelinejavascript.PNG

when the load event fires, we run an “init “function to grab references to the different templates via XPath. That function hands control over to another function to do the XHR work. “getTweets” issues a simple request for a JSON feed, and in turn, hands control over to the callback function “processTweets”

gettweets.PNG

The processing function deserializes the incoming JSON using V8’s built-in JSON support and stores the result in an array. Iterating thru the array of tweets, the “update” function assigns each template attribute and appends the marked-up tweet to the popup.

bok.PNG

bok.PNG

STEP THREE: Refactor non-presentation code.

Improve the extensions’ performance and functionality by refactoring our code. Let’s turn our popup into dumb view, so it only knows how to update its display and offload the rest of the work to a background page.

dam.PNG

Throw a reference to the background page, which is returned by the getBackgroundPage method. The popup doesn’t collect tweets anymore, so we use the background reference to iterate through the available tweets instead. We move the XHR code to its new digs on the background page, but not without a couple upgrades.

dam.PNG

Since the background page isn’t tied to nay DOM event, the page can fetch tweets on a continuous loop. That way, we can batch tweets up and have them ready before the user even invokes the popup.

1.PNG

We specify a frequency for fetching — 10 seconds for demo purposes — and manage the process with the setInterval method. While we’re at it, we can also spiff up the UI. We now have a variable number of batched tweets, which is a perfect candidate for display with a browser-action badge. we style the badge with “setBadgeBackgroundColor” and pass in the number of unread tweets with “setBadgeText”.

2.PNG

 

To download the code, go to code.google.com/chrome/extensions

 

 

 

One thought on “Building Chrome Extensions: Where do I start?”

Leave a comment