黑基网 首页 电脑 网页浏览器 查看内容

可以检查html代码的chrome扩展

2017-4-11 10:44| 投稿: lofor |来自: 互联网

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

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

创建一个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});
}

运行

打开 Chrome 设置-扩展程序(chrome://extensions/)页面,勾选 开发者模式,点击 加载正在开发的扩展程序 按钮,选择扩展所在的文件夹,就可以在浏览器工具栏中看到自己写的扩展了。

demo

地址:源码 webstore

写到最后

最近收到了越来越多的投稿,在这里感谢大家对前端杂货铺的支持。有的文章没有放出来,主要是有了重复的文章,或者内容需要更精彩一些。我希望每一篇文章都能解决读者的某一个问题,多点干货少些八卦,让大家阅读后觉得学到了东西,而不是想阅读杂志一样仅供娱乐。

一篇文章不用大而全的去阐述一个大观点,聚焦一个小而精的观点,更能让大家收获颇丰,记得更牢。

小编推荐:欲学习电脑技术、系统维护、网络管理、编程开发和安全攻防等高端IT技术,请 点击这里 注册黑基账号,公开课频道价值万元IT培训教程免费学,让您少走弯路、事半功倍,好工作升职加薪!



免责声明:本文由投稿者转载自互联网,版权归原作者所有,文中所述不代表本站观点,若有侵权或转载等不当之处请联系我们处理,让我们一起为维护良好的互联网秩序而努力!联系方式见网站首页右下角。


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论


新出炉

返回顶部