谷歌浏览器扩展是一系列文件的集合，包括HTML、CSS、JavaScript等，它们为浏览器增加了新的功能。扩展可以访问网页或服务器，并与浏览器的功能如书签和标签页进行交互。扩展的用户界面通常以HTML页面的形式呈现，并且可以包含任何所需的内容。扩展还可以添加到Chrome的上下文菜单中，并拥有一个选项页面。页面和背景脚本都可以利用浏览器的所有功能，例如HTML5、WebKit、JSON等。谷歌在文档方面做得非常好，可以在他们的Labs的谷歌浏览器扩展网站上找到所有需要的信息。那里提供了很多示例。另一个非常好的示例可以在CodeProject的文章中找到。
清单文件是JSON格式的，并且必须命名为"manifest.json"。这是Chrome获取运行扩展所需的信息的地方，例如背景页面、内容脚本、要使用的图标和扩展所需的权限。
{
"name": "CodeProject Extension",
"version": "1.0",
"description": "A Codeproject extension",
"background_page": "background.html",
"page_action": {
"default_icon": "icon.png",
"default_title": "CodeProject Extension"
},
"content_scripts": [
{
"matches": ["http://www.codeproject.com/*"],
"js": ["jquery-1.4.1.js", "myscript.js"]
}
],
"permissions": ["tabs"]
}
前三个值是自解释的。"background_page"部分定义了一个页面，该页面在扩展进程中运行，并且只要扩展存在就会一直运行。这在需要更新状态时非常有用，例如，这个页面将根据否在CodeProject域中来显示或隐藏扩展图标。
这被称为“页面操作”，而不是“浏览器操作”，后者的图标显示在omnibar之外，例如，上图中的AdBlock扩展图标。
$('td[class="Frm_MsgDate"]').each(function(index) {
var t = $(this).text();
var hr = 0;
var min = 0;
if (t.indexOf("hr") > -1) {
hr = t.substring(0, t.indexOf("hr"));
t = t.substring(t.indexOf("hr") + 3);
}
if (t.indexOf("min") > -1) {
min = t.substring(0, t.indexOf("min"));
}
if (hr > 0 || min > 0) {
var d = new Date();
d.setHours(d.getHours() - hr, d.getMinutes() - min, 0, 0);
hr = d.getHours();
min = d.getMinutes();
if (d.getDay() != new Date().getDay()) { min += "Yesterday"; }
$(this).text(formatnum(hr) + ":" + formatnum(min));
}
});
function formatnum(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
jQuery可以大大简化网页的操纵。这个脚本使用jQuery选择器遍历网页中所有具有“Frm_MsgDate”类的DOM对象，这些在CodeProject论坛中是包含消息时间和日期的HTML元素，然后对其进行必要的转换以得到所需的结果。
下载包含的文件并将其解压到一个文件夹后，只需要在Chrome中选择“工具”然后是“扩展”菜单来加载扩展。展开开发者模式会显示一个“加载未打包的扩展...”命令，这让可以选择包含清单文件的文件夹。现在可以导航到CodeProject论坛并看到变化了。