猫史档案馆

1.创建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"
   ]
}

2.创建popup.h t m l（去空格）

内容如下：

<!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>

3.创建popus.js文件

内容如下：

ocument.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);

4.创建icon.jpg文件

内容如下： center_image

5.把所有文件放在一个文件夹里（文件夹名称就是插件名称）

6.打开插件页面的开发者模式，点击“加载已解压的扩展插件程序“，选择刚才创建的文件夹，上方出现了icon.png的图片就可以了！

*点击“打包扩展程序“打包为后缀为“.crx“的文件，安装时可直接拖动安装，不要拖成“.pem”后缀的文件，也不要删除，这个是密匙文件，开发新版是需要用。

猫史档案馆

只需6步，就能做出一个自己的Chrome扩展！

回复