Chrome Win Size; Playing with Chrome extension mechanism
I have been watching the work of Aaron and the Chrome Extensions team for awhile. I love that with that effort and Jetpack we are going to see extension creation made simpler and more approachable for Web developers.
I realized that I hadn’t written a Chrome extension, so I wanted to try it on for size. I thus created an incredibly simple extension that tells you the size of the window on the fly: Chrome Win Size.
In an ideal world this extension would be as easy as:
- Create a bit of HTML for the tooltip
- Attach an onresize handler to the window that changes the HTML
Unfortunately, it wasn’t quite that easy…. but it was pretty close. The only difference involves the fact that you can’t easily get the window object to resize.
Here is the entire extension to show how simple it is:
Web page for the tool strip
For now, I wanted to put the windows size information in the toolstrip. This isn’t ideal, especially if you don’t have other extensions that turn on the toolstrip. It could be nicer to either: have a subtle grey width/height in the background of the URL bar itself; show the info only when a certain keystroke is pressed. That is all for version 0.2 :)
As you will see below, the extension is just a Web page, and the toolstrip is just a div. You could use class="toolstrip-button" but for now a click doesn’t do anything, so I didn’t use that. Instead I have a title attribute that uses plain English to explain the info.
Once you have the HTML itself, you also have some JavaScript to do the work. The init kicks things off the first time, but the interesting code is the chrome.extension.onConnect.addListener piece that sets up the extension so that a content script can talk to it via postMessage.
<html>
<head>
<script>
// Query the current window (anyone will do) and set the window size in the toolstrip
function showDimensions() {
chrome.windows.getCurrent(function(w) {
var el = document.getElementById("windowsize");
el.innerHTML = w.width + " x " + w.height;
el.setAttribute("title", "width: " + w.width + "px, height: " + w.height + "px");
});
}
// Listen to the content script and when told there is a change, query again
chrome.extension.onConnect.addListener(function(port, name) {
console.assert(name == "resize");
port.onMessage.addListener(function() {
showDimensions();
});
});
</script>
</head>
<body onload="showDimensions()">
<div id="windowsize"></div>
</body>
</html>Content Script
Why do we need a content script? Ideally, we would be able to grab a window in the extension and add a resize listener to it and be done. That isn’t the case right now though. In the code above, the window object that we get in w from chrome.windows.getCurrent(function(w) {... isn’t a DOM Window, but just something with a few properties (width, height, etc).
To get an actual DOM window, we need to inject a content script and have that talk to the extension. The code is as simple as below… which does the postMessage() back to the listener that we setup in the extension:
// When the window resizes send a quick message to the extension window.addEventListener("resize", function() { chrome.extension.connect({name: "resize"}).postMessage(); }, false);
Manifest
Now we need to put it all together and that is where the manifest comes in. It is here that we tell Chrome where the files are for the toolstrip and content script, and what permissions they have (e.g. give it the tabs permission), as well as metadata:
{ "name": "Window Size", "version": "0.1", "description": "Displays the size of the main window", /* "icons": { "128": "gmail-128x128.png" }, */ "permissions": [ "tabs" ], "toolstrips": [ "winsize.html" ], "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["contentscript.js"] } ] }
Caveats
Even with the content script hack, it is pretty easy to do this kind of thing. It would be nice to do more with the window object as the hack has limitations beyond the extra code. For one, if you are on a page such as chrome://extensions/ nothing kicks in (due to the matching). Rather than matching on pages for content scripts to embed, it would be much better to declare that you care about windows themselves.
The toolstrips themselves are a little bulky and ugly, at least on Chrome for Mac (which is very much in beta) and as mentioned earlier…. unless you are using a bunch of extensions, it feels very unChrome-like to use that space.
FYI: To package an extension on Mac/Linux use this handy script as the built-in functionality isn’t there yet.
All in all a decent experience already. Really nice to just work on an HTML document to kick out the functionality. The idealist in me would love to see Jetpack and Chrome Extensions coming together so Web devs had One Way to extend the platform…… The Web is in a fortunate position to have folks like Aaron Boodman, Aza Raskin, Atul Varma and many others on the case of Web extensions.
