可以检查html代码的chrome扩展

2017-4-11 10:44 |来自: 互联网 2498 0

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

上周我们说了如何用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.webp",
      "38": "images/[email protected]"
    }
  },

  "icons": {
      "128": "icon_128.webp",
      "16": "icon_16.webp",
      "48": "icon_48.webp"
   },

  "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: 一个数组，定义了在扩展里可能被用到的资源。

创建一个Popup

Popup 就是一个简单的html页面，我们可以从browser_action/default_popup 读取到。当我们点击工具栏上面的icon的时候他将被触发。我们可以给这个页面添加任意的样式。

注入ally.css样式文件

接下来我们要做的事是将相对应的 ally.css文件注入到当前打开的浏览器页面里面。为了实现这一功能我们需要在浏览器页面里面跑一段js，这段js创建一个<link rel="stylesheet"> 在当前页面。这里我们可以用chrome.tabs.executeScript()的方法。我们可以给这个方法传入{code: ''} code里面是你要执行的代码。

function addStylesheet() {

    // Get file path based on language and level options from form
    const file = `/a11y.css/a11y-${options.language}_${options.level}.css`;

    const code = `
        var stylesheet = document.createElement("link");
        stylesheet.rel = "stylesheet";
        stylesheet.href = chrome.extension.getURL("${file}");
        stylesheet.id = "a11yCSS";
        document.getElementsByTagName("head")[0].appendChild(stylesheet);
    `;

    // Execute script on active tab
    chrome.tabs.executeScript({code: code});
}