上周我们说了如何用css给html做代码检查。基本思想就是利用css高级选择器(如：:not() ),来筛选出文档里特定的元素。如我们可以选择所有没有添加替代文本(alt属性)的图片并将其在页面中标出。

 

img:not([alt]) {  

 

    border: 5px solid red;

 

}

 

/* Add an error message */

 

img:not([alt])::after {  

 

   content: "Images must have an alt attribute";

 

}

 

目前比较流行的html代码检查方案是ally.css,作者是Gaël Poupard.今天我们要做的事情是把它做成一个浏览器扩展（chrome扩展），让开发者们更好的使用。

 

开始之前

 

我觉有必要说一下chrome扩展的开发。Chrome扩展其实就是一个配置文件 manifest.json 和一系列 HTML、CSS、JS、图片文件的集合。

 

一个简单目录结构是这样的：

 

--chrome extension

 

  |--manifest.json

 

  |--script.js

 

  |--style.css

 

  |--popup.html

 

manifest.json是Chrome扩展的入口文件，扩展被安装后，Chrome就会读取扩展中的manifest.json文件，这样Chrome就可以知道在浏览器中如何呈现这个扩展，以及这个扩展如何同用户进行交互。

 

定义我们的manifest.json文件

 

manifest.json文件定义了扩展的名称（name）、版本（version）、描述（description）、图标位置（icons）和 Manifest 版本（manifest_version）等信息。其中，name、version 和 manifest_version 是必须的。

 

下面是我们定义的manifest.json文件:

 

{

 

  "manifest_version": 2,

 

  "name": "Alix for Chrome",

 

  "short_name": "Alix",

 

  "description": "Lorem ipsum",

 

  "version": "1.1",

 

  "permissions": [

 

      "activeTab"

 

  ],

 

  "browser_action": {

 

    "default_title": "Toggle Alix",

 

    "default_popup": "popup/index.html",

 

    "default_icon": {

 

      "19": "images/toolbar-chrome.png",

 

      "38": "images/toolbar-chrome@2x.png"

 

    }

 

  },

 

  "icons": {

 

      "128": "icon_128.png",

 

      "16": "icon_16.png",

 

      "48": "icon_48.png"

 

   },

 

  "web_accessible_resources": [

 

    "a11y.css/a11y-en_advice.css",

 

    "a11y.css/a11y-en_error.css",

 

    "a11y.css/a11y-en_obsolete.css",

 

    "a11y.css/a11y-en_warning.css",

 

    "a11y.css/a11y-fr_advice.css",

 

    "a11y.css/a11y-fr_error.css",

 

    "a11y.css/a11y-fr_obsolete.css",

 

    "a11y.css/a11y-fr_warning.css"

 

  ]

 

}

 

这里给出一些配置项的解释：

 

manifest_version: manifest.json文件格式的版本，Chorme 18以上的version是2。

 

permissions: 一个数组，定义了扩展需要向 Chrome 申请的权限，比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡（tabs）、获取当前活动选项卡（activeTab）、浏览器通知（notifications）、存储（storage）等。

 

browser_action:指定扩展的图标放在 Chrome 工具栏中，它定义了扩展图标文件位置（default_icon）、悬浮提示（default_title）和点击扩展图标所显示的页面位置（default_popup）

 

web_accessible_resources: 一个数组，定义了在扩展里可能被用到的资源。