谷歌Chrome是目前最好的网络浏览器，Chrome的吸引力部分归功于它出色的扩展。好消息是：开始**自己的Chrome扩展并不难。在本指南中，我们将带您从最简单的helloworld扩展（不需要HTML或JavaScript知识）到更复杂的RSS获取扩展，让您成为Chrome扩展**大师。

今年夏天，我发布了我的第一个Chrome扩展，一个名为Music Plus的Google Music power-up扩展，接着是一个更简单的tl80通知扩展，它监视tl80的RSS提要，以html5弹出窗口或徽章的形式显示新帖子的通知，等等。

今天，我们将介绍如何**您的第一个也是最简单的helloworld Chrome扩展，然后我们将**tl80通知程序扩展的一个轻量级版本，当您单击扩展的按钮时，它将获取RSS提要并在弹出窗口中显示提要项。我们开始吧！

注意：虽然helloworld扩展不需要任何JavaScript或HTML知识（坦白地说，如果你愿意的话，你可以从中得到很多乐趣），但是这篇文章的后半部分需要对这两者都有所了解。为了完成这篇文章，需要一些经验。我们之前也向您展示了如何构建Firefox扩展，因此如果Firefox更适合您的速度，您可能需要查看该指南。

开始之前你需要知道的

如果你对建立一个网站很满意，也就是说，你懂一点HTML，熟悉JavaScript，你可以做一个Chrome扩展。如果您对HTML和JavaScript不熟悉，我们的初学者指南可以帮助您学习如何编写代码以及如何创建网站。

除了这两个核心能力，你真的不需要知道什么特别的。如果你曾经花时间**网页或用JavaScript进行黑客攻击，那么Chrome扩展是非常容易**的，即使你只是这些领域的初学者，你也可以使用Chrome扩展。我们就这么做吧。

我们的项目：从“helloworld”到rss fetcher

为了本指南的目的，我们将从“Hello World”扩展开始。如果你是编程新手，经典的“HelloWorld”程序是一个仪式，它可以开始任何语言、框架或项目，其目标只是创建能够输出文本“HelloWorld”的东西。

在我们完成“helloworld”项目之后，我将带您了解如何按照Chrome的tl80通知程序扩展的思路**RSS获取扩展。基本上，这个扩展在工具栏上添加了一个按钮，监视tl80的RSS提要，并在一个方便的下拉列表中显示我们的帖子。当一篇新文章出现时，它还会显示一个弹出窗口，并在扩展按钮上显示一个未读徽章。我们开始吧。

manifest.json：chrome扩展的基石

每个Chrome扩展至少都包含一个名为manifest.json的文件，该文件定义了扩展的基本内容：名称、描述、版本号、扩展类型（Chrome扩展可以做一些不同的事情，我们将在下面详细讨论）、运行权限（例如。，它需要访问哪些网站），等等。

我们开始吧。创建一个新文件夹，将其命名为Hello World，并使用您喜爱的文本编辑器创建一个名为manifest.json的新文本文件。复制并粘贴以下代码：

{ "name": "Hello World!", "version": "1.0", "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png" } }

名称、版本和描述都是不言自明的，但是浏览器的动作是全新的！browser\u action属性告诉Chrome我们正在做一个扩展，它将向工具栏添加一个按钮。到目前为止，我们所做的只是给按钮分配一个图标。基本上你告诉Chrome你的扩展名有一个图标，叫做icon.png，它和manifest.json文件位于同一个文件夹中。当然，您的Hello World文件夹中还没有icon.png文件，所以我们来解决这个问题。

下载这个小图片（通过）并复制到你的Hello World文件夹。

我们还没有做太多，但是你已经做了一些你可以测试的东西，所以让我们这样做。将Chrome指向chrome://extensi***/，选中该窗口左上角的“开发人员模式”复选框，然后单击“加载解包扩展”按钮。将Chrome指向您的Hello World文件夹，单击Select或OK（根据操作系统的不同而有所不同），Chrome将加载您的扩展存根，您将看到您的小地球仪图标出现在您的Chrome工具栏中：

但是，如果你试着点击helloworld按钮，你会发现它毫无用处。我们来解决这个问题。

创建一个浏览器操作，或者，如果那个按钮做了些什么不是很好吗？

打开manifest.json文件并添加一个指向名为popup.HTML的HTML文件的弹出操作，如下所示：

{ "name": "Hello World!", "version": "1.0", "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png", "popup": "popup.html" } }

注意：只要将Chrome指向正确的文件，文件名就不重要，只要您还将文件命名为helloworld.html，就可以在manifest.json中称之为helloworld.html。

说到这里，您现在需要创建popup.html。所以，再次创建一个名为popup.HTML的HTML文件，并将其保存在Hello World文件夹中。在popup.html中，只需添加文本“Hello World！”(理论上，您可能希望在其中放置一些有效的HTML标记，但这并不是绝对必要的，因此我们将跳过这里。）

确保已保存manifest.json和popup.html，返回chrome://extensi***/，单击扩展列表中Hello World扩展旁边的扩展图标，然后单击重新加载链接（如右图所示）。

Chrome将使用更新的代码重新加载扩展。现在点击按钮，准备好金钱射击！

成就解锁！你已经升级了你的第一个Chrome扩展。干得好。现在让我们把事情提高一个档次(如果您在此过程中遇到任何问题，请下载我的working Hello World.zip并与您的进行比较。）

我们该怎么办？

所以Chrome可以在你的工具栏上添加按钮，你可以点击这些按钮，然后一些事情就会发生。尼托！您可以在这里停止扩展开发，并在朋友的计算机上安装扩展，添加一点HTML图像标记来代替“helloworld！”短信和你已经解锁了恶作剧的喜悦！想象一下可能性。你毫无戒备的朋友点击了一个诱人的新按钮，砰的一声，果阿！或者在YouTube上放个视频。。。里克洛(或者不要这样做。你的朋友不会感谢你的，但如果他们知道你不让他们做什么，他们可能会感谢你。）

不过，用你那闪耀的幽默感给朋友留下深刻印象只会让你走得更远。您以前可能已经在大量不同的Chrome扩展中看到过基本的click button show下拉行为。但是您也看到了执行非常不同任务的扩展。如果你浏览一下Chrome扩展开发人员指南，你会在列表的顶部看到熟悉的浏览器操作，但是你也会注意到你的扩展还可以做很多其他事情，从创建桌面通知或向omnibox添加关键字到创建选项页或执行修改特定网页的操作。当您准备深入研究扩展开发时，您将需要翻阅开发人员文档，以了解您的扩展可以利用哪些优势。您可能还需要查看manifest.json文档，以了解manifest.json文件可用的其他一些选项。

现在，我们将深入研究浏览器操作。现在是时候让自己成为RSS阅读和通知Chrome扩展了。所以让我们开始吧。

是时候让这头猪更上一层楼了

现在您已经安全地从零导航到Hello World，我们将稍微加快速度。“helloworld”扩展没有使用JavaScript（除了JSON），实际上我们也没有编写任何HTML。本节将纠正这一点。

首先，让我们看看我们将用于此扩展的新的和改进的manifest.json：

{ "name": "RSS Fetcher", "version": "0.1", "description": "Keep up with the latest from [insert web site here].", "ic***": { "16" : "images/icon.png", "48" : "images/48.png", "128" : "images/128.png"}, "homepage_url": "http://insert_web_site_here.com/", "background_page": "background.html", "permissi***": [ "http://insert_base_rss_url_here.com/*" ], "browser_action": { "default_icon": "images/icon.png", "default_title": "[INSERT WEB SITE NAME HERE] Fetcher", "default_popup": "popup.html" } }

让我们快速了解一下这里的新情况。

• 首先，你会注意到我添加了图标。这些图标将在不同的地方显示为扩展的图标，包括浏览器的扩展页和Chrome网络商店中，如果您决定分发您的工作。
• 主页url指向您想要与您编写的扩展关联的任何站点。
• 后台页面是一个HTML页面，它将在后台持续运行，允许您维护特定的状态或对扩展的不同部分执行常规操作。在我们的扩展中，后台页面将轮询RSS提要，以查看是否有任**内容被推送到提要中。
• 权限告诉Chrome您需要访问哪些特殊权限。Chrome沙盒扩展，所以除非他们请求（并且你允许），否则他们不能访问你的所有浏览活动。permissi***属性允许您精确设置所需的权限。在我们的例子中，我们需要从根URL加载RSS提要的权限，并且我们希望能够在新项目到达时创建html5通知。

您会注意到，我们的manifest.json文件还需要许多新文件和文件夹，因此不需要您自己设置它们，您可以下载一个基本的工作版本的代码，从tl80 RSS feed获取。

（我决定将我在tl80通知程序扩展中使用的图像包括在内，但显然，您可以交换任何适合您的图像。）

您还将注意到我包含了jQuery。如果您不熟悉jQuery，那么它是一个JavaScript框架，可以让用JavaScript做很多事情变得非常简单。如果您在web上使用JavaScript做任何事情，但是您对重建轮子不感兴趣，并且希望节省大量时间，那么您应该学习使用jQuery(还有，你真幸运！非常酷的网站Codeacademy刚刚发布了jQuery的入门指南。）

这一切看起来很快就变得复杂了，但是HelloWorld扩展和这个更复杂的RSS获取程序之间的主要区别实际上相当简单：我们的popup.html文件现在将包含html和一些JavaScript。他们一起做的事情实际上会超越展示“你好世界！”每次你点击按钮。

Chrome扩展api将Chrome扩展开发与日常的HTML和JavaScript区别开来，它提供了对各种函数的访问，模糊了扩展和浏览器之间的界限。所以，让我们尝试一些基本的。

新popup.html的工作原理

RSS抓取扩展中的新popup.html文件的工作方式如下：当您单击扩展的按钮时，它将加载popup.html。加载后，它将调用传递到background.html，要求它获取我们的RSS提要。一旦background.html成功获取feed，它就会将feed的XML传递回popup.html，然后popup.html将feed解析为友好的html，然后在popup中显示。

background.html和popup.html之间的消息传递

由于Chrome中存在各种安全沙盒，扩展的某些部分无法访问与扩展的其他部分相同的api或信息。为了解决这个问题，您需要在Chrome扩展中使用一种常见的技术，即在扩展的不同部分之间来回传递消息和数据。为了演示其工作原理，我将获取RSS提要的方法放在background.html中，并从popup.html调用它。在background.html中，您会注意到fetch\u feed方法：

function fetch_feed(url, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(data) { if (xhr.readyState == 4) { if (xhr.status == 200) { var data = xhr.resp***eText; callback(data); } else { callback(null); } } } // Note that any URL fetched here must be matched by a permission in // the manifest.json file! xhr.open('GET', url, true); xhr.send(); }

它是一个非常基本的函数，以URL和回调函数作为参数，获取提要，然后将其传递给回调函数。为了收听扩展的其他部分，我们添加以下代码：

function onRequest(request, sender, callback) { if (request.action == 'fetch_feed') { fetch_feed(request.url, callback); } } // Wire up the listener. chrome.extension.onRequest.addListener(onRequest);

最后一行使用了非常有用的chrome.extension API，告诉页面侦听来自扩展的其他部分的请求。当它收到一个请求时，它将把它传递给onRequest函数。如您所见，onRequest函数然后检查请求是否请求它知道如何处理的操作（在本例中，请求获取feed），如果是，则调用该函数。

现在让我们跳到popup.html文件。加载时，页面完全为空。这就是改变现状的开始：

$(document).ready(function() { fetch_feed(); });

然后，我们的fetch\u feed方法触发此请求：

function fetch_feed() { chrome.extension.sendRequest({'action' : 'fetch_feed', 'url' : 'http://tl80.com/index.xml'}, function(resp***e) { display_stories(resp***e); } ); }

正如您可能猜到的，chrome.extension.sendRequest会将请求发送到您的扩展中可能正在侦听的其他部分。正如我们所知，background.html正在监听这个确切的请求！因此，我们的请求从popup.html跳转到background.html，后者获取提要，然后将其传递回popup.html，后者随后调用一个名为display\u stories的函数，并将background.html的响应传递给它。display stories函数（这里我不详细介绍，但您可以在源代码中看到）然后使用一点jQuery和JavaScript解析XML提要并在弹出窗口中呈现故事。

你知道这有多么容易吗？？？

我是个孩子。不过，一旦你掌握了窍门，**Chrome扩展实际上非常简单，而且非常有趣(很明显，复杂度会因你想做什么而有所不同。）如果你对HTML和JavaScript很满意（哦，如果你想让它变得漂亮的话，我猜CSS也是如此），你可以做很多事情，而且学习曲线也很平缓。所以，勇敢的程序员们，继续前进吧，做一些很棒的扩展吧！

故障排除

你什么都很棒（去你！），但是你会不时地绊倒，尤其是JavaScript。您将找到两个非常有用的工具来帮助调试。第一个是c***ole.log，它是一个JavaScript方法，它将文本、对象或任何您传递给Chrome的JavaScript控制台，以便您能够捕捉到可能发生错误的地方。

第二个是Chrome令人敬畏的开发工具，更具体地说，是JavaScript控制台和DOM检查器。您可以通过右键单击分机的按钮并选择Inspect popup来打开弹出窗口的控制台。同样，您可以通过在中的扩展视图中单击background.html链接来调出background.html的开发人员工具chrome://settings/extensi***.

有用的资源

我所有的Chrome扩展构建知识都来自于Google非常全面的文档，以及当我陷入困境时的老式万维网搜索。所以你一定要看看：

• 官方的googlechrome扩展开发者指南：它是你需要知道的一切的起点，提供了你可能想要使用的各种扩展api，等等。如果你知道你想做什么样的扩展，我强烈建议你花一个小时左右的时间，通读文档，记笔记/保存链接，只要你偶然发现一些听起来需要它来完成扩展目标的东西。
• Stack Overflow的Google Chrome扩展标签页充满了关于Chrome扩展开发的大量问答。如果你被什么难住了，给StackOverflow一个搜索，给整个网站一个搜索，如果你找不到答案，试着把你的问题发布到StackOverflow。太棒了。

获取编码

好了，这个入门指南够了。是时候让你卷起袖子，自己做一些扩展开发了。如果你有任何问题，或者只是想分享你打算做什么扩展，让我们在评论中听听。

雷·普拉瑟/Shutterstock摄。

---

你可以在Twitter、Google+和Facebook上联系本文作者adampash。