如何製作Google Chrome外掛
本篇文章將講解如何製作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鍵聚焦到“百度帳號智慧客服”，發現該連結已經正確的朗讀為“百度帳號智慧客服”
通過這樣的方式，我們可以給一些無障礙比較不好的網頁新增無障礙屬性，使視障人士能更好的上網。
好了，到這裡今天的分享就結束了，最後還是希望廣大網頁開發工程師們能夠將無障礙屬性應用到實際開發工作當中，時時擁有無障礙的意識，讓障礙使用者也能輕鬆無障礙上網。