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

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

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

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

创建项目

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

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

接下来，我们需要一个扩展图标。这只需要是19x19px的PNG文件。

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

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

manifest.json

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

打开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"
   ]
}

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

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

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

界面设计

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

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

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

  
    
    
  
  
    GTmetrix Analyzer
    Check this page now!
  

您会在此HTML中注意到我已经包含了popup.js脚本。在此处，我们将放置扩展的逻辑，该逻辑将在单击具有checkPageid 的按钮时执行。

逻辑实现

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

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

打开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);

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

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

测试

在Chrome中测试新扩展程序确实很容易。在标签中输入“ chrome://extensions”以打开扩展页面。

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

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