Hello.

This post concludes the "Buzz This" Chrome Extension series by demonstrating how to add context menus. Context menus provide a powerful way to interact with users, letting them "Buzz" specific content like images or selected text, rather than the entire page. This is achieved by adding "contextMenus" to the permissions in the manifest file and then using chrome.contextMenus.create() in the background.html file. The create() method takes an object that defines the context menu's title, contexts (e.g., "page", "selection", "image", "link"), and an onclick event handler. The click handler determines the context of the click (selected text, image, link) and constructs the Buzz API URL accordingly. The code for the extension is available on GitHub. Read More

I'm super excited about the new classList API! It's like having jQuery's class manipulation, but built right into the browser. This means we can easily add, remove, toggle, and check for classes without messy string parsing. Currently supported in Firefox 3.6+ and Chrome 7+, the classList API uses the DOMTokenList interface and is way more convenient. I'll have a better demo up on the blog soon! Read More

Styling file input elements has always been tricky due to browser inconsistencies. WebKit-based browsers offer a clever way to style these elements. You can style the text and color of the file input using standard CSS. Additionally, the ::-webkit-file-upload-button pseudo-element allows customization of the OS-specific button's appearance, like changing it from rounded to square, going beyond basic styling. Read More

In this follow-up tutorial, we enhance the "Post to Buzz" Chrome Extension by adding a share count to the browser action button. This involves making cross-domain requests to the Buzz API's buzzCounter endpoint. We've updated the manifest file to include necessary permissions and added code to background.html to handle tab changes and URL updates. The code retrieves the Buzz count for the current URL and displays it on the browser action button, providing users with real-time feedback on share activity. This subtle update enhances the user experience and provides valuable context within the extension. Read More

In a previous post, I discussed the lack of a direct method in JavaScript for deleting arbitrary elements from an array. I had attempted a solution, but misread the documentation for Array.prototype.splice. While I believe my solution is still useful for removing elements without needing to find their indices first, splice does allow removing arbitrary elements by index. To remove one element at a specific position, use values.splice(index, 1). This modifies the original array and returns an array of the removed elements. Thanks to @dezfowler for pointing this out! Read More

This tutorial provides a step-by-step guide to building a basic Chrome extension for posting to Google Buzz. We start by setting up the manifest file with the extension's name, version, and browser action details like the icon and tooltip. Then, we introduce a background page to handle the extension's logic, adding an event listener to detect clicks on the browser action button. Initially, we demonstrate how to display the current URL, and then extend the functionality to open a new tab directed to Google Buzz, pre-filled with the current URL for posting. The tutorial concludes by adding the 'tabs' permission to the manifest for enabling tab creation. Future enhancements will include fetching Buzz stats for the current URL, demonstrating cross-domain requests and browser_action interaction. Read More

I've created a simple Chrome extension that lets you post the current page to Google Buzz and see its popularity. In upcoming posts, I'll use this example to demonstrate how easy it is to build Chrome Extensions and add cool features, like using Browser Actions, the Tabs API, Cross Domain Requests, and the Context Menu API. Check out the extension and its code on the Chrome Web Store and Github. Read More

This post explores the challenge of removing specific elements from JavaScript arrays. It critiques the inefficient string manipulation method and introduces the filter() method (available in ECMAScript 5 compliant browsers) as a more elegant solution for removing elements by value. The post acknowledges the lack of a simple way to remove elements by index and hints at further discussion on this topic in a future post. Read More

Just got back from a whirlwind tour of Europe for the Google Developer Days! We hit Munich, Moscow, and Prague, and it was an amazing experience. I gave talks on Chrome Extensions and building great Web Apps (except in Munich, where a local engineer rocked it). The slides are online: Chrome Extensions (needs experimental mode in Chrome dev channel) and Web Apps. I'll post the code on GitHub soon. Met tons of enthusiastic developers working on incredible projects – everything from protein sequencers to automatic app builders. So much innovation happening! (Side note: bring business cards, folks!) Prague was a particular highlight. Check out some photos from my trip! Read More

This post details how to use the HTML5 canvas element to dynamically create visually appealing custom markers for Google Maps. Instead of using a server to generate marker icons, we leverage the canvas API to draw rounded rectangles with gradients, center text within them and ultimately convert them into data URIs. Using the HSL color model allows for the creation of a harmonious range of colors by adjusting the hue while maintaining consistent saturation and luminance. This client-side approach offers flexibility and control over marker appearance, specifically highlighting techniques for rounded corners, gradients, and text centering. The code examples provided demonstrate the process of generating these markers and integrating them into a map. Read More

In this follow-up post, I've decided to use Mercurial for my project's version control. While feedback leaned towards Subversion (SVN), I prefer Mercurial due to its distributed nature, Codeplex support, available .Net tools, and superior branching capabilities. I'm open to further discussion and any compelling arguments for reconsidering SVN. Read More

I'm curious to hear from .Net developers, both those working with Windows and Mono, about their preferred source control service between Subversion (SVN) and Mercurial (HG). I'd love to know which one you find most effective and has the least impact on your daily workflow. While I know other SCMs exist, I'm specifically interested in opinions on these two. Read More

Using HTML5 Canvas with Drag and Drop (setDragImage) I know a lot of people complain about Drag and Drop (DnD), but it is not all that bad. At least we have a platform to work off for the future. We have recently seen a lot of improvements to Gmail which now includes additional support for Dragging in to Gmail to upload your docs and files, and also dragging attachments out of Gmail to the user file system. Read More

I recently discovered a cool trick in WebKit that lets you use a canvas element as a background image, which opens up a ton of creative possibilities. It's a powerful feature, allowing for dynamic, programmatic manipulation of background images. I've included a simple demo showing how to draw a square on a div's background, but imagine the possibilities for games or complex animations! While currently WebKit-specific, I hope other browsers will adopt it soon. More demos to follow! Read More

Tired of recursive DOM traversal headaches? Check out the DOM TreeWalker API! This powerful tool lets you efficiently navigate the DOM, filtering nodes as you go. It's perfect for tasks like finding specific text nodes or elements, highlighting content, or even building Chrome extensions. I've included a simple example of how to use TreeWalker to find and linkify Twitter usernames on a page. Give it a try and see how much easier DOM manipulation can be! Read More

I'm heading to Amsterdam for a business trip, my first time back since I was about 7 years old. While I'm there for work, I'm hoping to explore the city in my free time over the next two days and capture some of the experience through photos. I'd love to hear recommendations on things to see and do! Read More

Liverpool John Lennon Airport is in a terrible state! There are not enough chairs, the restaurants are dirty, and it's unbearably hot. I'd rather fly from Manchester or Heathrow than deal with this again. Read More

We have been thinking about what properties of an HTML application make it an application rather than a webpage with logic. We have documented our thoughts here: http://code.google.com/chrome/apps/articles/thinking_in_web_apps.html (Thinking in Apps). This is only the start of our thinking and work on what hopefully will become a robust guide to patterns in web application development. Many of the things that define a great web page experience are also the same things that describe an application experience on the web, however we think there are some subtle differences, especially around the use of client side data storage, offline support and user experience. Read More

I had a great time speaking at the Berlin GTUG, despite the unexpectedly hot weather. I presented on Web Apps, highlighting the differences between native and web apps, key principles of good app design, and some of the exciting new possibilities with HTML5, CSS3, and WebSockets. I wish I'd had more time to delve into frameworks for building great apps and do some live coding. Chris Chabot also gave a fantastic talk about Buzz. The venue, BetaHaus, was excellent, and I was impressed by everyone's English fluency. Thanks to all who attended! Read More

I'm excited to announce I'll be speaking at the Berlin GTUG on July 15th, 2010, about building HTML-based applications. The talk will explore the differences between web pages and true applications, with plenty of examples. This will be my first time in Berlin, and although my visit is short, I'm looking forward to it! Slides and photos to follow. Read More