本篇文章将讲解如何制作Google Chrome插件

通过浏览器插件的方式来改造网页的无障碍问题，使视障用户能更加轻松的上网。

在以前写过一篇使用JS代码动态无障碍适配网页内容的文章，主要是通过在浏览器地址栏输入js代码，从而改变网页元素的属性，使其达到无障碍效果。

然而，这种方式在实际使用中并不是很方便，每次刷新页面都要手动执行一次js代码，显得非常麻烦。

那么有没有一种方式，能够自动加载脚本代码，使页面元素自动添加无障碍属性的呢？

近日，在学习Chrome插件的过程中，就想到了可以通过编写Chrome插件的方式，自动执行无障碍脚本，使页面元素能自动添加无障碍属性，使视障人士更好的浏览网页。

下面就以一个简单的Chrome插件为例，带领大家了解如何编写无障碍插件，改变页面元素属性，从而让网页元素达到无障碍的效果。

· 首先我们新建一个文件夹，命名为“demo”

· 然后在demo文件夹内新建三个文件，分别是：

manifest.json
background.html
Accessibility.js

一、manifest.json

此文件为清单文件，每个Google Chrome插件都应包含该文件
清单内容如下：

{
"background": {
"page": "background.html"//后台加载的HTML文件
},
   "content_scripts": [ {
      "js": [ "accessibility.js" ],//需要执行的js文件
      "matches": [ "http://*/*", "https://*/*", "ftp://*/*", "file://*.*" ]//匹配的网址
   } ],
   "name": "无障碍插件",//插件的名称
   "version": "1.1.0",//插件的版本号
   "description": "这是一个无障碍插件",//插件的简介
   "manifest_version": 2//清单文件的版本号
}

二、background.html

此文件为谷歌浏览器后台加载的HTML页面，本插件中主要用于加载Accessibility.js

代码如下：

无障碍插件

三、accessibility.js

此文件为我们所要编写的js代码文件，用来改造网页的无障碍问题。

下面我们还是以百度作为测试对象，重点来看下js代码文件的内容：

(function() {
var host = window.location.host;
if(host==="www.baidu.com"){//判断下是不是百度首页的网址
//为百度首页的搜索框添加描述文本
//使用的是aria-label属性， aria-label 可以给非文本元素添加内容描述，如果一个非文本元素需要让屏幕阅读器用户知道元素的功能、传达的信息，需要给元素添加替代文本，如图形按钮、编辑框、组合框等，可以通过aria-label属性给元素提供适当的替代文本。
try{
var kwElt=document.getElementById("kw");
kwElt.setAttribute('aria-label','请键入搜索关键词');
}
catch(err)
{}
}
if(host==="passport.baidu.com"){//判断下是不是百度注册页的网址
//为百度注册页面的"登陆"链接设置tab焦点，并且设置控件的角色为“链接”
//使用的是：tabindex属性，tabindex属性可为元素添加/忽略焦点，role属性 可设置元素的角色。
try{
var loginbtn=document.getElementById("login_btn");
loginbtn.setAttribute('tabindex','0');
loginbtn.setAttribute('role','link');
}
catch(err)
{}
//为百度注册页面的“百度帐号智能客服”添加标签
//使用的是aria-label属性， aria-label 可以给非文本元素添加内容描述，如果一个非文本元素需要让屏幕阅读器用户知道元素的功能、传达的信息，需要给元素添加替代文本，如图形按钮、编辑框、组合框等，可以通过aria-label属性给元素提供适当的替代文本。
try{
var elts=document.getElementsByTagName("a");
for(i=0;i<elts.length;  i){
if(elts[i].getAttribute('class')==='mod-new-reg-service'){
elts[i].setAttribute('aria-label','百度帐号智能客服');
break;
}
}
}
catch(err)
{}
}

})();

到这里我们插件就编写完成了

接下来需要将插件加载到谷歌浏览器中才能使用。

不过，在加载插件之前，我们先来体验下，百度的搜索框、登陆以及百度帐号智能客服控件元素的无障碍体验：

1. 打开百度首页，使用tab聚焦到搜索输入框，此时屏幕阅读器朗读为：可编辑文本

开发者没有对这个搜索框添加描述属性，视障用户很难理解这个编辑框的作用

2. 在百度首页点击“登陆”->“立即注册”进入注册页面，尝试使用tab键聚焦“登陆”链接，结果发现登陆链接没有tab焦点，我们无法使用tab键聚焦到登陆链接上。

3.在百度首页点击“登陆”->“立即注册”进入注册页面，使用tab聚焦到“百度帐号智能客服”链接上，结果发现“百度帐号智能客服”没有标签，只朗读为“链接”

我们加载这个插件后再试试效果：

打开谷歌浏览器，这里推荐使用Chrome开发板。

在地址栏中输入：chrome://extensions

进入扩展程序页面，选中“开发者模式”，然后点击“加载已解压的扩展程序”按钮，弹出浏览页面，浏览到“demo”文件夹，将其选中。

这样我们的插件也就加载好了。

接下来我们来试试效果：

1. 打开百度首页，tab聚焦到搜索输入框，此时屏幕阅读器朗读为：“请键入搜索关键词” 可编辑文本

2. 在百度首页点击“登陆”->“立即注册”进入注册页面，使用tab可聚焦到“登陆”链接

3.在百度首页点击“登陆”->“立即注册”进入注册页面，使用tab键聚焦到“百度帐号智能客服”，发现该链接已经正确的朗读为“百度帐号智能客服”

通过这样的方式，我们可以给一些无障碍比较不好的网页添加无障碍属性，使视障人士能更好的上网。

好了，到这里今天的分享就结束了，最后还是希望广大网页开发工程师们能够将无障碍属性应用到实际开发工作当中，时时拥有无障碍的意识，让障碍用户也能轻松无障碍上网。

如何制作Google Chrome插件

本篇文章将讲解如何制作Google Chrome插件

一、manifest.json

二、background.html

三、accessibility.js

相关推荐