可以檢查html代碼的chrome擴展

本文在原文的基礎上添加了一些關於如何創建chrome擴展的完整細節，幫助讀者更好創建屬於自己的chrome擴展

上周我們說了如何用css給html做代碼檢查。基本思想就是利用css高級選擇器(如：:not() ),來篩選出文檔里特定的元素。如我們可以選擇所有沒有添加替代文本(alt屬性)的圖片並將其在頁面中標出。

img:not([alt]) { n border: 5px solid red;n}nn/* Add an error message */nimg:not([alt])::after { n content: "Images must have an alt attribute";n}n

目前比較流行的html代碼檢查方案是ally.css,作者是Ga?l Poupard.今天我們要做的事情是把它做成一個瀏覽器擴展（chrome擴展），讓開發者們更好的使用。

開始之前

我覺有必要說一下chrome擴展的開發。Chrome擴展其實就是一個配置文件 manifest.json 和一系列 HTML、CSS、JS、圖片文件的集合。

一個簡單目錄結構是這樣的：

--chrome extensionn |--manifest.jsonn |--script.jsn |--style.cssn |--popup.htmln

manifest.json是Chrome擴展的入口文件，擴展被安裝後，Chrome就會讀取擴展中的manifest.json文件，這樣Chrome就可以知道在瀏覽器中如何呈現這個擴展，以及這個擴展如何同用戶進行交互。

定義我們的manifest.json文件

manifest.json文件定義了擴展的名稱（name）、版本（version）、描述（description）、圖標位置（icons）和 Manifest 版本（manifest_version）等信息。其中，name、version 和 manifest_version 是必須的。

下面是我們定義的manifest.json文件:

{n "manifest_version": 2,nn "name": "Alix for Chrome",n "short_name": "Alix",n "description": "Lorem ipsum",n "version": "1.1",nn "permissions": [n "activeTab"n ],nn "browser_action": {n "default_title": "Toggle Alix",n "default_popup": "popup/index.html",n "default_icon": {n "19": "images/toolbar-chrome.png",n "38": "images/toolbar-chrome@2x.png"n }n },nn "icons": {n "128": "icon_128.png",n "16": "icon_16.png",n "48": "icon_48.png"n },nn "web_accessible_resources": [n "a11y.css/a11y-en_advice.css",n "a11y.css/a11y-en_error.css",n "a11y.css/a11y-en_obsolete.css",n "a11y.css/a11y-en_warning.css",n "a11y.css/a11y-fr_advice.css",n "a11y.css/a11y-fr_error.css",n "a11y.css/a11y-fr_obsolete.css",n "a11y.css/a11y-fr_warning.css"n ]n}n

這裡給出一些配置項的解釋：

• 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

注入ally.css樣式文件

接下來我們要做的事是將相對應的 ally.css文件注入到當前打開的瀏覽器頁面裡面。為了實現這一功能我們需要在瀏覽器頁面裡面跑一段js，這段js創建一個<link rel="stylesheet"> 在當前頁面。這裡我們可以用chrome.tabs.executeScript()的方法。我們可以給這個方法傳入{code: } code裡面是你要執行的代碼。

function addStylesheet() {nn // Get file path based on language and level options from formn const file = `/a11y.css/a11y-${options.language}_${options.level}.css`;nn const code = `n var stylesheet = document.createElement("link");n stylesheet.rel = "stylesheet";n stylesheet.href = chrome.extension.getURL("${file}");n stylesheet.id = "a11yCSS";n document.getElementsByTagName("head")[0].appendChild(stylesheet);n `;nn // Execute script on active tabn chrome.tabs.executeScript({code: code});n}n

運行

打開 Chrome 設置-擴展程序（chrome://extensions/）頁面，勾選 開發者模式，點擊 載入正在開發的擴展程序 按鈕，選擇擴展所在的文件夾，就可以在瀏覽器工具欄中看到自己寫的擴展了。

demo

地址：源碼 webstore

寫到最後

最近收到了越來越多的投稿，在這裡感謝大家對前端雜貨鋪的支持。有的文章沒有放出來，主要是有了重複的文章，或者內容需要更精彩一些。我希望每一篇文章都能解決讀者的某一個問題，多點乾貨少些八卦，讓大家閱讀後覺得學到了東西，而不是想閱讀雜誌一樣僅供娛樂。

一篇文章不用大而全的去闡述一個大觀點，聚焦一個小而精的觀點，更能讓大家收穫頗豐，記得更牢。

鞠躬。

參考文獻

• Manifest File Format
• 綜述--擴展開發文檔
• a11y.css
• 合集 : Chrome擴展及應用開發

推薦閱讀：