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

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

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

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

²

До Knowledge

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

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

Scaffolding

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

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

Note: Если вы до сих пор не были Йомен установлен на вашем компьютере, начать после “ Получение Started __62 | | 4__8 ” учебник .

npm install -g generator-chrome-extension

mkdir my-extension

yo chrome-extension

Note: Еще один способ создать расширение Chrome, чтобы использовать онлайн Extensionizr __18 | | 5__17 .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

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

Открыть Chrome и написать это в адресной строке:

chrome://extensions

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

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

Теперь нажмите кнопку “Load распакованный расширение”, перейдите в папку, расширения вы создали, выберите 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 87 ~ и | теги для предстоящего содержания .

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

angular.module('mar ... 

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


 		
		
				
		
				

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