Создание расширение для браузера Chrome является отличным способом, чтобы взять небольшой и плодотворную идею и распространить его для миллионов людей через Интернет-магазин Chrome.Эта статья проведет вас через процесс развития расширением Chrome с современными веб-инструментов и библиотек .

Все начинается с идеи.Шахта была сформирована в то время как читая интересную (и долго) статью о новых интерфейсных технологий.Я был сконцентрирован на чтение этой статьи, когда вдруг моя жена позвонила мне, чтобы выгнать плохой ребенок голубя, что застрял на нашем балконе.Когда я, наконец, вернулся к статье, было уже слишком поздно — Мне пришлось идти на работу .

Чтобы сделать длинную историю короткой, я думал, что было бы неплохо создать расширение Chrome, который позволяет отметить ваши успехи чтения в статьях, так что вы можете продолжать чтение их позже — в любом месте .

“ Markticle ¹ ” является имя, которое я выбрал для этого расширения.Я поделюсь с вами здесь технологии, которые я использовал, чтобы развивать его.После прочтения этой статьи, вы будете иметь готовый к использованию “Сохранить на потом» -как расширения Chrome .

²

До Knowledge

Мы собираемся использовать несколько интерфейсных технологий.Хотя вы можете узнать некоторые из них на лету, знание других не требуется (выделены жирным шрифтом):

• JQuery
• AngularJS
• Node.js
• Grunt
• Bower
• Yeoman

Scaffolding

Давайте начнем с некоторой работой инфраструктуры .

Предполагая, что вы уже знакомы с npm ³ (Node.js “менеджер пакетов), мы будем использовать YEOMAN генератор для создания базового расширение для Chrome .

Note: Если вы все еще не имеют Yeoman установлен на вашем компьютере, запустите, следуя “ Получение Started ⁴ ” учебник .

Открытие нового командную строку или окно терминала и написать следующую команду:

npm install -g generator-chrome-extension

Это позволит установить генератор YEOMAN не соответствует Chrome расширений на вашей машине .

Создайте новую папку в файловой системе:

mkdir my-extension

И выполните следующую команду, чтобы создать все файлы, которые вам необходимо приступить к разработке расширение:

yo chrome-extension

После выполнения этой команды, генератор будет просить вас, какие функции включают в расширении .

В нашем случае, Markticle делатьнесколько вещей:

1. Добавить иконку рядом с адресной строкой .
2. Запуск на каждой странице, которая открывается пользователю .
3. Запустить код в фоновом режиме для подключения текущую страницу в расширении для того, чтобы сохранить данные .

Для первого фильма, мы выберем “браузер” как действие пользовательского интерфейса.Чтобы включить расширение для работы на каждой веб-страницы, мы флажок “сценариев содержания».Наконец, для того, чтобы фоновые процессы, чтобы бежать, мы будем использовать background.js файл .

Note: Другой способ создания расширение Chrome является использование онлайн Extensionizr ⁵ .Extensionizr является отличным инструментом, который поможет вам создать базовые расширения Chrome.Она имеет несколько вариантов конфигурации, все из которых могут быть включены с флажками.В конце концов, вы получите ZIP-файл, который включает в себя все файлы, которые вы должны будете начать работать на расширение.Недостатком является то, что вам нужно настроить Гранта и Бауэр вручную .

Папка Tree

Давайте посмотрим на сгенерированных файлов и папок у нас есть сейчас .

• app
• test
• bower.json
• package.json
• Gruntfile.js

Gruntfile.js, где мы настроим Грунт задач для обслуживания, строительство, испытания и упаковки наше расширение .

package.json и bower.json файлы Node.js и Бауэр JSON файлы, которые определяют зависимости Наше расширение на сторонних плагинов и библиотек .

test папка будет включать в себя все устройства и из конца в конец испытаний для расширения.Наконец, app папка самое интересное, потому что это, где ядро ​​нашего расширения будет находиться .

После переназначения некоторых папок и файлов, вот то, что наши app папка будет выглядеть так:

• icons
  • icon-16.png
  • icon-19.png
  • icon-38.png
  • icon-128.png
• images
• views
• scripts
  • inject.js
  • background.js
• styles
• main.css
• _locales
  • en
  • messages.json
• index.html
• manifest.json

Наиболее важный файл здесь manifest.json.Это на самом деле сердце расширения, и это определяет несколько вещей, в том числе следующие:

• Расположение каждого файла, используемого по расширению,
• Какой значок, чтобы представить, как кнопка “действия”,
• Разрешений, которые нужны вашему расширению
• Имя расширения .

Вот пример того, что manifest.json Файл должен выглядеть следующим образом:

{
  "name": "Markticle",
  "version": "1.0.0",
  "manifest_version": 2,
  "icons": {
    "16": "icons/icon-16.png",
    "38": "icons/icon-38.png",
    "128": "icons/icon-128.png"
  },

  "default_locale": "en",
  "background": {
    "scripts": [
      "scripts/helpers/storage.helper.js",
      "scripts/background.js"
    ]
  },

  "browser_action": {
    "default_icon": "icons/icon-19.png",
    "default_popup": "index.html"
  }
}

Первый Flight

Теперь у нас есть основной расширение, которое ничего не делает.Тем не менее, просто чтобы убедиться, что все на месте и работают должным образом, давайте проверим расширение во время выполнения .

Open Chrome и написать в адресбар:

chrome://extensions

Эта страница отображает информацию обо всех расширений, установленных в Вашем браузере .

“. Режим разработчика” в верхнем правом углу, вы увидите опцию для включения щелкните по нему .

Теперь нажмите кнопку “Загрузить распакованный расширение”, перейдите в папку, расширения вы создали, выберите app папку и нажмите

⁶

Теперь вы должны увидеть значок внутреннего абонента рядом с адресной строкой .

Установка Dependencies

Перед запуском приложения, мы должны установить некоторые зависимости плагинов Node.js.Мы сделаем это, запустив следующую команду:

npm install

Последнее, что нам нужно сделать, прежде чем погрузиться в код настроен зависимостей сторонних библиотек, которые мы собираемся использовать.Мы делаем это в bower.json файла:

{
  "name": "Markticle",
  "version": "1.0.0",
    "dependencies": {
      "angular": "1.2.6",
      "jquery": "2.0.3",
      "normalize.scss": "3.0.0"
    },

  "devDependencies": {}
}

Я выбрал три библиотеки для этого проекта: AngularJS, JQuery и Normalize.css.Чтобы установить это, выполните следующую команду:

bower install

Development

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

Первая часть будет всплывающее окно, которое открывается при нажатии пользователем значка внутреннего абонента.Всплывающее окно Markticle будет представить список закладок (т.е. веб-сайтов), которые пользователь сохранил .

Вторая часть соединяет действия пользователя к самой расширения.Каждый раз, когда пользователь выполняет определенное действие на странице, расширение должно сохранить URL и название текущей вкладке (так что мы знаем, что для отображения во всплывающем) .

Первая часть очень проста.Мы будем использовать классическую AngularJS код развивать его .

Давайте начнем с добавления следующую структуру файла в app/scripts Папка .

• scripts
  • controllers
    • main.controller.js
  • directives
    • main.directive.js
  • helpers
  • storage.helper.js
  • services
    • storage.service.js
  • app.js
  • inject.js
  • background.js

В app.js файла, мы добавим следующий код, который будет определять основной модуль нашего приложения в:

angular.module('markticle', []);

Теперь давайте добавим некоторые основные код на index.html файла:

<!DOCTYPE HTML>
<html>
  <head>
    <link href="styles/main.css" rel="stylesheet">
  </head>
  <body ng-app="markticle">
    <div id="main_wrapper">Sample</div>
    
    <script src="bower_components/jquery/jquery.min.js">
    <script src="bower_components/angular/angular.min.js">

    
    <script src="scripts/app.js">
    <script src="scripts/controllers/main.controller.js">
    <script src="scripts/directives/main.directive.js">
  </body>
</html>

Что мы сделали здесь очень проста:

• Определить глобальный модуль AngularJS имени markticle,
• Добавить один элемент DIV с текстом образца,
• Включать в себя переченьскрипта файлы, которые мы собираемся использовать .

Теперь давайте расширим DIV элемент, который мы создали .

<div id="main_wrapper" ng-controller="MainController">
  <header>
  <h1>My Marks</h1>
</header>
<section id="my_marks"></section>
</div>

Опять же, ничего особенного здесь — мы только что создали контроллер AngularJS имени MainController и добавил header и section теги для предстоящего содержания .

В app/scripts/controllers/main.controller.js файл, давайте создадим новый контроллер AngularJS:

angular.module('markticle').controller('MainController', function ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


 		
		
				
		
				

			  Главная   →  Программирование  → 17.11.2014  by  coding.smashingmagazine.com