Создание Alix, Chrome-расширения для линтинга HTML


Данный материал является вольным переводом статьи:
Ire Aderinokun Making Alix, a Chrome Extension for Linting HTML

На прошлой неделе я написала о том, как вы можете использовать CSS селекторы для линтинга HTML. Идея этой концепции заключалась в том, что мы можем использовать некоторые продвинутые селекторы, такие как :not() чтобы выбрать определенные типы элементов на странице. Например, мы можем выбрать все изображения, у которых нет альтернативного текста, и применить к ним стиль, чтобы выделить их на странице.

img:not([alt]) {  
    border: 5px solid red;
}

/* Add an error message */
img:not([alt])::after {  
   content: "Images must have an alt attribute";
}

После написания этой статьи я обнаружила, что множество других людей уже использовали эту идею. Лучшим решением среди найденных, оказался a11y.css созданный Gaël Poupard. Поэтому я решила воспользоваться его наработками.

Чтобы всем было удобно пользоваться я решила сделать расширение для браузера (Chrome).

При помощи расширения легко применить таблицу стилей к любой странице. Вот как я это сделала.

Объявление расширения Chrome: Манифест

Первое, что нам нужно сделать, при создании расширения для Chrome — создать манифест-файл. Работает это так же как в случае когда мы создаем манифест-файл для прогрессивного веб приложения (PWA прим. переводчика). Файл включает в себя различную информацию, по которой Chrome определяет, что должно делать расширение и какие разрешения ему для этого необходимы.

Это файл manifest.json для Alix —

{
  "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/toolbar-chrome@2x.png"
    }
  },

  "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: версия формата файла манифеста, требуемого расширением. Для Chrome 18 требуется версия 2.

permissions: разрешения, которые запрашивает ваше расширение. Alix требует только доступ к той вкладке, которая активна в данный момент.

browser_action помещает иконку на главную панель Chrome и определяет действие при клике по значку.

default_title: тайтл для значка на панели default_popup: html страница, которая отобразится при клике на значок.

web_accessible_resources: массив путей к ресурсам, которые могут использоваться на странице.

Создание всплывающего окна

Всплывающее окно это просто html страница, указанная в манифест-файле в browser_action/default_popup. Эта страница, по умолчанию, будет запускаться при клике на значок.

С этой страницей мы можем делать все, что захотим, как с обычной html страницей.

Добавляем таблицу стилей a11y.css

Наконец, нам нужно применить к текущей активной вкладке таблицу стилей a11y.css. Для этого должен быть запущен скрипт, который создаст на странице элемент <link rel="stylsheet"> указывающий на необходимую таблицу стилей.

Для выполнения скрипта мы воспользуемся методом chrome.tabs.executeScript(). ​Этот метод принимает объект с несколькими параметрами. В нашем случае параметром выступит константа со строкой, содержащей код, который мы хотим выполнить.

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});
}

Если мы откроем инспектор элементов, то увидим, что таблица стилей добавлена как последний элемент в секции head.

То что нужно! Как всегда, вы можете посмотреть исходный код или установить расширение из магазина Chrome.

Спасибо Gaël Poupard за созданный им a11y.css!