Разное

Как сделать расширение для google chrome: Как создать расширение для Chrome

Содержание

Как создать расширение для Chrome

Расширения и плагины — полезные дополнения к уже существующим функциям на сайте и в браузере. С их помощью можно записывать аудио и видео с экрана, включать поиск ошибок, а также многое другое.
В этой статье мы рассмотрим создание самого простого расширения — запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для google Chrome.

Желательно знать HTML, CSS и JS (если придётся расширить набор функций) на самом базовом уровне, чтобы понимать материал лучше, но в любом случае мы будем объяснять код.

В каждом расширении для Chrome должен быть файл manifest.json. Он служит только для описания функций приложения, общего описания, номера версии и разрешений. Более подробно вы сможете ознакомиться с этим файлом в блоге команды разработчиков Chrome.

Давайте же внесём свой вклад в развитие web

Здесь всё очень просто:

{
	"manifest_version": 2,
	"name": "Tproger Launcher",
	"description": "Запускатор представительств Tproger",
	"version": "1. 0.0",
	"icons": {"128": "icon_128.png"},
	"browser_action": {
		"default_icon": "icon.png",
		"default_popup": "popup.html"
	},
	"permissions": ["activeTab"]
}

После того как мы описали наше расширение в файле manifest.json, можно благополучно переходить к следующему этапу, а именно к разметке.

Для начала давайте напишем базовый HTML-код:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">	
   <title>Tproger Media Quick Launcher</title>
   <!--ссылаемся на шрифты, используемые в документе-->
   <link href="https://fonts. googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
   <!--здесь мы ссылаемся на стили, которые будем использовать в документе, а именно стиль иконок-->
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEh4Sl0sibVcOQVnN"
    crossorigin="anonymous">
</head>
<body>

</body>
</html>

Не забывайте указывать кодировку, иначе не отобразятся кириллические буквы.

Перейдём ко второму блоку кода, а именно к тегу body и его содержимому.

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

<!--объяснение тега-->
<body>
  <!--контейнер, содержащий название, логотип и номер версии-->
  <div>
    <h2>
      <img src="images/tproger-logo. png"> Запускатор Tproger
      <span>(1.0.0)</span>
   </h2>
  </div>
  <!--Конец контейнера-->

Переходим к следующему контейнеру. Он содержит описание функций расширений.

<!--контейнер, содержащий описание функций расширения-->
  <div>
    <p>Быстрый доступ к контентным площадкам Типичного Программиста</p>
  </div>
  <!--Конец контейнера-->

Далее следует контейнер modal-icons, внутри которого ещё 5 контейнеров.

<!--контейнер, содержащий контейнеры с иконками-->
  <div>
    <div>
      <div>
        <!--target="_blank" — это служит для открытия новой вкладки при клике по иконке-->
        <a href="#" target="_blank">
          <i></i>
        </a>
      </div>
      <div>
        <a href="#" target="_blank">
          <i></i>
        </a>
      </div>
      <div>
        <a href="#" target="_blank">
          <i></i>
        </a>
      </div>
      <div>
        <a href="#" target="_blank">
          <i></i>
        </a>
      </div>
    </div>
  </div>

Для каждой иконки мы выделили отдельный контейнер с классом flex, чтобы знать, к каким элементам будем применять Flexbox.

Кроме того, мы указали названия иконок для каждого ресурса. Более детально со всеми доступными элементами можно ознакомиться на сайте Bootstrap.

Стили

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

<style>
    /* Модальная структура документа */
    /*общие настройки для всего документа*/
    html,
    body {
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      margin: 0;
      min-height: 180px;
      padding: 0;
      width: 380px;
    }
    /*задаём настройки для заголовков первого уровня*/
    h2 {
      font-family: 'Menlo', monospace;
      font-size: 22px;
      font-weight: 400;
      margin: 0;
      color: #2f5876;
    }
    a:link,
    a:visited {
      color: #000000;
      outline: 0;
      text-decoration: none;
    }
    /*задаём ширину картинки*/
    img {
      width: 30px; /*ширина изображений*/
    }
    . modal-header {
      align-items: center; /*выравнивание элементов по центру*/
      border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/
      height: 50px;
    }
    .modal-content {
      padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/
    }
    .modal-icons {
      border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/
      height: 50px;
      width: 100%;
    }
    .logo {
      padding: 16px; /*отступы со всех сторон*/
    }
    .logo-icon {
      vertical-align: text-bottom; /*выравнивание по нижней части текста*/
      margin-right: 12px; /*задётся отступ элементов от изображения*/
    }
    .version {
      color: #444;
      font-size: 18px;
    }

Основные настройки документа заданы, давайте перейдём к следующему фрагменту кода, в котором как раз и будет применён Flexbox, о котором шла речь в начале статьи.

.flex-container {
      display: flex; /*отображает контейнер в виде блочного элемента*/
      justify-content: space-between; /*равномерное выравнивание элементов*/
      padding: 10px 22px;
    }
    /*задаём настройки для контейнеров с иконками*/
    .flex {
      opacity: 1; /*параметр непрозрачности иконок*/
      width: 120px;
    }
    .flex:hover {
      opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/
    }
    .flex .fa {
      font-size: 40px;
      color: #2f5876;
    }
  </style>
  <!--конец объяснения блока со стилями-->

Мы постарались как можно подробнее объяснить в комментариях относительно сложные моменты. А сейчас нам нужно лишь загрузить наше расширение в браузер Chrome и оно будет работать, а если пройдёт модерацию, то появится в магазине расширений (плагинов).

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

<head>
   <meta charset="utf-8"> 
   <title>Tproger Media Quick Launcher</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEh4Sl0sibVcOQVnN"
    crossorigin="anonymous">
    <style type="text/css">
      /*здесь мы прописали стили*/
    </style>
  <!--конец объяснения блока со стилями-->
  <!--здесь ссылаемся на файл .js в нашей папке с кодом и изображениями-->
  <script src="popup.js"></script>
</head>

Проверка кода и публикация

Прежде чем опубликовать, проверьте ещё раз весь код. Если вы делали всё так, как мы, то у должно было получиться следующее:

<!DOCTYPE html>
<html>
<!--Начало первого блока объяснения кода-->
<head>
  <meta charset="utf-8">
  <title>Запускатор Tproger</title>
  <!--ссылаемся на шрифты, используемые в документе-->
  <link href="https://fonts. googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <!--здесь мы ссылаемся на стили, которые будем использовать в документе, а именно стиль иконок-->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEh4Sl0sibVcOQVnN"
    crossorigin="anonymous">
    <!--начало блока со стилями для страницы-->
  <style>
    /* Модальная структура документа */
    /*общие настройки для всего документа*/
    html,
    body {
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      margin: 0;
      min-height: 180px;
      padding: 0;
      width: 380px;
    }
    /*задаём настройки для заголовков первого уровня*/
    h2 {
      font-family: 'Menlo', monospace;
      font-size: 22px;
      font-weight: 400;
      margin: 0;
      color: #2f5876;
    }
    a:link,
    a:visited {
      color: #000000;
      outline: 0;
      text-decoration: none;
    }
    /*задаём ширину картинки*/
    img {
      width: 30px; /*ширина изображений*/
    }
    . modal-header {
      align-items: center; /*выравнивание элементов по центру*/
      border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/
      height: 50px;
    }
    .modal-content {
      padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/
    }
    .modal-icons {
      border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/
      height: 50px;
      width: 100%;
    }
    .logo {
      padding: 16px; /*отступы со всех сторон*/
    }
    .logo-icon {
      vertical-align: text-bottom; /*выравнивание по нижней части текста*/
      margin-right: 12px; /*задётся отступ элементов от изображения*/
    }
    .version {
      color: #444;
      font-size: 18px;
    }
    .flex-container {
      display: flex; /*отображает контейнер в виде блочного элемента*/
      justify-content: space-between; /*равномерное выравнивание элементов*/
      padding: 10px 22px;
    }
    /*задаём настройки для контейнеров с иконками*/
    . flex {
      opacity: 1; /*параметр непрозрачности иконок*/
      width: 120px;
    }
    .flex:hover {
      opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/
    }
    .flex .fa {
      font-size: 40px;
      color: #2f5876;
    }
  </style>
  <!--конец объяснения блока со стилями-->
  <script src="popup.js"></script>
</head>
<!--объяснение тега <body>-->
<body>
  <!--контейнер, содержащий название, логотип и номер версии-->
  <div>
    <h2>
      <img src="images/tproger-logo.ico">Запускатор Tproger
      <span>(1.0.0)</span>
    </h2>
  </div>
  <!--Конец контейнера-->
  <!--контейнер, содержащий описание функций расширения-->
  <div>
    <p>Быстрый доступ к контентным площадкам Типичного Программиста</p>
  </div>
  <!--Конец контейнера-->
  <!--контейнер, содержащий контейнеры с иконками-->
  <div>
    <div>
      <div>
        <!--target="_blank" — это служит для открытия новой влкадки при клике по иконке-->
        <a href="#" target="_blank">
          <i></i>
        </a>
      </div>
      <div>
        <a href="#" target="_blank">
          <i></i>
        </a>
      </div>
      <div>
        <a href="#" target="_blank">
          <i></i>
        </a>
      </div>
      <div>
        <a href="#" target="_blank">
          <i></i>
        </a>
      </div>
    </div>
  </div>
</body>

</html>

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

 

И далее следуем инструкциям на скриншотах ниже.

Для загрузки расширения в магазин нам нужно зайти в меню, навести мышку на «дополнительные настройки», а затем выбрать «расширения» или ввести в адресной строке chrome://extensions/.

Далее нажимаем на «загрузить распакованное расширение» и выбираем папку с файлами.

 

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

Надеемся, что всё работает правильно и вы понимаете структуру расширений для Chrome.

Основано на видео с канала «Traversy Media»

Google Chrome Extensions — Часть 1. Архитектура | by Aleks Zinevych

Что такое Chrome Extension? Это маленькая программа, которая модифицирует и дополняет функциональность браузера Google Chrome. Для создания полноценного расширения вам понадобиться знание HTML, CSS, JavaScript. После написания, файлы пакуются в специальный файл с расширением .crx, который собой являет zip архив. В таком виде пользователь сможет установить расширение. За счет того что этот пакет содержит все необходимые файлы, chrome расширение не зависит от ресурсов из интернета и способен корректно работать даже в оффлайн режиме.

Любое chrome расширение может иметь такую структуру:

Пример структуры расширения

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

Манифест — главный файл в chrome расширении, поскольку здесь информация о доступах которые нужны, о подключаемых файлах, настройки безопасности и многое другое. Например:

  • Manifest_version — Версия манифест файла
  • Name — название расширения
  • Description — описание расширения
  • Version — версия расширения
  • Permissions — массив с названиями доступов, которые необходимы для корректной работы расширения, например без пермишина tabs вы не сможете работать с вкладками браузера
  • Content_scripts — массив файлов, которые будут подключены как контент скрипты
  • Background — описание файла или файлов, которые будут выполнять роль background скрипта и страницы
  • Web_accessible_resources — набор файлов, которые имеют открытый доступ извне
  • Browser_action — настройка соответствующей кнопки, в тулбаре
  • Icons — списки иконок по стандартным размерам 16 48 и 128.

Если взять определение с официальной документации — невидимая страница, которая содержит основную логику расширения. Главной особенностью background страницы есть то, что она запускается и выполняет некую работу в фоновом режиме, как только запускается браузер и держится в оперативной памяти как фоновый процесс на протяжении сессии. Используя комбинацию Shift + Esc Вы можете просмотреть список задач, которые выполняются внутри браузера Google Chrome. Когда установлено много расширений, список задач этом списке также большой. Они занимают часть памяти и возможно других ресурсов, но не выполняют никаких функций, так как непосредственно само расширение не запущено, а в списке вы видите background страницу конкретного расширения.

Background page в работе

Чтобы оптимизировать использование ресурсов, в 2012 году была разработана концепция ивент страниц (Event Pages). Она выполняет те же функции что и бэкграунд страница, но призвана решить проблему производительности и ресурсов, которые используются иррационально. Главное отличие этого подхода — вместо непрерывной работы в фоновом режиме, ивент страница запускается только тогда, когда нужно — например чтобы обработать конкретное событие. После чего выгружается, освобождая память до того момента пока конкретное событие не сработает в следующий раз. В плане кода, разницы никакой между этими двумя подходами нет, а единственное что нужно, указать в manifest.json файле это корректное значение проперти persistent. По умолчанию это значение будет стоять в true для стандартных background страниц и false для ивент страниц.

Это обязательные элементы Chrome Extension-а, теперь давайте перейдем к опциональным.

Контент скрипты — это javascript файлы или код, которые выполняються не в отдельном фоновом процессе (как бекграунд скрипты) а в контексте Веб страницы. Контент скрипты используют в ограниченном виде Chrome API. Но при этом они изолированные и не могут использовать, как функции и переменные которые объявлены, например на бекграунд странице так и переменные, функции и тд. со скриптов находящихся на веб странице.

Пример расширения с использованием контент скриптов

Полноценный доступ есть только через к DOM дереву страницы. С контент скрипта вы можете инициировать ивенты, изменять DOM. Даже можете добавлять script тег в страницу и подключать нужные файлы.

Content Security Policy

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

По умолчанию, если использовать манифест 2 версии то в расширении будут такие ограничения:

  • Запрещено использовать eval и схожие функции
  • Inline джаваскрипт выполняться не будет
  • Возможность загружать только локальные скрипты и ресурсы

Эти правила можно отменить или облегчить при необходимости. Например, можно добавить настройки хоста с которого вы хотите извлекать определенные ресурсы или скрипты, но все еще запрещено использовать протокол HTTP только HTTPS.

Также можно разрешить использование eval функции.

Разрешить нельзя использование только инлайн скриптов.

Разрабатывая хром расширения, получить доступ к методам и возможностям браузера можно с помощью специального Chrome Javascript API’s. Большинство методов асинхронные, о чем нужно помнить разрабатывая расширение.

Малый список доступных API’sё

Так как background страница в другой области видимости чем например контент скрипт который выполняется в контексте веб-страницы, нужен какой то способ коммуникации между Content Scripts и Background scripts.

Эту возможность нам и предоставляет API. Chrome Javascript API вводит концепцию Message Passing с помощью которой и происходит коммуникация. Background страница может подписываться на сообщения которые пришли из content script-а и наоборот, кроме того давать ответ в том же канале. API дает возможность работать с короткими запросами похожими больше на события и долговременными (аналог полинга).

Пример архитектуры стандартного Chrome расширения

Два описанных метода коммуникации в Chrome расширениях используют для background страниц или отдельных окон расширения с content script-ами и наоборот. Content scripts выполняються в своей песочнице и это вызывает проблему с доступом к странице и области видимости скриптов.

К сожалению Chrome браузер не предоставляет нормальных способов для решения этой проблемы. Непосредственно с контент скрипта, доступиться к функциям или переменной страницы в данный момент невозможно. Но для этого можно использовать Web Accessible Resources.

Как я уже отмечал ранее, с content script-а мы можем модифицировать DOM, а именно создать например новый тег script, в атрибуте src задать ему путь к скрипту который открыт для внешнего использования, и добавить этот тег в DOM.

Таким способом подключать можно только те которые описаны в массиве web_accessible_resources в manifest.json файле.

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

Архитектура расширения с использованием web_accessible_resources

Расширения для Google Chrome.

Пишем свой AdBlock

В статье мы разработаем веб расширение для браузера Google Chrome. Также мы поговорим на тему сферы веб плагинов. Что с ней сегодня и есть ли у неё какие-либо перспективы?

Информация о веб-расширениях

Сперва немного фактов. Понятие расширение для веб-браузера появилось достаточно давно. В 1999 году в браузере Internet Explorer появилась возможность работы с расширениями. В Opera, Google Chrome и Safari все это появилось позже – в 2009 году.

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

Спустя недолгое время всем стало понятно, что для компании Google расширения вовсе не в приоритете. Обидно это осознавать, но Google ужасно относится к своим маркетплейсам.

Сегодня плагины продолжают разрабатывать различные крупные и не только компании. В большинстве случаев они не делают это с целью заработать. Расширения создают лишь с целью повысить качество сервиса некого веб-продукта, добавив необходимые услуги сразу в расширение.

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

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

Разработка расширения

Для описания расширения необходимо создать файл «manifest.json». Приме файла ниже:

{
	"manifest_version": 2,
	"name": "Название",
	"description": "Описание расширения",
	"version": "0.0.1",
	"author": "Автор",
	"browser_action": {
		"default_title": "Подсказка при наведении на плагин",
		"default_icon": "icon.png",
		"default_popup": "index.html"
	},
	"content_scripts": [
		{
			"matches": [
				"<all_urls>"
			],
			"js": ["jquery. min.js", "content.js", "changeBg.js"]
		}
	],
	"permissions": ["activeTab"]
}

В манифесте описываются основные характеристики вашего расширения. В нашем случае указано следующее:

  • описание плагина: название, автор, версия;
  • иконка плагина;
  • файл «index.html», что описывает дизайн пользовательского интерфейса;
  • плагин будет работать на всех страницах и будут подключены 3 JavaScript скрипта;
  • разрешение на использованием вкладок – activeTab.

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

Вы можете скачать готовый проект плагина по этой ссылке, а также ниже представлено видео с детальной реализацией необходимого плагина: 

Использование расширения Zoom для Chrome – Zoom Центр справки и поддержки

Обзор

Zoom предлагает различные способы планирования конференций. 

Расширение Zoom Scheduler для Chrome Extension позволяет участникам планировать конференции Zoom прямо в Google Календаре. С помощью этого расширения можно начать мгновенную конференцию или запланировать будущую конференцию. Ссылка на присоединение к конференции и подробные сведения отправляются в приглашении Google Календаря, чтобы участник мог присоединиться к ней одним щелчком по ссылке. 

В этой статье рассматриваются следующие вопросы: 

Необходимые условия

  • Google Chrome
  • Расширение Chrome для Zoom из интернет-магазина Google Chrome
  • Учетная запись Zoom для Google, рабочий адрес электронной почты и пароль, или же имя пользователя для единого входа (SSO)
  • Использование Google Календаря для планирования конференций

Установка расширения

Прежде чем начать планирование конференций с помощью расширения Chrome или напрямую в Google Календаре, нужно установить расширение Zoom Scheduler из интернет-магазина Сhrome. Нажмите Добавить в Chrome в правом верхнем углу окна расширения.

 

Использование расширения

  1. Установленное расширение Chrome для Zoom отображается в виде значка рядом с адресной строкой Chrome. Нажатие на кнопку Zoom откроет расширение для Chrome.
     
  2. Войдите в учетную запись Zoom. 
  3. После входа вам будут доступны дополнительные опции в расширении для Chrome. 
    • Schedule a Meeting («Запланировать конференцию»): нажмите «Запланировать конференцию», чтобы открыть новое событие в Google Календаре. 
    • Start a Meeting («Начать конференцию»): наведите курсор мыши на пункт «Начать конференцию», чтобы начать конференцию с поддержкой видео или без поддержки видео. Подробнее о мгновенных конференциях.. 
    • Name/email address («Имя/адрес электронной почты»): нажмите на ваше имя или адрес электронной почты, чтобы открыть вашу страницу профиля в Zoom.
    • Значок с шестеренкой: щелкните по значку с шестеренкой, чтобы открыть настройки конференции Zoom.

Планирование конференции с помощью Google Календаря

Любой Google Календарь можно настроить для создания приглашений в конференцию Zoom.

  1. Создайте новое календарное событие или измените имеющееся. 
  2. Откройте дополнительные параметры события.
    • В новом календарном событии нажмите Дополнительные параметры.
    • В имеющемся календарном событии щелкните по значку с карандашом.
  3. Выберите Make it a Zoom Meeting («Сделать конференцией Zoom»). 
  4. В результате будет создана конференция Zoom, сведения о которой будут внесены в описание. 
  5. Нажмите Сохранить.

Примечание: если вы повторно планируете конференцию Zoom из Google Календаря, то измените календарную запись, а также дату и время конференции. Не перетаскивайте календарное событие и не копируйте сведения о конференции в другую календарную запись.

Возможности планирования с помощью расширения для Chrome

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

  • Host Video («Демонстрировать видео»): выберите этот пункт, если вы хотите демонстрировать видео после присоединения к конференции. Даже если этот параметр отключен, организатор все равно сможет включить трансляцию видео. 
  • Participant Video (Видео от участников): выберите этот пункт, если вы хотите включить или отключить видеотрансляции участников, когда они присоединяются к конференции. Даже если этот параметр отключен, участники все равно смогут запустить свою видеотрансляцию. 
  • Audio  («Звук»): разрешите пользователям звонить только по телефону, только через компьютерный звук, по телефону и через компьютерный звук (оба варианта) или с помощью Стороннего аудио (если это разрешено для вашей учетной записи). 
  • Require Meeting Password  («Требовать пароль конференции»): здесь можно выбрать и ввести пароль к конференции. Участники должны будут ввести его для входа в запланированную конференцию.
  • Enable join before host («Разрешить присоединение до организатора»): разрешить участникам присоединяться к конференции без вас или до того, как вы присоединитесь. Эта конференция завершится через 40 минут для подписчиков с тарифным планом «Базовый».
  • Отключить звук участника при входе: если присоединение раньше ведущего не включено, эта настройка заглушит звук всех участников, которые присоединяются к конференции.
  • Use Personal Meeting ID (Использовать персональный идентификатор конференции): установите этот флажок, если вы хотите использовать ваш Personal Meeting ID («Персональный идентификатор конференции»). Если этот флажок не установлен, будет создан случайный уникальный идентификатор конференции.
  • Add watermark that identifies the viewing participant («Добавить водяной знак, идентифицирующий участника при просмотре»): добавлять водяной знак к демонстрируемому контенту в ходе конференции. Подробнее о добавлении водяных знаков.
  • Record the meeting automatically («Автоматическая запись конференции»): установите этот флажок, чтобы автоматически записать конференцию. Выберите этот параметр, если хотите записать конференцию локально (на компьютер) или в облако (zoom.us/recording). 
  • List in the Public Event List («Включить в список публичных событий»): добавить эту конференцию в ваш список публичных событий (если включен для вашей учетной записи). Подробнее о списке публичных событий.
  • Schedule For («Для кого запланировать»): при наличии полномочий планирования от имени другого пользователя вы можете выбрать из раскрывающегося списка, от имени кого нужно запланировать конференцию. Подробнее о полномочиях планирования. 
  • Alternative Hosts («Альтернативные организаторы»): введите адрес электронной почты другого пользователя Zoom, который использует тарифный план «Лицензированный» и указан в вашей учетной записи, чтобы разрешить ему начинать конференцию в ваше отсутствие. См. подробнее об альтернативном организаторе .

Показывать параметры планирования каждый раз

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

  1. Щелкните по значку расширения рядом с адресной строкой.
  2. Щелкните по значку с шестеренкой.
  3. Выберите один из следующих вариантов. 
    • Require Meeting Password (Требовать пароль конференции): вводить пароль вручную каждый раз
    • Schedule for (Для кого запланировать): позвольте мне выбирать каждый раз
    • Alternative host («Альтернативный организатор»): позвольте мне выбирать каждый раз
  4. Теперь параметры планирования будут появлятся при каждом выборе пункта Make it a Zoom Meeting («Сделать конференцией Zoom»)

Время сеанса истекло

Если вы получили сообщение об истечении времени сеанса («Ваш сеанс доступа к расширению Zoom Chrome истек. »), то вам нужно войти в расширение Chrome заново.

  1. Щелкните по значку расширения Zoom рядом с адресной строкой.
  2. Войдите в учетную запись Zoom.

 

Как создать плагин Chrome с помощью Python 

Расширение Google Chrome, созданное с помощью Python (бессерверный, метод B). _ (click to zoom)_Google Chrome плагин написан на HTML, JavaScript и CSS. Если вы никогда не писали плагин Chrome, я предлагаю ознакомиться с документацией по расширениям Chrome.

Вы можете использовать Python вместо JavaScript, и в этом руководстве мы покажем вам, как это сделать.

Создать подключаемый модуль Google Chrome

Для начала нам нужно создать файл манифеста: manifest.json.

{
  "manifest_version": 2,

  "name": "Python Chrome Plugin",
  "description": "This extension runs Python code.",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

Создайте файл с именем popup. html

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer. chrome.com/extensions/contentSecurityPolicy
     -->
    <script src="popup.js"></script>
  </head>
  <body>
    <div></div>
    <img hidden>
  </body>
</html>

Наконец, получите иконку и сохраните ее как icon.png. Откройте chrome://extensions и нажмите режим разработчика. Нажмите «загрузить распакованное расширение», выберите свой каталог и нажмите ок.

Добавление Python в расширение Chrome

У нас есть два варианта добавления Python в расширение Chrome:

  1. Метод A: включить Brython в iframe (требуется сервер)
  2. Метод B: скомпилируйте Python в Javascript с помощью Rapydscript (лучше всего, бессерверное, чистое расширение).

Метод A: Python (Brython) в iframe

Теперь, когда у вас есть основы, мы можем добавить Python в код. Для запуска Python в браузере у вас есть несколько вариантов, включая Brython и emcascripten. Мы решили попробовать Brython. Мы запустим сценарий Brython с сервера. Измените popup.html на:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="iso-8859-1">
<style>
body {    
    margin: 0 !important;
    padding: 0 !important;
    width: 800;
}

#frame {
    overflow: hidden;
    width:790;
    height:324;
}
</style>
</head>
<body onLoad="">
<iframe src=http://brython. info/console.html seamless="seamless" scrolling="no"></iframe>
</body>
</html>

После перезапуска плагина у вас будет интерпретатор Python (Brython) внутри вашего Google Chrome.

Запуск собственных скриптов

Чтобы запустить собственный скрипт, просто измените URL-адрес во фрейме popup.html:

<iframe src="BRYTHON SCRIPT URL" seamless="seamless" scrolling="no"></iframe>

Скрипт должен работать на вашем собственном сервере.  Вы можете запустить любой сценарий Brython из Интернета. Используя Brython, вы можете просто ввести код Python внутри тегов скрипта.

Метод Б. Скомпилируйте Python в Javascript.&nbsp;(без сервера, чистое расширение)

Есть несколько инструментов для компиляции Python в Javascript. Rapydscript работает нормально, Pyjs плохо работает с хромом (требуется специальный параметр при запуске).

Установите Rapydscript с помощью:

sudo apt-get install npm
sudo ln -s /usr/bin/nodejs /usr/bin/node
sudo npm install rapydscript

Измените файл /src/hello. py:

Example Python script 
# (for rapydscript, a python to javascript compiler)

#def doHelloMessage():
#    alert('hello')
#doHelloMessage()

# modify html page
document.getElementById("result").innerHTML = 'Compiled Python script in Chrome' 

# write into log 
console.log('hello from python')

Выполните:

Вы можете найти свое расширение в /compiledpythonextension/. Загрузите его в хроме как распакованное расширение и посмотрите, как оно работает 🙂

Заключение:

Плагины Chrome создаются с использованием HTML, JavaScript и CSS.  Мы можем использовать Python для создания обычных расширений Chrome с помощью компилятора Python в Javascript (Rapydscript).

Грядет геноцид расширений для Chrome. Вводятся новые жесткие правила для их разработчиков


, Текст: Эльяс Касми


Google внедрит новые правила магазина расширений Chrome web store, которые позволят ему удалять вредоносные, бесполезные или спамерские расширения, а также клоны ранее выпущенных расширений. Изменения направлены на обеспечение безопасности пользователей, и в итоге из магазина могут пропасть тысячи расширений.

Очередные нововведения Google

Интернет-гигант Google готовится провести массовую зачистку магазина расширений для браузера Chrome (Chrome web store). В результате этих действий из магазина могут исчезнуть тысячи расширений, пишет ресурс ZDNet.

Геноцид будет осуществлен на фоне ввода новых правил магазина расширений, которые вступят в силу 27 августа 2020 г. Изгнанию из магазина подвергнутся лишь те расширения, которые могут нести в себе опасность для пользователя, в том числе содержащие в себе вредоносное ПО или мешающие работать в браузере путем постоянного спама через уведомления.

Другими словами, Google стремится очистить свой магазин от «мусорных» расширений. От разработчиков требуется «починить» свои расширения для соответствия их новым требованиям. На момент публикации материала число расширений для Chrome превышало 200 тыс., и пока неизвестно, насколько меньше их станет после 27 августа 2020 г.

Полный список изменений

В общей сложности Google внедрит шесть основных правил, которые позволят ей очистить магазин расширений. Первым в списке числится запрет для разработчиков на публикацию в Chrome web store двух и более расширений, представляющих собой дубликаты ранее выпущенных расширений.

Число расширений для Chrome может резко сократиться

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

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

Еще одно правило гласит, что расширения, созданные исключительно для запуска сторонних программ или открытия веб-страниц в браузере и не содержащие других функций, тоже нельзя будет размещать в Chrome web store. Наконец, шестое правило подразумевает, что под запрет попадут и расширения, занимающиеся рассылкой спама, в том числе через уведомления в браузере.

Аналогичные изменения Google внедрила и в магазине приложений для устройств на базе Android – Google Play, но в нем эти правила заработали, как сообщал CNews, на семь лет раньше, в сентябре 2013 г. На устранение несоответствий новым требованиям разработчикам было дано всего 30 дней, и Google оставила за собой право удалять приложения, нарушающие новые правила.

Зачем нужны новые правила

К вводу новых правил в Chrome web store Google побудил тот факт, что магазин стал Меккой для разного рода мошенников и спамеров. В своем официальном блоге интернет-гигант подчеркнул, что вредоносные и нефункциональные расширения для Chrome в последнее время стали множиться, как и расширения-дубликаты, которые лишь с виду разные, а на деле имеют полностью идентичный список возможностей.

Виртуализация приходит в SAN

Интеграция

Дополнительно Google хочет отучить разработчиков продвигать свои продукты не совсем легальными средствами. Им будет запрещено накручивать рейтинги своих расширений и количество скачиваний, а также публиковать фальшивые отзывы, поскольку все это вводит пользователей в заблуждение и заставляет их скачивать ПО, которое на деле может оказаться бесполезным для них. В случае установления факта использования нечестных методов продвижения расширение будет удалено из магазина.

Расширения для Chrome можно установить и на Opera

Следует отметить, что установить расширение для Chrome можно не только на фирменный браузер Google. Такая опция по умолчанию есть, к примеру, в браузере Vivaldi, а в фирменном магазине расширений для Opera присутствует расширение Install Chrome Extensions, позволяющее устанавливать расширения напрямую из Chrome web store.

Предыдущие зачистки расширений

Google регулярно меняет правила размещения расширений для Chrome в своем интернет-магазине. Так, в июле 2019 г. она потребовала от разработчиков внести изменения в политику конфиденциальности своих расширений.

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

Вводя новые правила, Google стремится сделать свой браузер более безопасным

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

В середине апреля 2019 г. Google удалил из Chrome web store около 50 опасных расширений, которые разработчики выдавали за популярные криптовалютные кошельки Ledger, Trezor, Jaxx, Electrum, MyEtherWallet, MetaMask, Exodus и KeepKey. Они похищали ключи от пользовательских криптокошельков и другие конфиденциальные данные, и все они были загружены одним человеком или одной группой лиц.

Расширение Chrome в python? Ru Python

Я хотел бы создать расширение хром Google. В частности, я хотел бы создать упакованное приложение, но не размещенное приложение. Правильно ли я считаю, что это ограничивает меня JavaScript (и HTML / CSS)?

Моя проблема в том, что мне нужно сделать сложную математику (разложение по сингулярным значениям, факторный анализ), и я не хочу писать алгоритмы для этого в javascript. У Python уже есть библиотеки для функций, которые мне нужны (SciPy), но я не могу найти никаких указаний на то, что я могу сделать расширение Chrome с помощью python.

Это верно? Есть ли у меня другие варианты?

В Chrome нет встроенного Python, но мне интересно, помогут ли вам Pajamas .

Хотя вы упомянули, что не хотите, чтобы это было размещенное приложение, но это один из типичных сценариев, в которых может работать размещенное приложение.

SciPy – это не пакет, который легко развернуть. Даже если вы пишете установленное приложение на основе SciPy, оно требует определенных усилий для развертывания этой зависимости. Веб-приложение может помочь здесь, когда вы ставите большую часть трудноразрешимых зависимостей на стороне сервера (что является одноразовым). И клиентская сторона может быть очень легкой.

Вы можете сделать стандартное расширение Google Chrome с помощью Python (без сервера) https://pythonspot.com/en/create-a-chrome-plugin-with-python/

Идея состоит в том, чтобы скомпилировать Python в Javascript (технически предварительный компилятор JS) с использованием Rapydscript . Затем включите сгенерированный скрипт в расширение Chrome. На вышеуказанном сайте есть zip-файл со всем содержимым внутри.

Я рекомендую использовать Rapydscript вместо Pajamas. Сценарий Python, скомпилированный с Rapydscript, работает как любой другой плагин Chrome.

Скрипты Pajamas не очень хорошо работают с Google Chrome (для запуска Chrome или сервера требуется специальный параметр).

Я пишу расширение с Flexx PyScript и очень люблю его. Вот обзор различных инструментов по сравнению с PyScript (не верьте этой статье, она написана разработчиками flexx :).

Начало работы — разработчики Chrome

Manifest V3 скоро будет запущен! См. Документацию по MV3 для получения дополнительной информации и подумайте о разработке вашего расширения в MV3.

Расширения состоят из разных, но связанных компонентов. Компоненты могут включать фоновые сценарии, сценарии содержимого, страницу параметров, элементы пользовательского интерфейса и различные файлы логики. Компоненты расширения создаются с помощью технологий веб-разработки: HTML, CSS и JavaScript. Компоненты расширения будут зависеть от его функциональности и могут не требовать всех параметров.

В этом руководстве будет создано расширение, позволяющее пользователю изменять цвет фона любой страницы на developer.chrome.com. Он будет использовать многие основные компоненты для вводной демонстрации их взаимосвязей.

Для начала создайте новый каталог для хранения файлов расширения.

Готовое расширение можно скачать здесь.

Создание манифеста #

Расширения начинаются с их манифеста. Создайте файл с именем manifest.json и включите следующий код или загрузите файл здесь.

  {
"name": "Пример начала работы",
"version": "1.0",
"description": "Создайте расширение!",
"manifest_version": 2
}

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

  1. Откройте страницу управления расширениями, перейдя на chrome: // extensions .
    • Страницу управления расширениями также можно открыть, щелкнув меню Chrome, наведя курсор на Дополнительные инструменты , затем выбрав Расширения .
  2. Включите режим разработчика, нажав переключатель рядом с Режим разработчика .
  3. Нажмите кнопку ЗАГРУЗИТЬ РАСПАКОВАННУЮ и выберите каталог расширений.

Та-да! Расширение успешно установлено. Поскольку в манифест не были включены значки, для расширения будет создан общий значок панели инструментов.

Добавить инструкцию №

Хотя расширение было установлено, в нем нет инструкции.Представьте фоновый сценарий, создав файл с названием background.js или загрузив его здесь и поместив в каталог расширений.

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

  {
"name": "Пример начала работы",
"version": "1.0",
"description": "Создайте расширение!",
"background": {
"scripts": ["background .js "],
" persistent ": false
},
" manifest_version ": 2
}

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

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

  chrome.runtime.onInstalled.addListener (function () {
chrome.storage.sync.set ({color: '# 3aa757'}, function () {
console.log («Цвет зеленый.») ;
});
});

Большинство API-интерфейсов, включая API хранилища, должны быть зарегистрированы в поле «permissions» в манифесте, чтобы расширение могло их использовать.

  {
"name": "Пример начала работы",
"version": "1.0 ",
" описание ":" Создайте расширение! ",
" разрешения ": [" хранилище "],
" фон ": {
" сценарии ": [" background. js "],
" постоянный ": false
},
"manifest_version": 2
}

Вернитесь на страницу управления расширениями и щелкните ссылку Reload . Новое поле, Inspect views , становится доступным с синей ссылкой, фоновая страница .

Щелкните ссылку, чтобы просмотреть журнал консоли фонового сценария: « Зеленый цвет. «

Введение в пользовательский интерфейс #

Расширения могут иметь множество форм пользовательского интерфейса, но в этом случае будет использоваться всплывающее окно. Создайте и добавьте файл с названием popup.html в каталог или загрузите его здесь. Это расширение использует кнопку для изменения цвета фона.

   







Как и фоновый скрипт, этот файл необходимо обозначить как всплывающее окно в манифест под page_action .

  {
"name": "Пример начала работы",
"version": "1.0",
"description": "Создайте расширение!",
"permissions": ["storage"],
"background ": {
" scripts ": [" background.js "],
" persistent ": false
},
" page_action ": {
" default_popup ":" popup.html "
},
" manifest_version ": 2
}

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

  {
"name": "Пример начала работы",
"version": "1.0",
"description": "Создайте расширение!",
"permissions": ["storage"],
"background ": {
" scripts ": [" background.js "],
" persistent ": false
},
" page_action ": {
" default_popup ":" popup.html ",
" default_icon ": {
" 16 ":" изображений / get_started16. png ",
" 32 ":" images / get_started32.png ",
" 48 ":" images / get_started48.png ",
" 128 ":" images / get_started128.png "
}
},
" manifest_version " : 2
}

Расширения также отображают изображения на странице управления расширениями, предупреждение о разрешениях и значок. Эти изображения обозначены в манифесте под значками .

  {
"имя": "Пример начала работы" ,
«версия»: «1.0»,
«описание»: «Создайте расширение!»,
«разрешения»: [«хранилище»],
«фон»: {
«сценарии»: [«фон.js "],
" persistent ": false
},
" page_action ": {
" default_popup ":" popup.html ",
" default_icon ": {
" 16 ":" images / get_started16.png ",
"32": "images / get_started32.png",
"48": "images / get_started48.png",
"128": "images / get_started128.png"
}
},
"icons": {
" 16 ":" images / get_started16.png ",
" 32 ":" images / get_started32. png ",
" 48 ":" images / get_started48.png ",
" 128 ":" images / get_started128.png "
},
"manifest_version": 2
}

Если расширение перезагружается на этом этапе, оно будет содержать значок в серой шкале, но не будет содержать никаких различий в функциональности.Поскольку page_action объявлен в манифесте, расширение должно сообщать браузеру, когда пользователь может взаимодействовать с popup.html .

Добавьте объявленные правила в фоновый сценарий с помощью API-интерфейса declarativeContent в событии прослушивателя runtime.onInstalled .

  chrome.runtime.onInstalled.addListener (function () {
chrome.storage.sync.set ({color: '# 3aa757'}, function () {
console.log ('Цвет зеленый.');
});
chrome.declarativeContent.onPageChanged.removeRules (undefined, function () {
chrome.declarativeContent.onPageChanged.addRules ([{условия
: [новый chrome. declarativeContent.PageStateMatcher ({
pageUrl 'Developer: {hostEquals.com '},
})
],
действия: [новый chrome.declarativeContent.ShowPageAction ()]
}]);
});
});

Расширению потребуется разрешение на доступ к API-интерфейсу declarativeContent в его манифесте.

  {
"name": "Пример начала работы",
...
"permissions": ["declarativeContent", "storage"],
...
}

Теперь в браузере будет отображаться полный -цветной значок действия страницы на панели инструментов браузера, когда пользователи переходят по URL-адресу, который содержит «developer.chrome.com» . Когда значок является полноцветным, пользователи могут щелкнуть его, чтобы просмотреть popup.html.

Последний шаг для всплывающего пользовательского интерфейса — добавление цвета к кнопке. Создайте и добавьте файл с именем popup.js со следующим кодом в каталог расширений или загрузите здесь.

  пусть changeColor = document.getElementById ('changeColor'); 

chrome.storage.sync.get ('цвет', функция (данные) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute ('значение', data.color);
});

Этот код захватывает кнопку из popup.html и запрашивает значение цвета из хранилища. Затем он применяет цвет в качестве фона кнопки.Добавьте тег сценария в popup.js в popup.html .

   

...




< / html>

Перезагрузите расширение, чтобы появилась зеленая кнопка.

Логика уровня #

Расширение теперь знает, что всплывающее окно должно быть доступно пользователям на сайте developer.chrome.com, и отображает цветную кнопку, но ему нужна логика для дальнейшего взаимодействия с пользователем.Обновите popup. js , включив в него следующий код.

  пусть changeColor = document.getElementById ('changeColor'); 
...
changeColor.onclick = function (element) {
let color = element.target.value;
chrome.tabs.query ({active: true, currentWindow: true}, функция (вкладки) {
chrome.tabs.executeScript (
tabs [0] .id,
{code: 'document.body.style.backgroundColor = "'+ цвет +'"; '});
});
};

Обновленный код добавляет событие onclick на кнопку, которое запускает программно введенный сценарий содержимого.При этом цвет фона страницы становится таким же, как у кнопки. Использование программного внедрения позволяет запускать сценарии содержимого, вызываемые пользователем, вместо автоматической вставки нежелательного кода на веб-страницы.

Для манифеста потребуется разрешение activeTab , чтобы предоставить расширению временный доступ к API вкладок . Это позволяет расширению вызывать tabs. executeScript .

  {
"name": "Пример начала работы",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}

Расширение теперь полностью работоспособно! Перезагрузите расширение, обновите эту страницу, откройте всплывающее окно и нажмите кнопку, чтобы она стала зеленой! Однако некоторые пользователи могут захотеть изменить цвет фона на другой.

Предоставить пользователям параметры #

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

Начните с создания файла в каталоге с именем options.html и включите следующий код или загрузите его здесь.

   








Выберите другой цвет фона!



< / body>

Затем зарегистрируйте страницу параметров в манифесте,

  {
" name ":" Пример начала работы ",
...
" options_page ":" options .html ",
...
" manifest_version ": 2
}

Перезагрузите расширение и щелкните ПОДРОБНЕЕ .

Прокрутите страницу сведений и выберите Параметры расширения , чтобы просмотреть страницу параметров, хотя она будет в настоящее время отображается пустым

Последний шаг — добавить логику опций.Создайте файл с именем options.js в каталоге расширений со следующим кодом или загрузите его здесь.

  let page = document.getElementById ('buttonDiv'); 
const kButtonColors = ['# 3aa757', '# e8453c', '# f9bb2d', '# 4688f1'];
function constructOptions (kButtonColors) {
for (let item из kButtonColors) {
let button = document.createElement ('button');
button.style.backgroundColor = item;
button. addEventListener ('щелчок', функция () {
хром.storage.sync.set ({color: item}, function () {
console.log ('color is' + item);
})
});
page.appendChild (кнопка);
}
}
constructOptions (kButtonColors);

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

Сделать следующий шаг #

Поздравляем! В каталоге теперь находится полнофункциональное, хотя и упрощенное расширение Chrome.

Что дальше?

  • Обзор расширений Chrome содержит небольшую резервную копию и содержит множество деталей об архитектуре расширений в целом и некоторых конкретных концепциях, с которыми разработчики захотят ознакомиться.
  • Узнайте о параметрах, доступных для отладки расширений в руководстве по отладке.
  • Расширения Chrome имеют доступ к мощным API, выходящим за рамки того, что доступно в открытом Интернете.Документация по API chrome. * Будет проходить через каждый API.
  • В руководстве разработчика есть десятки дополнительных ссылок на части документации, относящиеся к созданию расширенных расширений.

Как создать расширение Chrome

В эти выходные я сделал расширение Chrome, потому что обнаружил, что выполняю одну и ту же задачу снова и снова, и хотел ее автоматизировать. К тому же я ботаник, живущий в условиях пандемии, поэтому трачу накопившуюся энергию на создание вещей. За прошедшие годы я сделал несколько расширений Chrome, надеюсь, этот пост поможет и вам.Давайте начнем!

Создать манифест

Первым шагом является создание файла manifest.json в папке проекта. Он служит той же цели, что и пакет .json , он предоставляет Интернет-магазину Chrome критически важную информацию о проекте, включая имя, версию, необходимые разрешения и т. Д. Вот пример:

  {
 "manifest_version": 2,
 "name": "Название образца",
 "версия": "1.0.0",
 "description": "Это пример описания",
 "short_name": "Краткое название образца",
 "разрешения": ["activeTab", "declarativeContent", "хранилище", ""],
 "content_scripts": [
   {
     "соответствует": [""],
     "css": ["background.css "],
     "js": ["background.js"]
   }
 ],
 "browser_action": {
   "default_title": "Что-то делает, когда вы что-то делаете",
   "default_popup": "popup.html",
   "default_icon": {
     "16": "icons / icon16.png",
     "32": "icons / icon32.png"
   }
 }
}  

Вы можете заметить несколько вещей — во-первых: имена и описания могут быть любыми, какими захотите.

Разрешения зависят от того, что расширение должно делать. У нас есть ["activeTab", "declarativeContent", "storage", ""] в этом примере, потому что этому конкретному расширению требуется информация об активной вкладке, необходимо изменить содержимое страницы, необходимо получить доступ к localStorage , и должен быть активен на всех сайтах. Если ему нужно, чтобы он был активен только на одном сайте за раз, мы можем удалить последний индекс этого массива.

Список всех разрешений и их значения можно найти в документации расширения Chrome.

  "content_scripts": [
  {
    "соответствует": [""],
    "css": ["background.css"],
    "js": ["background.js"]
  }
],  

Раздел content_scripts устанавливает сайты, на которых расширение должно быть активным. Если вам нужен отдельный сайт, например Twitter, вы должны сказать ["https: // twitter.com / * "] . Файлы CSS и JavaScript — это все, что нужно для расширений. Например, в моем продуктивном расширении Twitter эти файлы используются для переопределения внешнего вида Twitter по умолчанию.

  "browser_action": {
  "default_title": "Что-то делает, когда вы что-то делаете",
  "default_popup": "popup.html",
  "default_icon": {
    "16": "icons / icon16. png",
    "32": "icons / icon32.png"
  }
}  

В browser_action есть вещи, которые также являются необязательными. Например, если расширению не требуется всплывающее окно для его функциональности, то можно удалить как default_title , так и default_popup .В этом случае все, что нужно, — это значок расширения. Если расширение работает только на некоторых сайтах, Chrome будет недоступен для значка, когда он неактивен.

Отладка

Когда манифест, файлы CSS и JavaScript будут готовы, перейдите по адресу chrome: // extensions / из адресной строки браузера и включите режим разработчика. Это активирует кнопку «Загрузить распакованный» для добавления файлов расширения. Также можно переключить, активна ли версия расширения для разработчиков.

Я настоятельно рекомендую запустить репозиторий GitHub для управления версиями файлов на этом этапе. Это хороший способ сохранить работу.

Расширение необходимо перезагрузить из этого интерфейса при его обновлении. На экране появится небольшой значок обновления. Кроме того, если в расширении возникнут какие-либо ошибки во время разработки, оно покажет кнопку ошибки с трассировкой стека и дополнительную информацию здесь.

Функциональность всплывающих окон

Если расширению необходимо использовать всплывающее окно, которое появляется рядом со значком расширения, это, к счастью, довольно просто.После обозначения имени файла с помощью browser_action в файле манифеста страницу можно построить с любым HTML и CSS, которые вы хотите включить, включая изображения (я обычно использую встроенный SVG).

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

В этом файле начните с создания функциональности, и у нас будет доступ к всплывающему DOM, например:

  документ. addEventListener ("DOMContentLoaded", () => {
 var button = document.getElementById ("отправить")

 button.addEventListener ("клик", (e) => {
   console.log (e)
 })
})  

Если мы создадим кнопку в файле popup.html , присвоим ей идентификатор с именем submit , а затем вернем журнал консоли, вы можете заметить, что на самом деле в консоли ничего не регистрируется. Это потому, что мы находимся в другом контексте, а это означает, что нам нужно будет щелкнуть правой кнопкой мыши всплывающее окно и открыть другой набор DevTools.

Теперь у нас есть доступ к журналам и отладке! Однако имейте в виду, что если что-то установлено в localStorage , то оно будет существовать только в DevTools расширения localStorage ; не браузер пользователя localStorage . (Это меня укусило, когда я впервые попробовал!)

Запуск скриптов вне расширения

Это все хорошо, но допустим, мы хотим запустить сценарий, который имеет доступ к информации на текущей вкладке? Вот несколько способов сделать это. Я обычно вызываю отдельную функцию из слушателя событий DOMContentLoaded :

Пример 1. Активация файла

  function exampleFunction () {
 chrome.tabs.executeScript (() => {
   chrome.tabs.executeScript ({файл: "content.js"})
 })
}  

Пример 2: Выполнить немного кода

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

  function exampleFunction () {
 chrome.tabs.executeScript ({
   код: `console.log ('привет')`
  })
}  

Пример 3: Активировать файл и передать параметр

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

  function exampleFunction (options) {
 chrome.tabs.executeScript (
   {code: "var options =" ​​+ JSON.stringify (options)},
   function () {
     chrome.tabs.executeScript ({файл: "content.js"})
   }
 )
}  

Иконки

Несмотря на то, что файл манифеста определяет только два значка, нам нужны еще два, чтобы официально отправить расширение в Интернет-магазин Chrome: один квадрат размером 128 пикселей и тот, который я называю icon128_proper.png , который также имеет размер 128 пикселей, но имеет небольшой отступ внутри него между краем изображения и значком.

Имейте в виду, что какой бы значок ни использовался, он должен хорошо выглядеть как в светлом, так и в темном режиме для браузера. Обычно я нахожу свои значки в Noun Project.

Отправка в Интернет-магазин Chrome

Теперь мы переходим в консоль разработчика Интернет-магазина Chrome и отправляем расширение! Нажмите кнопку «Новый элемент», перетащите заархивированный файл проекта в загрузчик.

Оттуда Chrome задаст несколько вопросов о расширении, запросит информацию о разрешениях, запрошенных в расширении, и о том, зачем они нужны. Справедливое предупреждение: для , запрашивающего разрешения «activeTab», или «вкладок», потребуется более длительная проверка, чтобы убедиться, что код не делает ничего оскорбительного.

Вот и все! Это должно подготовить вас к созданию расширения для браузера Chrome! 🎉

Как создавать расширения Chrome. Пошаговое руководство по созданию… | Андрей Элекес | Кодирование на простом английском

Расширения — это небольшие программы, которые настраивают работу в Интернете.Они позволяют пользователям адаптировать функциональность и поведение Chrome к индивидуальным предпочтениям. Они построены на таких веб-технологиях, как HTML, JS и CSS.

Расширение должно соответствовать единственной цели , которая имеет узкое определение и проста для понимания. Одно расширение может включать в себя несколько компонентов и набор функций, если все способствует достижению общей цели.

Вот несколько примеров расширений, которые в настоящее время отсутствуют в Chrome и не могут быть загружены в Extension Store, но могут быть добавлены с небольшими изменениями:

 - действие браузера, которое меняет свой значок при нажатии: SOURCE 
- Действие браузера со всплывающим окном, изменяющим цвет страницы: ИСТОЧНИК
- Действие браузера без значка, которое делает страницу красной: ИСТОЧНИК
- Возвращает приемлемые языки браузера: ИСТОЧНИК
- Расширение добавляет анимированное действие браузера на панель инструментов : SOURCE
- Запретить / разрешить сторонние файлы cookie. Пример расширения API: SOURCE

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

Мы начнем с создания папки с этими файлами:

Файл manifest.json сообщает Chrome важную информацию о вашем расширении, например его имя и необходимые разрешения.

 {
"manifest_version": 2, "name": "Плагин Chrome", "description": "Плагин для тестирования", "version": "1.0", "content_scripts": [
{
"соответствует": [
"http://oracle.com/*",
],
"js": ["content.js"]
}
], "browser_action": {
"default_icon": "icon.png",
" default_popup ":" всплывающее окно.html "
}," фон ": {
" скрипты ": [" background.js "],
" постоянный ": false
}," разрешения ": [
" activeTab ",
" хранилище ",
" https : //ajax.googleapis.com/ "
]
}

Теперь в файле манифеста все переменные могут быть изменены, и большинство из них не требуют пояснений. Переменная соответствий будет запускать select content. js , когда открыта определенная веб-страница, например:

  (1)   -  Запускайте скрипт только в том случае, если веб-страница - http: // oracle.com / "соответствует": [
"http://oracle.com/",
], (2) - Запускайте скрипт только в том случае, если веб-страница http://oracle.com/ и любые другие страницы, связанные с Это. Таким образом, * означает все «совпадения»: [
«http://oracle.com/*»,
], (3) - Запустить сценарий на всех «совпадениях» веб-страниц: [
«» ,
],

Или воспользуйтесь этой небольшой шпаргалкой:

  • "" : соответствует любому URL-адресу, который начинается с разрешенной схемы ( http: , https: , file: , ftp: или chrome-extension: ).
  • "http: // * / *" : соответствует любому URL-адресу, который использует схему http: .
  • "https: // * / *" : соответствует любому URL-адресу, который использует схему https: .
  • "*: // * / *" : соответствует любому URL-адресу, который использует схему https: или http: .

Сценарий content.js — это «файл JavaScript, который запускается в контексте веб-страниц». Это означает, что сценарий содержимого может взаимодействовать с веб-страницами, которые посещает браузер.

  // content.js  alert («Привет!») 

Загрузите файл значка png и поместите его в созданную папку, вы можете скачать его здесь ССЫЛКА .

Хотя расширение установлено, но инструкции нет. Представьте фоновый сценарий , создав файл с названием background.js и поместив его в каталог расширений.

  // backround.js  alert ("Backround S running") 

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

Содержимое папки расширения

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

Схема расширений Chrome

Чтобы импортировать расширения в свой браузер:

  1. Перейдите на chrome: // extensions в целевом браузере Chrome и установите флажок «Режим разработчика» в правом верхнем углу.
  2. Нажмите «Загрузить распакованное расширение…» и выберите папку с номером версии внутри нужной папки расширения.

Как создать и опубликовать расширение Chrome за 20 минут

от Джейка Принса

Фото от Mikes Фото: https://www.pexels.com/photo/acoustic-amplifier-artist-audio-114820/

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

Что такое расширение Chrome?

Расширения Chrome позволяют добавлять функциональные возможности в веб-браузер Chrome, не углубляясь в собственный код. Это здорово, потому что вы можете создавать новые расширения для Chrome с использованием основных технологий, с которыми хорошо знакомы веб-разработчики, — HTML, CSS и JavaScript. Если вы когда-либо создавали веб-страницу, вы сможете создать расширение быстрее, чем за обедом. Единственное, что вам нужно узнать, это как добавить некоторые функции в Chrome с помощью некоторых JavaScript API, предоставляемых Chrome.

Если у вас еще нет опыта в создании веб-страниц, я рекомендую вам сначала погрузиться в некоторые бесплатные ресурсы, чтобы научиться программировать, например freeCodeCamp.

Что вы хотите построить?

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

План

Некоторое время я использовал расширение Unsplash Chrome, которое позволяет мне иметь красивые фоновые изображения Unsplash на вкладке по умолчанию.Позже я заменил его расширением Muzli Chrome, которое превращает вкладку по умолчанию в ленту новостей дизайна и снимков со всего Интернета.

Давайте воспользуемся этими двумя расширениями как источником вдохновения для создания чего-то нового, но на этот раз для любителей кино. Моя идея — показывать случайное фоновое изображение фильма каждый раз, когда вы открываете новую вкладку. При прокрутке он должен превратиться в красивую ленту популярных фильмов и телешоу. Итак, приступим.

Шаг 1. Настройка

Первый шаг — создать файл манифеста с именем manifest.json . Это файл метаданных в формате JSON, который содержит такие свойства, как имя вашего расширения, описание, номер версии и т. Д. В этом файле мы сообщаем Chrome, что расширение собирается делать и какие разрешения для этого требуются.

Для расширения фильма нам необходимо иметь разрешение на управление activeTab , поэтому наш файл manifest.json выглядит примерно так:

  {«manifest_version»: 2, «name»: «RaterFox», «description »:« Самые популярные фильмы и телешоу на вкладке по умолчанию.Включает в себя рейтинги, резюме и возможность смотреть трейлеры. »,« Version »:« 1 »,« author »:« Jake Prins »,  
 « browser_action »: {" default_icon ":" tab-icon.png " , «Default_title»: «Удачного дня»},  
  «chrome_url_overrides»: {«newtab»: «newtab.html»},  
  «permissions»: [«activeTab»]}  

Как видите, мы говорим, что newtab.html будет HTML-файлом, который должен отображаться каждый раз при открытии новой вкладки. Для этого нам нужно иметь разрешение на управление activeTab , поэтому, когда пользователь попытается установить расширение, он будет предупрежден со всеми разрешениями, необходимыми для расширения.

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

  «browser_action»: {«default_popup»: «popup.html ”,},  

Теперь popup.html будет отображаться во всплывающем окне, которое создается в ответ на щелчок пользователя по действию браузера. Это стандартный файл HTML, поэтому вы можете свободно управлять тем, что отображает всплывающее окно. Просто поместите немного своей магии в файл с именем popup.html .

Шаг 2. Проверьте, работает ли он

Следующий шаг — создать файл newtab. html и поместить в него ‘ Hello world ‘:

     < title> Тест    

Hello World!

Чтобы проверить, работает ли он, посетите chrome: // extensions в в браузере и убедитесь, что установлен флажок Developer mode в правом верхнем углу.

Режим разработчика Chrome

Щелкните Загрузить распакованное расширение и выберите каталог, в котором находятся файлы расширений. Если расширение допустимо, оно сразу станет активным, и вы сможете открыть новую вкладку и увидеть свой «Hello world».

Шаг 3. Делаем все красиво

Теперь, когда наша первая функция заработала, пришло время сделать ее красивой. Мы можем просто стилизовать нашу новую вкладку, создав файл main.css в нашем каталоге расширений и загрузить его в нашу новую вкладку .html файл. То же самое происходит при включении файла JavaScript для любых активных функций, которые вы хотели бы включить. Предполагая, что вы уже создавали веб-страницу раньше, теперь вы можете использовать свою магию, чтобы показать своим пользователям все, что вы хотите.

Завершение плана

Все, что мне еще понадобилось для завершения расширения фильма, это HTML, CSS и JavaScript, поэтому я не думаю, что уместно углубляться в код, но я хотел бы пройти его быстро.

Вот что я сделал:

Для моей идеи мне понадобились красивые фоновые изображения, поэтому в файле JavaScript я использовал TMDb API для получения некоторых популярных фильмов, взял их фоновые изображения и поместил их в массив.Теперь, когда страница загружается, она случайным образом выбирает одно изображение из этого массива и устанавливает его в качестве фона страницы. Чтобы сделать эту страницу более интересной, я также добавил текущую дату в правом верхнем углу. А для получения дополнительной информации он позволяет пользователям щелкнуть фон, что приведет к переходу на страницу фильма IMDb.

Я заменил экран на красивую ленту популярных фильмов, когда пользователь пытается прокрутить вниз. Я использовал тот же API для создания карточек фильмов с изображением, заголовком, рейтингом и количеством голосов.Затем, если щелкнуть одну из этих карточек, отобразится обзор с кнопкой для просмотра трейлера.

Результат

Теперь с этим маленьким файлом manifest.json и небольшим количеством HTML, CSS и JavaScript каждая открываемая вами вкладка выглядит намного интереснее:

Посмотрите здесь конечный результат.

Шаг 4. Опубликуйте расширение

Когда ваше первое расширение Chrome выглядит хорошо и работает должным образом, пора опубликовать его в Chrome Store. Просто перейдите по этой ссылке, чтобы перейти в панель управления Интернет-магазина Chrome (вам будет предложено войти в свою учетную запись Google, если это не так).Затем нажмите кнопку Добавить новый элемент , примите условия, и вы перейдете на страницу, где можете загрузить свое расширение. Теперь сожмите папку, содержащую ваш проект, и загрузите этот ZIP-файл.

Интернет-магазин Chrome

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

Убедитесь, что вы предоставили несколько красивых изображений, чтобы продемонстрировать свой проект.Магазин может использовать эти изображения для продвижения вашего новаторского проекта. Чем больше изображений вы предоставите, тем заметнее будет ваше расширение. Вы можете предварительно просмотреть, как ваше расширение выглядит внутри интернет-магазина, нажав кнопку « Предварительный просмотр изменений» . Когда вы будете довольны результатом, нажмите Опубликовать изменения и готово!

Теперь перейдите в Интернет-магазин Chrome и найдите свое расширение по названию (может пройти некоторое время, прежде чем оно появится). Если вам интересно, вы можете найти мою здесь.

Осталось только найти пользователей. Так что вы можете поделиться постом о расширении Chrome, которое изменит вашу жизнь, в социальных сетях. Скажите своим друзьям, чтобы проверить это. Добавьте его в ProductHunt. И не забудьте поделиться своим проектом здесь, в комментариях. Мне любопытно посмотреть, что вы придумали!

Заключение

Веб-разработчику очень легко создать расширение Chrome за короткий промежуток времени. Все, что вам нужно, это немного HTML, CSS, JavaScript и базовые знания о том, как добавить функциональность с помощью некоторых JavaScript API, которые предоставляет Chrome.Первоначальную настройку можно опубликовать в Интернет-магазине Chrome всего за 20 минут. Создание нового, стоящего или красивого пристройки займет больше времени. Но все зависит от вас!

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

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

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

Есть вопросы или отзывы? Дай мне знать в комментариях!

Спасибо за чтение! Надеюсь, информация была полезной. Следуйте за мной на Medium, чтобы увидеть больше статей, связанных с технологиями, или в Twitter и Instagram @jakeprins_nl.

13 удивительных расширений Google Chrome, которые улучшат ваш маркетинг

Слышали ли вы когда-нибудь фразу «ремесленник хорош настолько, насколько хорош его инструмент?»

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

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

Вот почему я люблю делиться онлайн-инструментами , которые помогают предприятиям достичь своих целей.

И время от времени мое внимание привлекают новые инструменты, которыми, как мне кажется, стоит поделиться.

Это один из таких моментов.

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

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

Все они хорошо служили мне в разное время, и я думаю, они вам тоже понравятся.

Но сначала я хочу обосновать, почему вам вообще следует использовать Google Chrome.

Чехол для Chrome

Я знаю, что существует множество браузеров.

Назовем лишь некоторые из них: Safari, Mozilla Firefox и Microsoft Edge.

Какой бы вы ни использовали, я настоятельно рекомендую вам присмотреться к Google Chrome.

Почему? Потому что многие считают его лучшим браузером из имеющихся , и не без оснований.

Как и большинство других браузеров, его можно использовать бесплатно.

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

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

Но не верьте мне на слово.

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

Идти вместе с толпой — не всегда лучшая идея, но 43% -ный разрыв в использовании должен как минимум вскружить вам голову.

По крайней мере, рекомендую попробовать.

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

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

Например, популярное расширение HTTPS Everywhere автоматически преобразует незащищенные HTTP-сайты в зашифрованные HTTPS-сайты при установке.

Это означает, что ваш просмотр и информация будут более безопасными, даже если вам даже не придется об этом думать.

И расширения невероятно просто установить.

Все, что вам нужно сделать, это зайти в Интернет-магазин Chrome и найти нужное расширение.

Есть тысячи на выбор, и каждый обещает уникальный и полезный опыт.

Конечно, сколько вы используете, полностью зависит от вас.

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

В целом, процесс невероятно прост, и это одна из причин, почему я так люблю Chrome.

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

Просто щелкните левой кнопкой мыши значок расширения и выберите «Удалить из Chrome.”

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

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

Для начала я хочу дать вам инструмент, который поможет вам стать лучше писателем во всех сферах вашей жизни.

Инструмент № 1: Грамматика

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

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

Их обычная платформа требует, чтобы вы либо написали, либо скопировали / вставили свои слова в их собственный редактор.

Затем вам дадут совет по элементам, которые вы можете изменить.

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

Вот краткое описание того, как работает их расширение:

Разве вам не нужна дополнительная пара глаз для того очень важного электронного письма, которое вы собираетесь отправить клиенту?

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

Итак, значение здесь довольно ясно, но как насчет функциональности?

Когда я скачал их расширение, я решил протестировать его в Gmail.

Как и обещала их реклама, моя специально размещенная ошибка создала красное уведомление, предупреждающее меня не нажимать кнопку отправки.

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

Когда я это сделал, я заметил, что Grammarly отметила другую часть моего предложения.

Добавленный флаг был для «неясного антецедента», что означает, что моя аудитория могла не знать, на что ссылается слово «это».

Они также быстро исправили мою вопиющую опечатку.

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

И хотя это заняло у меня несколько дополнительных секунд, мне нравится тот факт, что я могу отправлять сообщения или сообщения в социальных сетях, которые проверяемы без ошибок.

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

Инструмент № 2: Hashtest

Я уже говорил, что не всегда нужно использовать хэштеги.

Однако бывают случаи, когда хэштег необходим.

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

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

Вот где появляется Hashtest .

Этот инструмент автоматически проверяет качество хэштегов, которые вы рассматриваете, в режиме реального времени.

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

Поскольку он удобно расположен в верхнем углу экрана, им легко пользоваться.

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

Мне также очень нравится, как они окрашивают ваши результаты, как в этом примере:

Понятно, что в этом случае вариант # маркетинг лучше по их масштабу.

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

Инструмент № 3: Навигатор по продажам LinkedIn

LinkedIn — отличный способ увеличить продажи для игроков B2B .

И поиск способа расширить полезность LinkedIn только сделает его намного лучше.

Вот почему расширение LinkedIn Sales Navigator стало популярным.

Он предоставляет подробную информацию для ваших контактов Gmail.

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

Вся необходимая информация отображается на боковой панели вашей учетной записи Gmail, примерно так:

В этом профиле указано имя, компания и даже ссылки на социальные сети.

И что еще более полезно, вы найдете краткий список «ледоколов», таких как связи, которыми вы делитесь в LinkedIn или любых общих группах, в которых вы можете участвовать.

Эта информация может помочь вам донести ваше сообщение до вашей цели и повысить ваши шансы начать ценный разговор.

Более того, это просто облегченная версия расширения.

Обновление до премиум-сервиса предлагает больше настраиваемых функций, таких как работа в сети и сохранение лидов прямо в Gmail.

Итак, если вы используете LinkedIn Sales Navigator, я настоятельно рекомендую проверить этот инструмент.

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

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

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

Инструмент № 4: SEMRush

SEMRush — полезный инструмент для всех маркетологов.

Вся платформа предназначена для быстрого анализа поискового трафика вашего сайта и его эффективности в Google.

Вот пример некоторой информации, которую они могут предложить:

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

А расширения только добавляют функциональности этому и без того полезному инструменту.

Фактически, вы действительно получаете здесь сделку «два по цене одного».

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

Первый называется SEMRush Page Rank , и это довольно просто.

Это всего лишь одна маленькая кнопка в верхней части экрана.

Но настоящая ценность — это число, которое оно отображает.

Это число, которое выглядит как обычное уведомление, на самом деле говорит вам, насколько высок рейтинг страницы в соответствии с алгоритмами SEMRush.

Это означает, что вместо того, чтобы открывать SEMRush, вводить URL-адрес, а затем самостоятельно находить эту информацию, вы получаете быстрое считывание полномочий и статуса страницы.

Это экономит ваше время и дает вам полезную информацию с первого взгляда.

Но, как я и обещал, это еще не все для SEMRush.

Вы также можете использовать инструмент Открыть в SEMRush , чтобы быстро открыть полное изложение страницы, на которой вы находитесь.

Итак, еще раз, SEMRush избавляет вас от необходимости открывать их приложение и вводить определенный URL вручную.

Вы получите все необходимые данные за считанные секунды, что позволит вам упорядочиться и быть в курсе событий.

Если вы используете SEMRush, попробуйте эти расширения. Вы удивитесь, как вы вообще обходились без этого.

Инструмент # 5: Бумеранг

Не путать с популярным приложением для зацикливания видео, Boomerang — это расширение, которое помогает вам управлять потоком ваших электронных писем.

Если быть точным, это помогает вам рассчитать время для электронных писем, чтобы ваша аудитория, скорее всего, увидела и ответила вам так, как вы хотите.

Вот все, на что он способен:

В целом, я думаю, что в этом приложении много функций, поэтому оно заслуживает всеобщего внимания.

Например, мне очень нравится возможность планировать электронную почту.

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

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

Допустим, вы хотите быть вверху чьего-либо почтового ящика в понедельник.

Обычно вам нужно вставать в 5 часов утра, чтобы убедиться, что ваше электронное письмо было написано и отправлено в нужное время.

Но с Boomerang вы можете отложить будильник, зная, что ваше электронное письмо будет отправлено вовремя.

И это всего лишь простое применение этой функции.

Как вы его используете, зависит от ваших потребностей и воображения.

Но есть еще одна особенность Boomerang, которая меня выделяет: способность видеть, насколько легко ответить на ваше письмо.

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

Если вы постоянно отправляете электронные письма, которые трудно читать и на которые отвечать, вы не увидите хороших результатов.

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

И снова самое приятное то, что этот процесс полностью пассивен. Расширение сделает всю работу за вас.

Инструмент № 6: Oktopost

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

Хотя приложение специально ориентировано на управление социальными сетями B2B, приложения действительно доступны для всех, кто использует учетную запись в социальных сетях для бизнеса.

И , расширение только увеличивает ценность того, что может предложить Oktopost, потому что оно позволяет вам делиться статьями и сообщениями прямо из браузера.

В результате у вас есть специальный инструмент для курирования и поддержания актуальности ваших сообщений в социальных сетях.

И им очень легко пользоваться. Все, что вам нужно сделать, это нажать на вкладку расширения, когда вы находитесь на странице, которой хотите поделиться:

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

Оттуда вам просто нужно ввести свою подпись, а затем опубликовать.

Больше не нужно переходить по вкладкам, пытаясь все исправить.

Легко и просто.

Инструмент № 7: BuzzSumo

BuzzSumo — еще один из тех инструментов, которые должен знать и любить каждый маркетолог.

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

И расширение позволяет делать то же самое, что и , всего за несколько кликов.

Как видно на изображении выше, с помощью расширения BuzzSumo вы можете получать информацию о любой посещаемой вами странице.

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

Если вы используете этот инструмент, все, что вам нужно сделать, это открыть расширение и посмотреть, что в нем написано.

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

Это поможет вам нацелить вашу контент-стратегию в режиме реального времени и без проблем.

Итак, если вы ищете быстрый способ получить преимущество, это расширение Chrome для вас.

Инструмент № 8: LinkClump

Если вы похожи на меня, то, вероятно, каждый день проводите много исследований по темам.

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

В случае LinkClump это определенно благо.

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

Что означает меньше переходов между страницами или вкладками и больше чтения вашего контента.

К тому же он довольно прост в использовании. Все, что вам нужно сделать, это установить его, удерживать z, а затем щелкнуть и перетащить.

Как видите, инструмент выделит все выбранные вами страницы.

Затем, когда вы отпустите кнопку мыши, все страницы будут открыты в их последовательном порядке.

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

Это простой прием, но найти способ сэкономить время во время исследования — это всегда хорошо.

Инструмент № 9: Лайнер

Не твердить об этом, но я люблю исследования.

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

К счастью, Liner существует, чтобы вы могли быстро выделить из сообщений в блогах или веб-страниц во время исследования.

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

Вот как это работает:

https://youtu.be/fqgxVvDLuD0

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

Чтобы активировать режим подсветки, просто нажмите кнопку «~» и отправляйтесь в город.

Надеюсь, это поможет вам не отвлекаться от задачи и хорошо организовать источники контента.

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

Инструмент № 10: Сохранить в карман

Бывали ли у вас моменты, когда вы читали идеальный отрывок, но у вас действительно нет причин делиться им?

Я знаю, что знаю.

Когда это происходит, я предпочитаю использовать расширение Save to Pocket .

Это позволяет вам быстро сохранять статьи, к которым вы хотите вернуться, и ссылаться на них в более поздних проектах.

Или, если вы менеджер в соцсетях, вы можете сохранить что-нибудь, чтобы изменить его позже.

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

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

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

Так ты никогда не заблудишься.

И вы также можете увидеть другие рекомендуемые статьи на основе сохраненной вами темы:

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

Каким бы вы ни пользовались, «Сохранить в карман» — отличный способ отложить полезные вещи на задний план.

Инструмент № 11: Push by Zapier

Расширение Push от Zapier — одно из расширений, которое я рекомендую маркетологам, использующим множество инструментов для проектов, которые они запускают.

Это просто так хорошо.

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

Но когда вы начнете его использовать, вы обнаружите, что это гораздо больше.

Причина, по которой я говорю это, заключается в том, что он позволяет вам настроить «толчок» практически для любой задачи.

Например, если вы используете технику Pomodoro, когда интенсивная работа перемежается с короткими перерывами, вы можете настроить Push, чтобы помочь вам соблюдать режим.

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

Допустим, вы хотите создать обычную публикацию в чате Slack вашей компании.

Все, что вам нужно сделать, это настроить push, и вы сможете использовать расширение для создания своих сообщений, даже если вы в настоящее время не в Slack.

And Push by Zapier сохранит каждый созданный вами толчок:

Если вам нужно активировать, деактивировать или редактировать, просто зайдите в свою учетную запись Zapier и проверьте их.

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

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

Инструмент № 12: Evernote Web Clipper

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

Итак, если вы ищете инструмент, который поможет вам в этом, обратите внимание на Evernote Web Clipper .

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

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

И, как вы можете видеть на изображении выше, стрелки соответствуют моему стилю.

Это потому, что я использую этот инструмент регулярно.

Вот более подробный взгляд на то, на что на самом деле способен инструмент:

Сохраняя целые страницы одним нажатием кнопки, вы больше никогда не будете возиться с другим инструментом для захвата экрана.

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

Инструмент № 13: Менеджер расширений в один клик

Если вы зашли так далеко, вы, вероятно, задаетесь вопросом, сколько расширений забивают ваш экран.

Что ж, с One Click Extensions Manager ответ будет отрицательным.

Потому что вы сможете взять панель инструментов, которая выглядит так:

Или сделайте так:

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

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

Просто очистите результаты этим последним расширением.

Инструмент № 14: Ubersuggest

Этот бесплатный плагин работает с моим SEO-инструментом Ubersuggest. Он позволяет просматривать информацию из результатов поиска по связанным ключевым словам, объемам поиска и расчетной цене за клик для платных кампаний.

Мы постоянно обновляем наш инструмент и с нетерпением ждем ваших отзывов о нем!

Заключение

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

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

Если вы пытаетесь сосредоточиться на задаче, исследовании или просто доработать сообщение, есть десятки вариантов, которые помогут вам добиться успеха.

В этом посте я упомянул только 13 расширений, но могу вас заверить, что их гораздо больше.

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

Потому что с правильными инструментами, я думаю, мы все сможем стать лучше в своем деле.

Какие ваши любимые расширения Chrome для маркетинга?

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

  • SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
  • Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
  • Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

Как продать расширение Chrome и заработать 4012 долларов за 7 дней в 2021 году

Некоторое время назад я понятия не имел, как продавать расширение Google Chrome. Я знал, что это возможно, но понятия не имел, как это сделать.

Теперь я создал расширение для Chrome, разместил его в интернет-магазине Google Chrome и продаю его около недели.Самое приятное то, что я уже вернул свои инвестиции!

На самом деле, на сегодняшний день у меня общий объем продаж моего нового расширения Chrome за 7 дней составил 4012 долларов. Я ОЧЕНЬ доволен результатами, которые я видел до сих пор, и думаю, что смогу продолжать их еще больше.

Итак, что такое расширение Chrome? Он называется TexTrader, и вы можете проверить его прямо здесь.

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

Почему я создал расширение Chrome

Как я недавно рассказал, я только что купил блог Amazon FBA под названием FBAmaster.com. Предыдущие владельцы продавали 3 расширения Chrome, но обычно не зарабатывали больше нескольких сотен долларов в месяц.

Погрузившись в цифры, я обнаружил, что только одно расширение Chrome составляет почти 100% всех продаж.

Когда я посмотрел на расширение Chrome, я увидел, что это довольно крутая идея, но ее можно улучшить.

Да, расширение Chrome было востребовано. Спрос на приложение Chrome, которое у вас есть, очень важен. Но я также мог видеть, что сам продукт можно улучшить, и что он может продаваться и продаваться намного лучше.

По этим причинам я вмешался и решил создать новое расширение для Chrome с нуля, которое было бы лучшей версией существующего инструмента.В конце концов, это лишь один из моих планов по развитию бизнеса FBA Master.

Что делает TexTrader?

До покупки FBA Master я ничего не знал о программе Amazon Trade-In. Оказывается, Amazon выкупит (подарочными картами) некоторые использованные учебники.

Что еще более интересно, сторонние продавцы часто продают подержанные учебники МЕНЬШЕ, чем цена Amazon Trade-In. Я не знаю, зачем они это делают. Возможно, они просто не знают о программе Amazon Trade-in.

Это означает, что вы можете купить подержанный учебник, скажем, за 75 долларов. Затем, как только вы его получите, вы просто распечатаете этикетку бесплатной доставки с помощью программы Amazon Trade-In и отправите ее обратно в Amazon, скажем, за 100 долларов. Вы просто так получаете прибыль в 25 долларов!

Единственная проблема в том, что поиск этих прибыльных сделок — это очень ручной процесс. Вы должны прокручивать тысячи страниц Amazon по одной, чтобы проверить, не ниже ли самая низкая цена продажи, чем цена Amazon Trade-in.

TexTrader автоматизирует этот процесс. Вы щелкаете значок расширения Chrome, и он просматривает категорию учебников, в которой вы находитесь. Нет необходимости пролистывать все страницы, Textrader просматривает страницы и вычисляет, что выгодно, а что нет.

Видео о том, что он делает, можно посмотреть здесь:

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

Вы можете быть удивлены тем, сколько на первый взгляд простых приложений находится в веб-сайте Google Chrome.

Как разработать расширение Chrome

Уточню, я не разработчик. Итак, мой процесс был довольно простым: я зашел на Upwork.com и разместил вакансию, спрашивая, может ли кто-нибудь создать то, что я искал. Претендентов было много, и они выбрали одного, задав им несколько вопросов.

Итак, если вам интересно, как на самом деле кодировать расширение Google Chrome, я не ваш парень.Но я разработал это просто на аутсорсинге.

Нужно ли продавать его в магазине Google Chrome?

Насколько я понимаю, вам нужно, чтобы он был указан в магазине Chrome. Вы можете увидеть TexTrader прямо в магазине Chrome.

Как видно из скриншота выше, Google позволяет использовать 3 различных способа оплаты из панели управления разработчика.

  1. Сделайте расширение бесплатным.
  2. Вы можете взимать за это деньги с помощью платежной системы Chrome Web Store
  3. Вы можете взимать деньги с помощью специального платежного решения.

Я пошел с вариантом 3.

Итак, вкратце, люди покупают через мой веб-сайт через PayPal. После оплаты отправляю их в Google Chrome Store для скачивания (технически можно скачать бесплатно). Наконец, они получают электронное письмо с кодом активации.

Расширение Chrome не будет работать без лицензионного ключа, поэтому никто не может использовать его, если он не заплатил.

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

Но пока рано говорить об этом.

Как я запустил расширение Chrome

Единственная причина, по которой я запустил TexTrader, заключалась в том, чтобы монетизировать аудиторию FBA Master. У компании чуть более 12 000 адресов в списке рассылки, и этот сайт уже занимает первое место в Google в категории «Учебный арбитраж».

Итак, «запустить» продукт было очень просто, выполнив следующие шаги:

  1. Создайте страницу продаж и автоматическую последовательность электронных писем с помощью Clickfunnels и ConvertKit.
  2. Отправить по электронной почте список рассылки FBA Master в 3 отдельных дня.
  3. Добавьте ссылки на FBAmaster.com на существующие статьи и другие полезные места.

(См. Мой обзор Clickfunnels и мой обзор ConvertKit).

Начните свой онлайн-бизнес с помощью устаревшего нишевого домена от ODYS. Инвестируйте в сайты, которые растут в цене, со встроенными средствами SEO, которые помогут вам быть заметными.

  • Высокий авторитет: получите преимущество перед конкурентами и сэкономьте годы авторитета в строительстве.
  • Анализы, которым можно доверять: Получите исчерпывающий авторитетный анализ.
  • Партнерские сайты DFY: Добавьте готовый для вас пакет партнерских сайтов, чтобы помочь вам расти и быть заметным.

Получите эксклюзивное ограниченное приглашение ODYS GLOBAL, предлагаемое от имени Niche Pursuits!

Подайте заявку в ODYS, чтобы получить приветственный бонус в размере 100 долларов США

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

Textrader сейчас продается по цене 59 долларов, я продал 68 копий. Это общий доход 4012 долларов!

Для сравнения, за первые 4 месяца года «старое» расширение Chrome было продано на общую сумму около 1500 долларов. (За 5 месяцев он был продан на сумму около 2 тысяч долларов, потому что я продвигал его). Итак, это ОТЛИЧНОЕ начало.

Краткое примечание: Я был немного избалован успехом Long Tail Pro. Очевидно, неделя за 4000 долларов будет ужасной для Long Tail Pro.Но если я оглянусь назад, когда я впервые создал Long Tail Pro, если мне не изменяет память, за первый месяц было продано около 2500 долларов.

Итак, в некотором смысле 4000 долларов не кажутся такими уж замечательными, но в других отношениях это кажется отличным началом. Что действительно будет иметь значение, так это то, что я могу сделать в следующие 6–12 месяцев.

Планы на будущее по продолжению роста…

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

Содержание

Во-первых, я считаю важным подчеркнуть, что FBAmaster.com уже ранжируется по таким вещам, как арбитраж по учебникам и другим связанным ключевым словам. Таким образом, добавление упоминаний Textrader на эти страницы должно приводить к некоторым «естественным» продажам на постоянной основе.

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

У меня также есть несколько статей о NichePursuits.com, где будет смысл добавить упоминания о Textrader, включая одну из самых первых статей, которые я когда-либо писал в своем блоге: Как покупать и продавать подержанные книги.

Набор сотрудников

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

Я также планирую пообщаться с веб-сайтами, которые уже ранжируются в Google по связанным терминам, и спросить, не хотят ли они добавить TexTrader в свои статьи, чтобы заработать дополнительные деньги.У меня уже был один человек, который сказал «да».

Платный трафик

У меня нет полного плана для платного трафика, но я планирую протестировать некоторые объявления. Это может быть реклама Facebook, реклама Youtube или Google Adwords.

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

У меня, скорее всего, ничего не будет в течение месяца или около того, но я буду держать вас в курсе, чтобы вы знали, как это происходит!

Гарантирует ли что-нибудь из этого успех?

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

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

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

Стоит ли рассматривать расширение Chrome для своей аудитории?

Вы можете создать расширение Chrome для своей аудитории, чтобы заработать деньги, создать список рассылки или и то, и другое.Расширения Chrome есть практически для всего, а не только для ниши «зарабатывать деньги в Интернете».

Подумайте о том, что уже есть. Расширения для браузера Chrome существуют от известных программ, таких как Evernote, Jungle Scout или других известных компаний. Вы можете найти расширение браузера Chrome для калькулятора FBA, социальных сетей, исследования ключевых слов и многого другого.

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

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

Хотя я думаю, что лучшие возможности лежат в нишах покупок / сделок, продуктивности и цифрового маркетинга.

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

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

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

Если у вас есть какие-либо вопросы или мысли о TexTrader или создании расширения Chrome в целом, дайте мне знать в комментариях ниже.

Использование расширения Zoom для Chrome — Справочный центр Zoom

Обзор

Zoom предлагает несколько вариантов для планирования встречи.

Расширение Zoom Scheduler для Chrome позволяет участникам планировать собрания Zoom прямо из Календаря Google. Используя расширение, вы можете начать мгновенную встречу или запланировать встречу в будущем. Ссылка для присоединения к собранию и подробная информация отправляются через приглашение Календаря Google, поэтому участник может присоединиться одним щелчком мыши из календаря.

Эта статья охватывает:

Предварительные требования

  • Google Chrome
  • Расширение Zoom для Chrome из Интернет-магазина Google Chrome
  • Учетная запись Zoom с Google, рабочий адрес электронной почты и пароль или логин для системы единого входа (SSO)
  • Использование Календаря Google для планирования встреч

Установка расширения

Прежде чем вы сможете планировать встречи с помощью расширения Chrome или непосредственно в Google Calendar, вам необходимо установить расширение Zoom Scheduler из Chrome Web Store. Нажмите Добавить в Chrome в правом верхнем углу окна расширения.

Использование добавочного номера

  1. Расширение Zoom Chrome установит значок рядом с адресной строкой Chrome. Если вы нажмете кнопку «Масштаб», откроется расширение Chrome.
  2. Войдите в свою учетную запись Zoom.
  3. После входа в систему у вас появятся дополнительные возможности в расширении Chrome:
    • Запланировать встречу : Нажмите «Запланировать встречу», чтобы открыть новое событие в Календаре Google.
    • Начать собрание : наведите указатель мыши на «Начать собрание», чтобы выбрать начало с видео или начало без видео. Узнайте больше о мгновенных встречах.
    • Имя / адрес электронной почты: Щелкните свое имя или адрес электронной почты, чтобы открыть страницу профиля Zoom.
    • Значок шестеренки : щелкните значок шестеренки, чтобы открыть настройки собрания Zoom.

Планирование встречи из Google Calendar

Примечание : настройки вашего планировщика синхронизируются с веб-порталом Zoom.

Вы также можете сделать так, чтобы любой Календарь Google пригласил на собрание Zoom.

  1. Создайте новое событие календаря или отредактируйте существующее событие календаря.
  2. Откройте дополнительные параметры для события.
    • Для нового календарного события щелкните Дополнительные параметры .
    • Для существующего календарного события щелкните значок карандаша.
  3. Щелкните Сделайте встречу Zoom .
  4. Это создаст собрание Zoom и добавит в описание детали собрания.
  5. Нажмите Сохранить .

Примечание : Если вы переназначаете встречу Zoom из Календаря Google, отредактируйте запись в календаре и измените дату / время встречи. Не перетаскивайте событие календаря и не копируйте сведения о собрании в другую запись календаря.

Параметры планирования расширения Chrome

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

  • Расписание для : Если у вас есть права планирования для другого пользователя, вы сможете выбрать, кого вы хотите запланировать, из раскрывающегося списка. Узнайте больше о привилегиях планирования.
  • Номер встречи
    • Создать автоматически : создать случайный уникальный идентификатор встречи.
    • Идентификатор персональной встречи : используйте свой идентификатор персональной встречи.
  • Безопасность
    • Код доступа : введите код доступа к собранию.Присоединяющиеся участники должны будут ввести это перед присоединением к запланированной встрече.
      Примечание : Код доступа к собранию должен соответствовать требованиям сложности, установленным администратором.
    • Зал ожидания : включить зал ожидания для собрания.
    • Только авторизованные пользователи могут присоединиться. : Ограничить доступ к собранию, чтобы только зарегистрированные пользователи могли присоединиться.
  • Шифрование : выберите для вашей встречи стандартное шифрование Enhanced и сквозное шифрование .
  • Видео
    • Хост : выберите, хотите ли вы, чтобы видео организатора было включено или выключено при присоединении к совещанию. Даже если вы выберете выключение, ведущий сможет запустить свое видео.
    • Участники : Выберите, хотите ли вы включать или выключать видео участников при присоединении к собранию. Даже если вы выберете выключение, участники смогут начать свое видео.
  • Аудио * : Разрешить пользователям звонить, используя Телефон только , Компьютерное аудио только , Оба или Стороннее аудио (если включено для вашей учетной записи).
  • Требовать регистрации : участникам необходимо будет заполнить регистрационную форму, прежде чем получить ссылку для присоединения к собранию. Вопросы регистрации и другие параметры можно настроить на веб-портале.
  • Включить присоединение до организатора: Разрешить участникам присоединяться к собранию без вас или до того, как вы присоединитесь. Встреча закончится через 40 минут для базовых (бесплатных) абонентов.
  • Отключить звук участникам при входе : Если присоединиться до организатора не разрешено, это отключит всех участников, когда они присоединятся к собранию.
  • Добавить водяной знак, идентифицирующий просматривающего участника. : Добавить водяной знак на общий контент во время собрания. Узнайте больше о добавлении водяного знака.
  • Записывать собрание автоматически : Установите этот флажок, если хотите, чтобы собрание записывалось автоматически. Выберите, хотите ли вы, чтобы он записывался локально (на ваш компьютер) или в облако (zoom.us/recording).
  • Показать в списке общедоступных событий : Добавьте эту встречу в список публичных мероприятий (если это разрешено для вашей учетной записи).Узнайте больше о списке публичных мероприятий.
  • Утвердить или запретить доступ для пользователей из определенных регионов и стран : Организатор может либо разрешить присоединение только участникам из определенных округов / регионов, либо заблокировать всех участников из определенных округов / регионов.
  • Включить ссылку для приглашения в поле расположения : Ссылка для присоединения к собранию будет включена в поле расположения календарного события, а также в описание.
  • Альтернативные организаторы : введите адрес электронной почты другого пользователя Zoom, имеющего лицензию, в своей учетной записи, чтобы позволить им начать встречу в ваше отсутствие.Узнайте больше об альтернативном хосте.

Отображать параметры планирования каждый раз

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

  1. Щелкните значок расширения рядом с адресной строкой.
  2. Щелкните значок шестеренки.
  3. Выберите один из следующих вариантов:
    • Требовать пароль встречи : вводить каждый раз вручную
    • Расписание для: Разрешить выбирать каждый раз
    • Альтернативный хост: Разрешить выбирать каждый раз
  4. Параметры планирования теперь будут появляться каждый раз, когда вы выбираете Сделать встречу Zoom .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

2024 © Все права защищены. Карта сайта