动手作第一个Chrome插件

时间 2019-11-13

原文原文链接

　　Chrome插件是使人惊讶的简单，一旦你弄懂它的工做和实现原理。它是由一部分HTML,一部分Js，而后混合了一个叫作manifest.json的Json文件组合而成的总体。这意味着你可使用你最擅长的js框架去实现它。javascript

　　若是你仍是一个Chrome插件的新手而且想尝试写一个的话，下面的文章将会带领你们而且尝试让你们理解Chrome插件的工做机制。这篇文章将会讲述每一块架构，以及相互之间的联系和插件的通常化形式。css

架构

　　Chrome插件中的文件大致上能够分红2部分：Chrome插件中确确实实存在的文件，而且是应用程序级别的,如上图的Chrome Extension Scripts以及注入到每一个网页Dom当中的文件（如Content Scripts 或者Injected Scripts）.这些文件都被放在manifest.json当中，Chrome内部会自动识别不一样个文件的做用。html

　　在任什么时候候，popup和background都只有一份，相比较起来，若是你有多个Tab(这里的Tab指的是Chrome当中的选项卡，也就是一个窗口页面),那么Content Scripts和 Injected Scripts会运行在每个Tab当中，也就是能够跨选项卡。固然，你能够指定往哪一个Tab当中去注入Scripts,也就是说，注入操做是可选择的。java

　　下面是一些它们如何工做的细节：jquery

Manifest.json

这个Json文件是把backgrounds, popups, content scripts 和injected scripts 放在一块儿，并以结构化的方式书写。
设置扩展，如Permission。
设置扩展的基本信息。

Background

Javascript文件老是运行在后台（在老版本的Chrome当中，background是html文件而且嵌入了javascript）.
没有显示界面。
有Chrome应用程序级别命令的访问权限。
有使用全部Chrome API的权限

点击插件图标会显示出Html和Javascirpt.
也拥有应用程序级别的权限（和background同样）
只有当Chrome插件的图标点击的时候才触发。
对全部的pop-up Chrome API有使用权限。

Content Scripts

拥有一部分Api的使用权限（好比从backgorund监听消息）
对于页面Dom有完整的访问权限，可是对于任何window级别的对象没有访问权限（好比全局变量），对于frame也没有访问权限；这是由于安全限制。
Content scripts运行在介于插件和页面之间，全局的window对象是和页面/插件全局命名空间彻底不一样的。

Injected Scripts

和Contente Scripts 同样，只拥有部分Api的使用权限
注入当前Tab的网页当中，并不与插件进行通讯。

关联关系

　　他们之间的联系只要你弄懂了总体的架构，我相信就会很明了。chrome

　　在应用程序级别的部分是能够有互相访问的权限的。好比Popup文件能用chrome.extension.getBackgroundPage()访问background里面的东西，这就好像Backbone 视图能够访问他们的Model和Collection。json

　　Content Scripts是存在于每一个独立的Dom页面，和background和popup用message的方式进行通讯交流。特别的，它可使用chrome.tabs.sendMessage和chrome.runtime.onMessage.addListener去向对方发送消息。这和Backbone 的事件系统很像.安全

　　Injected Scripts和Content Scripts的不一样在于它不能监听或者发送消息给其余的Chrome插件部分。架构

结构

　　组织你的Chrome插件，能更好的让你分清楚不一样的文件的不一样做用。不一样的项目的组织结构均可以是类似的，下面列举了一种组织形式，你们能够参考一下。app

　　Manifest.json把全部的须要的文件都放在一块儿了，须要注意的一点是文件是按顺序被编译的，因此被依赖的文件每每是放在实际的script文件以前的，下面的代码中，jquery.js实在content scripts中的recorder.js和player.js以前的。　　

{
  "manifest_version": 2,

  # 插件基本信息
  "name": "MyExtension",
  "description": "MyExtension",
  "version": "1.0.0",

  # popup弹出窗文件位置
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "popups/popup.html"
  },

  # 设置 content scripts 以及何时注入什么类型的页面
  "content_scripts": [{
    "matches": ["http://*/*","https://*/*"],
    "css":["styles/styles.css"],
    "js": [
      "bower_components/jquery/dist/jquery.min.js",
      "content-scripts/recorder.js",
      "content-scripts/player.js",
    ]
  }],

  # 设置background的scripts
  "background": {
    "scripts": [
      "bower_components/jquery/dist/jquery.min.js",
      "bg/background.js"
    ]
  },

  # 脚本的权限
  "permissions": [
    "<all_urls>",
    "tabs",
    "storage",
    "unlimitedStorage"
  ]
}

动手作一个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"
   ]
}

　　其中有几点须要注意，browser_action 这个指定了点击插件的时候，弹出的页面以及插件的图标。Permission 就是指定了哪些URL对于这个插件是有用的，好比你能够输入特定的域名，那么只有在这个域名下，这个插件才有用。

　　下面咱们来新建一个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>

　　你们可能注意到了我其实使用了一个popus.js的文件，这个实际上是为了实现点击checkPage时候的效果所必须的脚本，下面咱们新建一个popup.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);
}, false);

　　细心的人不难发现，上面的代码就是向某个网站发一个post请求,checkPage实际上是注册了click事件的，一旦按钮被点击了，咱们就会获取到当前活动Tab而且执行一些js代码。

　　那么怎么测试咱们的插件呢？在Chrome地址栏输入chrome://extensions，打开开发者模式，而后点击加载已解压的扩展程序，选择相对应的目录就OK了，若是你的插件修改过，别忘了点一下从新加载(Ctrl+R)按钮。

　　最终效果以下：

总结

　　由于Chrome插件涉及的知识点不少，因此一次也讲不完，之后若是有时间，我会把我学到的东西和你们分享，另外这个插件也是我这2天学的，由于公司要作一个信息自动刷新的功能，因此才想到了Chrome插件，不过很惋惜，竞赛完了，我并没得奖，也小小吐槽下吧。