Рубрики
Без рубрики

Создание расширения Chrome с использованием React.js, брокколи, CoffeeScript и Sass (CSS)

React – это отличный новый способ написать интерфейс вашего приложения. Этот учебник покажет вам, как использовать React, чтобы добавить несколько интерфейсов на вершину текущего веб-сайта через Chrome расширение.

Автор оригинала: George Muresan.

React – это отличный новый способ написать интерфейс вашего приложения. Это позволяет вам отделить каждый компонент вашего интерфейса на отдельный класс, что снижает сложность, которую вам нужно беспокоиться в любое время. Вы можете свободно вносить изменения в один компонент без необходимости беспокоиться о том, как это повлияет на любую другую часть вашего сайта.

Большинство учебных пособий по реагированию фокусируются на начала с пустой веб-страницы на своем собственном веб-сайте и добавление собственного HTML-кода для создания пользовательского интерфейса. Сегодня я покажу вам, как использовать React, чтобы добавить несколько интерфейсов на вершину текущего веб-сайта. Мы собираемся сделать это, создав Chrome расширение , что является небольшой программной программой, которая может модифицировать и улучшать функциональные возможности браузера Chrome. После этого учебника вы должны быть в состоянии легко взять то, что вы узнали, и используете реагирование на создание расширений Firefox и Safari с небольшим модификацией.

Наше расширение будет работать на вершине Craigslist. Это позволит вам делать заметки о списках, которые вы просматривали, и просматривать эти заметки, когда вы просматриваете список. Вы можете взять завершенный проект на Github Отказ

Настройка проекта

Вы собираетесь захотеть создать новую папку для вашего проекта. Для этого учебника я буду использовать следующую структуру проекта

tutorial/
  app/
    coffee/
      craigslist_listing.coffee
    scss/
      craigslist_listing.scss
  res/
    manifest.json
  package.json
  Brocfile.js

Package.json.

Как и в случае любого реагирования проекта, мы будем использовать Package.json Файл Чтобы описать наш проект и управлять нашими внешними зависимостями. Давайте начнем с голого файла, а затем добавим наши зависимости после.

{
  "name": "tutorial",
  "description": "chrome extension",
  "version": "0.0.1",
  "author": "gmuresan",
  "license": "ISC",
  "main": "",
  "private": true,
  "scripts": {},
  "dependencies": {}
}

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

npm install --save-dev react react-dom

Так как мы будем использовать CoffeeScript и Jsx Для наших файлов React нам нужен способ преобразовать эти файлы в JavaScript, чтобы браузер может понять и запустить код. Для этого мы будем использовать Брокколи Отказ Чтобы установить брокколи, используйте следующие две команды в каталоге вашего проекта.

npm install -g broccoli-cli
npm install --save-dev broccoli

Теперь, когда Broccoli установлена, нам также необходимо добавить все библиотеки, которые Broccoli необходимо компилировать наши файлы CoffeeScript и SASS, а также упаковать наши файлы вместе, чтобы Chrome может установить расширение.

npm install --save-dev broccoli-sass broccoli-fast-browserify broccoli-merge-trees broccoli-funnel coffee-reactify broccoli-timepiece

Файл манифеста

Манифест – это сердце любого хромированного расширения. Это говорит хром “Вот что я есть, и вот что мне нужно работать”. Наш файл будет расположен в res/mainest.json Отказ

{
    "manifest_version": 2,

    "name": "Craigslist Notes Extension",
    "description": "This Extension will allow you to write notes about different Craigslist listings and view those notes on the page",
    "version": "1.0",

    "permissions": [
      "activeTab"
    ],

    "content_scripts": [
        {
            "matches": ["*://*.craigslist.org/*.html"],
            "css": ["craigslist_listing.css"],
            "js": ["craigslist_listing.js"]
        }
    ]
}
  • Разрешения Свойство скажет Chrome, что наше расширение необходимо запускать свои скрипты на текущей активной вкладке в Chrome.
  • Content__Scripts Свойство скажет Chrome, что когда URL-адрес текущей страницы соответствует определенному шаблону, то мы хотим ввести определенные файлы JavaScript и HTML. В этом случае, когда URL является списком Craigslist, то мы хотим ввести наши craigslist_listing.css и craigslist_listing.js файлы.

Создание проекта с брокколи

Мы собираемся использовать Brocfile.js, чтобы сказать брокколи, как мы хотим, чтобы наш проект был построен. Брокколи будет компилировать наши файлы SASS в CSS, он возьмет наши файлы CJSX и преобразует их в обычные файлы CoffeeScript, а затем превращает эти файлы CoffeeScript в файлы JavaScript, и, наконец, он будет скопировать эти компиляционные файлы вместе с любыми статическими файлами, которые мы имеем в Наш выходной каталог.

// Import some Broccoli plugins
var compileSass = require('broccoli-sass');
var mergeTrees = require('broccoli-merge-trees');
var Funnel = require('broccoli-funnel');
var browserify = require('broccoli-fast-browserify')

// Specify the Sass and Coffeescript directories
var sassDir = 'app/scss';
var coffeeDir = 'app/coffee';
var manifest = 'manifest.json';
var resources = 'res'

// Tell Broccoli how we want the assets to be compiled
var clListingStyle = compileSass([sassDir], 'craigslist_listing.scss', 'craigslist_listing.css');

var scripts = browserify(coffeeDir, {
    bundles: {
        "load_craigslist_listing.js": {
            transform: [
                require('coffee-reactify')
            ],
            entryPoints: ['load_craigslist_listing.coffee']
        },
        "load_craigslist.js": {
            transform: [
                require('coffee-reactify')
            ],
            entryPoints: ['load_craigslist.coffee']
        }
    }
});

var resourceFiles = new Funnel(resources, {
    //destDir: resources
});

// Merge the compiled styles and scripts into one output directory.
module.exports = mergeTrees([clListingStyle, scripts, resourceFiles]);

Содержание скриптов

Теперь мы собираемся создать наши файлы CoffeeScript и Sass, которые содержат фактические функциональные возможности нашего расширения Chrome. Первый craigslist_listing.coffee :

ReactDOM = require 'react-dom'
React = require 'react'

CLNotes = React.createClass({
  displayName: 'CLNotes'
  getInitialState: ->
    notes: []

  render: ->
    

      
      
    


  saveNote: (note) ->
    notes = @state.notes
    notes.push(note)
    @setState
      notes: notes
})

NoteInput = React.createClass({
  displayName: 'NoteInput'
  getInitialState: ->
    note: ''

  render: ->
    

      
      
    


  noteChanged: (event) ->
    note = event.target.value
    @setState
      note: note

  saveNote: ->
    @props.saveNote(@state.note)
    @setState
      note: ''
})

NotesDisplay = React.createClass({
  displayName: 'NotesDisplay'

  render: ->
    

      {
        @props.notes.map (note, i) ->
          

            {note}
          

      }
    

})

# Here we find the 'mapAndAttr' div, we insert our own div as one of it's children,
# then we render our React component inside the new div
attrsDiv = window.document.getElementsByClassName('mapAndAttrs')?[0]
if attrsDiv
  notesDiv = document.createElement('div')
  notesDiv.id='clNotes'
  attrsDiv.appendChild(notesDiv)

  ReactDOM.render(
    
    document.getElementById('clNotes')
  )

Мы начинаем с нашим верхним уровнем реагировать компонент «CLNETES». Это содержит два дочерних компонента, один для отображения наших заметок и один для ввода новых заметок. Далее приходите наши входные и отображаемые компоненты и логика для сохранения нот и отображения всех наших текущих заметок.

В нижней части файла после компонентов реагирования у нас есть код, который выполняется, когда страница загружена. Здесь мы вставляем новый Div внутри страницы списка, а затем мы визуализируем наш компонент React Intover в этом новом Div.

Наше craigslist_listing.scsss Файл очень прост. Мы просто добавим некоторую стайлинг, чтобы сделать фон серого, а установить размеры наших компонентов.

#clNotes {
  width: 300px;
  height: 300px;
  background-color: lightgrey;
  padding:15px;
}

#notesDisplay {
  width:270px;
  height: 230px;
  background-color: white;
  overflow-y: scroll;
}

Установка и запуск нашего хромированного расширения

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

broccoli-timepiece dist/

Эта команда будет составлять наш проект в Dist/ каталог, и он будет автоматически перекомпилировать проект, если вы внесите какие-либо будущие изменения.

После этой команды преуспевает, откройте Chrome и перейдите к Chrome://Расширения Отказ В правом верхнем углу убедитесь, что «Режим разработчика» выбран, затем нажмите «Загрузить распакованный расширение …». Перейти к нашему Dist/ Папка, выберите ее и нажмите ОК.

Теперь откройте список Craigslist (например, https://sfbay.craigslist.org/scz/rue/5295933277.html ). Вы должны увидеть серый ящик справа от изображений, где вы можете ввести текст, а затем отображать в списке, нажав кнопку Сохранить.

Демонстрация

Следующие шаги

Это расширение сейчас не очень полезно. Примечания не сохранят, если вы перемещаетесь от страницы. Как дальнейшее обучение, попробуйте сохранить свои заметки на сервере, например Разбор и загрузить их на страницу, когда страница загружает.

Если вы собираетесь создать большее расширение со многими компонентами реагирования, я бы также смотрел в механизм хранения состояния, такими как Redux Отказ

Читайте ещё по теме: