Как создать плагин для браузера

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

Google предоставляет подробную документацию о том, как сделать расширение для браузера Chrome. И помните, что браузерное расширения — это просто HTML, CSS и JavaScript. Вы можете добавлять библиотеки и фреймворки или разрабатывать код «старомодным» способом.

Настройка

Что нужно знать:

  • Обратные вызовы;
  • Таймауты;
  • Инструменты разработчика Chrome.

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

Настройка

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

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

Как создать расширение для Google Chrome #1. Несложный пример.

Документация

  • Руководство Google по расширениям браузера .
  • Руководство по началу работы .
  • Обзор по расширениям Chrome .

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

Документация

Изображение, которое описывает архитектуру расширения.

Документация - 2

Файл background.js является обработчиком событий расширения. Он постоянно прослушивает события браузера, которые вы передаете через Chrome Extension API . Google говорит, что эффективный фоновый скрипт загружается только тогда, когда он необходим, и выгружается, когда простаивает.

Popup — это маленькое окно, которое появляется при клике по иконке расширения в меню Chrome. Оно состоит из разметки и скрипта. Вы можете указать браузеру, где его найти, в разделе manifest.json — page_action: < «default_popup»: FILE_NAME_HERE >.

Страница параметров является именно тем, что ожидается. На ней отображаются настраиваемые параметры, выводимые пользователю, только когда он кликает правой кнопкой мыши в меню Chrome и выбирают пункт «Параметры» для расширения. Эта страница также состоит из разметки и скриптов. Вы можете указать браузеру, где ее найти, в разделе options_page: FILE_NAME_HERE файла manifest.json.

Вернуть значок звук на яндекс браузере

Отладка

Перед началом не забудьте ознакомиться с руководством по отладке !

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

Например, при тестировании расширения я получила ошибку “This request exceeds the MAX_WRITE_OPERATIONS_PER_HOUR quota”. Оказывается, существуют ограничения на синхронизацию хранимой информации .

Создание плагина для браузера

Еще одна ошибка, которую я продолжала получать: “Alarm delay is less than minimum of 1 minutes. In released .crx, alarm “ ALARM_NAME_HERE” will fire in approximately 1 minutes” . Оказывается, есть минимальные интервалы времени для предупреждений .

Старые добрые console.log действительно могут помочь с обратными вызовами и прослушивателями!

Отладка

Я добавила кучу «console.log», пытаясь убрать предупреждения.

Функционал Eye Rest

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

Схема работы расширения:

  • Если расширение работает,
  • Если пользователь не нажал кнопку «Пауза» во всплывающем окне,
  • Если счетчик во всплывающем окне достиг отметки 00:00, ТОГДА
  • Открывается новое окно с HTML-таймером, И
  • Начинается 20-секундный обратный отсчет в HTML-таймере, И
  • Сбрасывается счетчик всплывающего окна на 20:00.
  • Закрыть это окно и повторить цикл заново.

Звучит довольно просто, но эти таймеры запутали меня. Чтобы понять суть проблемы, посетите репозиторий GitHub для Eye Rest .

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

Таймеры

Таймеры Chrome — это в основном setTimeout и setInterval. Для получения дополнительной информации, ознакомьтесь с документацией .

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

Фоновые скрипты

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

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

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

Как в Опера добавить сайт в доверенные

Другие API

Windows

Для создания окна таймера используется Windows API . Этот процесс инициируется фоновым скриптом . Я передаю timer.html , type, size, position и другие визуальные опции как параметр URL.

Хранилище

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

Обратный отсчет должен изменяться каждую секунду. Он довольно сложный, и для этого нужно много записей. Вот почему я выбрала вариант локального хранилища. Вы можете увидеть, как я получаю и устанавливаю эти переменные в скриптах Background, Helper и Popup. Найдите в коде date, nextAlarmTime и isPaused.

Declarative Content

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

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

Расширение

Расширение

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

Расширение - 2

И вот как оно выглядит с новыми стилями.

А вот как выглядят окно таймера и всплывающее окно!

Публикация

Публикация расширения стандартизирована : архивируете файлы, создаете новую или используете существующую учетную запись Google Developer, загружаете файлы, добавляете некоторые данные и платите 5 долларов США. После этого ваше расширение будет доступно в магазине Chrome. Мое расширение теперь доступно для установки .

Заключение

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

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

Источник

How to Write Your Own Browser Extension [Example Project Included]

Abhilekh Gautam

Abhilekh Gautam

How to Write Your Own Browser Extension [Example Project Included]

In this article we will talk about Browser extensions – what they are, how they work, and how you can build your own.

We will finish by actually writing our own extension (Super Fun!) which allows us to copy any code snippet to our clipboard with a click of a single button.

To continue with this article:

  • You need to have a basic understanding of JavaScript.
  • You need the Firefox browser (or any other browser will also work)
Как установить браузер Хром по умолчанию

What is a Browser Extension?

A browser extension is something you add to your browser which enhances your browsing experience by extending the capacity of your browser.

As an example, think about an ad blocker which you might have installed on your device. This makes your browsing experience better by blocking ads when you surf the web.

How to Write Your Own Basic Browser Extension

Now let’s start by writing a very basic extension.

To begin, we’ll create a folder inside which we create a file named manifest.json .

What is a manifest file?

A manifest file is a must have file in any browser extension. This file contains basic data about our extension like name, version, and so on.

Now inside the manifest.json file copy the following snippet:

How to load the extension file

For Firefox users, follow these steps:

In the address bar, search for this:

You will see an option to Load Temporary Add-on. Click on that option and choose the manifest.json file from the directory.

For Chrome users:

In the address bar search for this:

  • Enable Developer Mode and switch into it.
  • Click the Load unpacked button and select the extension directory.

Hurray! You’ve installed the extension successfully. But the extension doesn’t do anything currently. Now let’s add some functionality to our extension. To do this, we’ll edit our manifest.json file like this:

Now inside the same directory create a main.js file and add the following code:

Now reload the extension and when you visit any URLs you will see an alert message.

Don’t forget to reload the extension anytime you edit the code.

How to Customize Your Browser Extension

Now let’s have some more fun with our extension.

What we are going to do now is create a web extension that changes all the images of a webpage we visit to an image we choose.

For this, just add any image to the current directory and change the main.js file to:

Let’s see whats going on here:

This line of code selects all the elements in the web page with the img tag .

Then we loop through the array images using a for loop where we change the src attribute of all the img elements to a URL with the help of the runtime.getURL function.

Как убрать небезопасное соединение в Яндекс Браузере

Here pp.jpg is the name of the image file in the current directory in my device.

Then just reload the extension and visit any URL you like. Now you should see all the images being changed to the image which is in your current working directory.

How to add icons to your extension

Add the following code in the manifest.json file:

How to add a toolbar button to your extension

Now we’ll add a button located in the toolbar of your browser. Users can interact with the extension using this button.

To add a toolbar button, add the following lines to the manifest.json file:

All the image files should be present in your current directory.

Now, if we reload the extension we should see an icon for our extension in the toolbar of our browser.

How to add listening events for the toolbar button

Maybe we want to do something when a user clicks the button – let’s say we want to open a new tab every time the button is clicked.

For this, we’ll again add the following to the manifest.json file:

Then we’ll create a new file named background.js in the current working directory and add the following lines in the file:

Now reload the extension!

Whenever someone clicks the button, it calls the openTab function which opens a new tab with the URL that links to my twitter profile. Also, the active key, when set to true, makes the newly created tab the current tab.

Now that we’ve learned some of the basics of browser extensions, let’s create an extension that we as developers can use in our daily lives.

Final Project

Alright, now we’re going to write something that will be useful for us in daily life. We’ll create an extension that allows you to copy code snippets from StackOverflow with a single click. So our extension will add a Copy button to the webpage which copies the code to our clipboard.

demo

First we’ll create a new folder/directory, inside which we’ll add a manifest.json file.

Add the following code to the file:

Now create another JavaScript file called main.js in the same directory and add the following lines of code:

Как посмотреть лог ошибок браузера Яндекс

First of all, I selected all the elements with the class name s-code-block – but why? This is because when I inspected StackOverflow’s site I found that all the code snippets were kept in a class with that name.

And then we loop through all those elements and append a button in those elements. Finally, we just position and style the button properly (the styling’s not perfect yet – this is just a start).

When we load the extension using the process we went through above and visit StackOverflow, we should see a copy button.

How to add functionality to the button

Now, when the button is clicked we want the entire snippet to be copied to our clip board. To do this, add the following line of code to the main.js file:

First of all, we select all the buttons we have added to the site using querySelectorAll . Then we listen for the click event whenever the button is clicked.

The above line of code copies the code to our clipboard. Whenever a snippet is copied we alert the user with the message Copied to clipboard and we are done.

Final Words

Web Extensions can be useful in various way and I hope with the help of this article you will be able to write your own extensions.

All the code can be found in this GitHub repository. Don’t forget to give a pull request anytime you come up with some good styling or a new feature like clipboard history and others.

Happy Coding!

Abhilekh Gautam

Abhilekh Gautam

Programming is my hobby these days.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник
Рейтинг
Загрузка ...