chrome扩展程序_如何在10分钟内创建Chrome扩展程序

chrome扩展程序

For more on working with Chrome extensions, watch our video tutorial Interacting with Browser Content From Your Chrome Extension.

有关使用Chrome扩展程序的更多信息，请观看我们的视频教程与Chrome扩展程序中的浏览器内容交互 。

One of my favorite things about the Chrome web browser is how extensible it is. It seems like there is a Chrome plugin for just about everything you could ever possibly want.

关于Chrome网络浏览器，我最喜欢的事情之一是它的可扩展性。 似乎有一个Chrome插件可以满足您可能想要的所有需求。

But, have you ever wanted to create your own Chrome extension? Have you ever wondered how difficult the process would be or what it would entail? Well, it turns out it is super easy—probably a lot easier than you ever imagined.

但是，您是否曾经想创建自己的Chrome扩展程序？ 您是否曾经想过这个过程有多困难或需要什么？ 好吧，事实证明这是超级容易的-可能比您想象的要容易得多。

In this tutorial I am going to show you how to create a basic Chrome extension in about 5 minutes—no joke!

在本教程中，我将向您展示如何在大约5分钟的时间内创建基本的Chrome扩展程序-别开玩笑了！

我们将要建立的 (What we are going to build)

I’m pretty obsessed about the speed of my website, http://simpleprogrammer.com, so I often utilize sites like GTmetrix to check my site speed, just to make sure it isn’t slowing down.

我对网站http://simpleprogrammer.com的速度非常着迷，因此我经常利用GTmetrix等网站来检查我的网站速度，以确保其速度不会降低。

I’ll often check other sites that I’m on as well, so I can see how they compare.

我也会经常检查其他网站，以便了解它们之间的比较。

Well, wouldn’t it be nice if there was a Chrome extension that allowed you to use GTmetrix to check the site speed of whatever site you happened to be browsing, just by clicking a button?

好吧，如果有一个Chrome扩展程序可以让您使用GTmetrix来检查碰巧正在浏览的任何站点的站点速度，只需单击一个按钮，那岂不是很好吗？

I checked the Chrome Web Store and there wasn’t an extension that performed this action, so that’s exactly what we are going to build today.

我检查了Chrome网上应用店，没有执行此操作的扩展程序，所以这正是我们今天要构建的。

什么是Chrome扩展程序？ (What is a Chrome Extension?)

Before we get started building our extension, it’s probably a good idea to have a basic understanding of what a Chrome extension is and how Chrome extensions work.

在开始构建扩展程序之前，大概了解Chrome扩展程序是什么以及Chrome扩展程序如何工作可能是一个好主意。

At a very basic level, a Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs.

从根本上讲，Chrome扩展程序只是一些HTML，CSS和JavaScript，可让您通过Chrome公开的某些JavaScript API向Chrome添加一些功能。 扩展程序基本上只是一个位于Chrome中的网页，可以访问其他一些API。

In this tutorial, I’m going to show you how to create a basic Chrome extension called a Browser Action extension. This kind of extension puts a button in the Chrome toolbar that will show an HTML page when clicked and optionally execute some JavaScript.

在本教程中，我将向您展示如何创建一个称为浏览器操作扩展的基本Chrome扩展。 这种扩展程序在Chrome工具栏中放置了一个按钮，该按钮在单击时将显示HTML页面，并可以选择执行一些JavaScript。

Chrome extensions can also be created to work only on certain pages through the use of Page Actions, they can run code in the background using Background Pages, and they can even modify an existing page loaded in the browser using Content Scripts. But for this tutorial we are going to keep things simple.

通过使用Page Actions ，还可以创建Chrome扩展程序使其仅在某些页面上运行，它们可以使用Background Pages在后台运行代码，甚至可以使用Content Script修改浏览器中加载的现有页面。 但是对于本教程，我们将使事情变得简单。

If you are interested in learning more about Chrome extensions in general, check out Chrome’s extensions documentation.

如果您有兴趣一般地了解有关Chrome扩展的更多信息，请查看Chrome的扩展文档 。

步骤1：建立专案 (Step 1: Create the project)

The first thing we need to do is create the project and all the files we need for our extension. Let’s start by creating a new directory that we’ll call “GTmetrix Extension.” We’ll put all the files we need for our extension in this new folder. Chrome allows us to load up a plugin by pointing it at a folder that contains the extension files.

我们需要做的第一件事是创建项目以及扩展所需的所有文件。 让我们从创建一个新目录开始，我们将其称为“ GTmetrix Extension”。 我们会将扩展所需的所有文件放在这个新文件夹中。 Chrome浏览器允许我们通过将插件指向包含扩展文件的文件夹来加载插件。

All Chrome extensions require a manifest file. The Manifest file tells Chrome everything it needs to know to properly load up the extension in Chrome. So we’ll create a manifest.json file and put it into the folder we created. You can leave the manifest file blank for now.

所有Chrome扩展程序都需要清单文件。 清单文件告诉Chrome浏览器正确加载Chrome浏览器所需的一切。 因此，我们将创建一个manifest.json文件并将其放入我们创建的文件夹中。 您现在可以将清单文件留空。

Next we’ll need an icon for our extension. This just needs to be a 19x19px PNG file. You can get a sample icon from Google’s demo project that you can modify.

接下来，我们需要一个扩展图标。 这只需要是19x19px的PNG文件。 您可以从Google的演示项目中获取示例图标，然后可以对其进行修改。

Next we’ll need an HTML page to show when a user clicks our Browser Action, so we’ll create a popup.html file and a popup.js file in our “GTmetrix Extension” directory.

接下来，我们需要一个HTML页面来显示用户何时单击我们的浏览器操作，因此我们将在我们的“ popup.js Extension”目录中创建一个popup.html文件和一个popup.js文件。

Due to security constraints, we can’t put inline JavaScript into our HTML files inside of our Chrome extensions, so we have to create a separate file to hold any JavaScript code we need and we’ll reference it from the HTML file.

由于安全性限制，我们无法将内嵌JavaScript放入Chrome扩展程序内HTML文件中，因此我们必须创建一个单独的文件来保存所需的任何JavaScript代码，并从HTML文件中引用它。

步骤2：创建清单文件 (Step 2: Create the manifest file)

Now that we have our basic project structure, we need to add the code to our manifest file to describe our plugin to Chrome.

现在我们有了基本的项目结构，我们需要将代码添加到清单文件中，以描述我们的Chrome插件。

Open up the manifest.json file and enter the following code:

打开manifest.json文件并输入以下代码：

{
  "manifest_version": 2,

  "name": "GTmetrix Analyzer Plugin",
  "description": "This extension will analyze a page using GTmetrix",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab"
   ]
}

Most of the fields in this JSON file are self-explanatory, so I won’t waste your time explaining everything, but take note of the browser_action section where we specify what the default icon is and what HTML page should be displayed when the Browser Action button is clicked.

该JSON文件中的大多数字段都是不言自明的，因此，我不会浪费您的时间来解释所有内容，但是请注意browser_action部分，在该部分中，我们指定默认图标是什么，并且在浏览器操作时应显示哪个HTML页面按钮被点击。

You’ll also notice I’ve added a permissions section that specifies that we need to have permission to access the activeTab. This is required in order to enable us to get the URL of the current tab to pass on to GTmetrix.

您还将注意到我添加了一个permissions部分，该部分指定我们需要具有访问activeTab的权限。 为了使我们能够获取当前选项卡的URL并将其传递给GTmetrix，这是必需的。

Many of the APIs Chrome exposes for you to use with your extensions require you to specify any permissions you require.

Chrome公开供您与扩展程序一起使用的许多API都要求您指定所需的所有权限。

步骤3：建立使用者介面 (Step 3: Create the UI)

The next step is to create the user interface that our Browser Action will display when it is clicked.

下一步是创建一个用户界面，单击该界面时，我们的浏览器操作将显示。

Our user interface is going to be very simple and consist of some text that says “GTmetrix Analyzer,” followed by a button that a user can click to perform the analysis on the current page.

我们的用户界面将非常简单，包含一些文字“ GTmetrix Analyzer”，然后是用户可以单击以在当前页面上执行分析的按钮。

Open up the popup.html page and add the following:

打开popup.html页面并添加以下内容：

<!doctype html>
<html>
  <head>
    <title>GTmetrix Analyzer</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>GTmetrix Analyzer</h1>
    <button id="checkPage">Check this page now!</button>
  </body>
</html>

You’ll notice in this HTML I’ve included the popup.js script. This is where we’ll put the logic for our extension that will execute when the button with the checkPage id is clicked.

您会注意到，在此HTML中，我包含了popup.js脚本。 这是我们放置扩展逻辑的地方，当单击带有checkPage id的按钮时，该逻辑将执行。

步骤4：实施逻辑 (Step 4: Implement the logic)

The last thing we need to do to create the plugin is to implement the logic that should execute when a user clicks the “Check this page now!” button inside of a tab.

创建插件所需做的最后一件事是实现当用户单击“立即检查此页面！”时应执行的逻辑。 标签内的按钮。

We’ll want to add an event listener to listen for the click event on the checkPage button. When it is clicked, we’ll need to create a new form to submit to GTmetrix that contains the URL of the current page, submits it, and then displays the result.

我们将要添加一个事件侦听器，以侦听checkPage按钮上的click事件。 单击它后，我们需要创建一个新表单以提交到包含当前页面URL的GTmetrix，然后提交它，然后显示结果。

Open up the popup.js file and add the following code:

打开popup.js文件并添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('checkPage');
  checkPageButton.addEventListener('click', function() {

    chrome.tabs.getSelected(null, function(tab) {
      d = document;

      var f = d.createElement('form');
      f.action = 'http://gtmetrix.com/analyze.html?bm';
      f.method = 'post';
      var i = d.createElement('input');
      i.type = 'hidden';
      i.name = 'url';
      i.value = tab.url;
      f.appendChild(i);
      d.body.appendChild(f);
      f.submit();
    });
  }, false);
}, false);

I borrowed most of the code to create and submit the form from the bookmarklet provided on the GTmetrix website. I just modified the code to take in the URL from the currently active tab.

我借用了大部分代码，以通过GTmetrix网站上提供的书签创建并提交表单。 我刚刚修改了代码，以从当前活动的选项卡中获取URL。

If you examine the code above, you’ll see that we are first registering a handler for the click event on the checkPage button. Then, when the button is clicked, we get the currently selected tab and execute some JavaScript to create a form with some hidden fields that is submitted to GTmetrix. We use the URL from the current tab to tell GTmetrix which page to execute the test for.

如果检查上面的代码，您会看到我们首先在checkPage按钮上为click事件注册了一个处理程序。 然后，当单击按钮时，我们得到当前选择的选项卡，并执行一些JavaScript以创建带有一些隐藏字段的表单，该表单已提交给GTmetrix。 我们使用当前选项卡中的URL来告诉GTmetrix执行测试的页面。

测试出来 (Testing it out)

It’s really easy to test a new extension in Chrome. Type “chrome://extensions” in a tab to bring up the extensions page.

在Chrome中测试新扩展确实非常容易。 在标签中输入“ chrome：// extensions”以打开扩展页面。

Once on this page, check “Developer mode” to enable loading unpacked extensions. This will allow you to load your extension from a folder. Finally, click “Load unpacked extension” or simply drag the “GTmetrix Extension” folder onto the page to load up the extension. You should immediately see the extension show up as a Browser Action with your icon in the toolbar window of the current tab.

在此页面上，检查“开发人员模式”以启用加载解压的扩展程序。 这将允许您从文件夹加载扩展名。 最后，单击“加载解压缩的扩展程序”或将“ GTmetrix扩展程序”文件夹拖动到页面上以加载扩展程序。 您应该立即看到该扩展名在当前选项卡的工具栏窗口中显示为带有图标的浏览器操作。

To test out the extension, navigate to a page you want to test with GTmetrics. Then, go ahead and click the icon for our GTmetrix extension. When the HTML page comes up, click “Check this page now!” and you should immediately see the request and results from the current page being displayed.

要测试扩展，请导航至您要使用GTmetrics测试的页面。 然后，继续并单击GTmetrix扩展程序的图标。 HTML页面出现时，单击“立即检查此页面！” 并且您应该立即看到当前页面显示的请求和结果。

And that’s it! If you have any problems or questions, feel free to add to the discussion below. I hope this introduction to creating Chrome extensions has been sufficient to get you started.

就是这样！ 如果您有任何问题或疑问，请随时添加到下面的讨论中。 我希望有关创建Chrome扩展程序的介绍足以帮助您入门。

Continue building Chrome extensions with our screencast tutorial Interacting with Browser Content From Your Chrome Extension.

继续我们的截屏视频教程， 与Chrome扩展中的浏览器内容交互，继续构建Chrome扩展 。

翻译自: https://www.sitepoint.com/create-chrome-extension-10-minutes-flat/

chrome扩展程序