Getting started

Let extensions read and change site data

Some extensions need permission to read and change site data. You can change your extensions’ permissions anytime.

On your computer, open Chrome .
At the top right, click Extensions .
Click More point to «This can read and change site data.»
Decide which permission to give the extension:
- When you click the extension: This setting only allows the extension to access the current site in the open tab or window when you click the extension. If you close the tab or window, you’ll have to click the extension to turn it on again.
- On : Allow the extension to automatically read and change data on the current site.
- On all sites: Allow the extension to automatically read and change data on all sites.

Add or remove access to a specific site

On your computer, open Chrome.
At the top right, click More More tools Extensions.
On the extension, click Details.
Under “Permissions,” add or remove a site:
- Add: To the right of “Allowed sites,” click Add.
- If you don’t see this option, change “Allow this extension to read and change all your data on websites you visit” to On specific sites.
- Remove: To the right of the site, tap More Remove.

Add functionality #

Маска для полей формы.маски ввода для текстовых полей

The extension is now installed, but it doesn’t currently do anything because we haven’t told it what to do or when to do it. Let’s fix that by adding some code to store a background color value.

To do this, we will need to create a background script and add it to the extension’s manifest. Start by creating a file named inside the extension’s directory.

Background scripts, like many other important components, must be registered in the manifest. Registering a background script in the manifest tells the extension which file to reference, and how that file should behave.

Chrome is now aware that the extension includes a service worker. When you reload the extension, Chrome will scan the specified file for additional instructions, such as important events it needs to listen for.

This extension will need information from a persistent variable as soon as its installed. Start by including a listening event for in the background script. Inside the listener, the extension will set a value using the storage API. This will allow multiple extension components to access that value and update it.

Most APIs, including the storage API, must be registered under the field in the manifest for the extension to use them.

Navigate back to the extension management page and click the Reload link. A new field, Inspect views, becomes available with a blue link, background page.

Click the link to view the background script’s console log, «»

Mate Translate

Преобразовываем формат png в pdf

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

Mate Translate умеет переводить страницы целиком на несколько языков, показывает словарные дефиниции для отдельных слов (независимо от языка), а также предлагает встроенный в панель управления интерфейс для перевода фраз или слов, которых вовсе нет на странице.

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

Mercury Reader

Модальное окно bootstrap: разработка формы входа, регистрации и восстановления пароля

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

Mercury Reader запускается практически на любой странице нажатием комбинации клавиш Control/Command + Esc. Сразу после нажатия открытая статья превратится в страницу книги без баннеров и специфичных шрифтов.

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

Introduce a user interface #

Extensions can have many forms of a user interface; this one will use a . Create and add a file named to the extension’s directory. This extension uses a button to change the background color.

Like the background script, this file must be declared in the manifest in order for Chrome to present it in the extension’s popup. To do this, add an object to the manifest and set as the action’s .

This popup’s HTML references an external CSS file named . Add another file to the extension’s directory, name it appropriately, and add the following code.

Designation for toolbar icons is also included under in the field. Download the images folder here, unzip it, and place it in the extension’s directory. Update the manifest so the extension knows how to use the images.

Extensions also display images on the extension management page, the permissions warning, and favicon. These images are designated in the manifest under .

If the extension is reloaded at this stage, it will include the provided icon rather than the default placeholder, and clicking the action will open a popup with button with default colors.

The last step for the popup UI is adding color to the button. Create and add a file named with the following code to the extension’s directory.

This code grabs the button from and requests the color value from storage. It then applies the color as the background of the button. Include a script tag to in .

Reload the extension to view the green button.

Add instruction #

Although the extension has been installed, it has no instruction. Introduce a background script by creating a file titled , or downloading it here, and placing it inside the extension directory.

Background scripts, and many other important components, must be registered in the manifest. Registering a background script in the manifest tells the extension which file to reference, and how that file should behave.

The extension is now aware that it includes a non-persistent background script and will scan the registered file for important events it needs to listen for.

This extension will need information from a persistent variable as soon as it’s installed. Start by including a listening event for in the background script. Inside the listener, the extension will set a value using the storage API. This will allow multiple extension components to access that value and update it.

Most APIs, including the storage API, must be registered under the field in the manifest for the extension to use them.

Navigate back to the extension management page and click the Reload link. A new field, Inspect views, becomes available with a blue link, background page.

Click the link to view the background script’s console log, «»

Take the next step #

Congratulations! The directory now holds a fully-functional, albeit simplistic, Chrome extension.

What’s next?

The Chrome Extension Overview backs up a bit, and fills in a lot of detail about the Extensions architecture in general, and some specific concepts developers will want to be familiar with.
Learn about the options available for debugging Extensions in the debugging tutorial.
Chrome Extensions have access to powerful APIs above and beyond what’s available on the open web. The chrome.* APIs documentation will walk through each API.
The developer’s guide has dozens of additional links to pieces of documentation relevant to advanced extension creation.

Give users options #

The extension currently only allows users to change the background to green. Including an options page gives users more control over the extension’s functionality, further customizing their browsing experience.

Start by creating a file in the directory called and include the following code, or download it here.

Then register the options page in the manifest,

Reload the extension and click DETAILS.

Scroll down the details page and select Extension options to view the options page, although it will currently appear blank.

Last step is to add the options logic. Create a file called in the extension directory with the following code, or download it here.

Four color options are provided then generated as buttons on the options page with onclick event listeners. When the user clicks a button, it updates the color value in the extension’s global storage. Since all of the extension’s files pull the color information from global storage no other values need to be updated.

Events

onRequest

Deprecated. Please use .

Fired when a request is sent from either an extension process or a content script.

Event

listener
function

The listener parameter should be a function that looks like this:
- request
  any
  
  The request sent by the calling script.
- sender
- sendResponse
  function
  
  The sendResponse function looks like this:

Deprecated. Please use .

Fired when a request is sent from another extension.

Event

listener
function

The listener parameter should be a function that looks like this:
- request
  any
  
  The request sent by the calling script.
- sender
- sendResponse
  function
  
  The sendResponse function looks like this:

Uninstall an extension

To the right of your address bar, look for the extension’s icon. Right-click the icon and select Remove from Chrome.

If you don’t see the extension’s icon:

On your computer, open Chrome.
At the top right, click More More tools Extensions.
On to the extension you want to remove, click Remove.
Confirm by clicking Remove.

Use extensions on any computer

To use your extensions on any computer, sign in to Chrome.

Arrange on your toolbar

To the right of your address bar, find your extensions’ icons.

On your computer, open Chrome.
Drag the extension’s icon to its new place.

Hide extensions

To hide individual extensions:
1. Right-click the icon.
2. Select Unpin.
To see your hidden extensions: Click Extensions .

Better History

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

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

Также Better History совершенствует встроенный поиск, чтобы можно было искать не только по названию сайтов, но и по контенту, который эти сайты в себе содержали. Это уж точно поможет разыскать забытую страницу.

Create the manifest #

Extensions start with their manifest. Create a file called and include the following code.

The directory holding the manifest file can be added as an extension in developer mode in its current state.

Open the Extension Management page by navigating to .
- Alternatively, open this page by clicking on the Extensions menu button and selecting Manage Extensions at the bottom of the menu.
- Alternatively, open this page by clicking on the Chrome menu, hovering over More Tools then selecting Extensions
Enable Developer Mode by clicking the toggle switch next to Developer mode.
Click the Load unpacked button and select the extension directory.

Ta-da! The extension has been successfully installed. Because no icons were included in the manifest, a generic icon will be created for the extension.

Session Buddy

Session Buddy упрощает менеджмент открытых вкладок. Это расширение заменяет стандартную новую вкладку страницей со всеми используемыми сайтами и недавно запущенными сессиями (то есть окнами с определенным набором вкладок).

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

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

Give users options #

Start by creating a file in the directory named and include the following code.

Then register the options page in the manifest,

Reload the extension and click DETAILS.

Scroll down the details page and select Extension options to view the options page.

The last step is to add the options logic. Create a file named in the extension’s directory with the following code.

Four color options are provided then generated as buttons on the options page with onclick event listeners. When the user clicks a button, it updates the color value in the extension’s storage. Since all of the extension’s files pull the color information from this storage, no other values need to be updated.

Install an extension

Important: You can’t add extensions when you browse in Incognito mode or as a guest.

Open the Chrome Web Store.
Find and select the extension you want.
Click Add to Chrome.
Some extensions will let you know if they need certain permissions or data. To approve, click Add extension
Important: Make sure you only approve extensions that you trust.

.

To use the extension, click the icon to the right of the address bar.

If you’re using a computer through your work or school, your organization might block some extensions.

Install on your phone

On your phone, open the Chrome app . If you haven’t yet, sign in to Chrome.
Find the extension you want.
Tap Add to Desktop.
Confirm by tapping Add to Desktop.

The next time you open Chrome on your computer, you’ll see a message that the extension was installed. If the extension needs some permissions, you’ll be asked. To approve, click Enable extension.

Install with a Windows or Mac application

Sometimes, when you install an application on Windows or Mac, it also installs a Chrome extension. The next time you open Chrome:

To grant permissions and use the extension, click Enable.
To delete the extension, click Remove.

Methods

getBackgroundPage

Returns the JavaScript ‘window’ object for the background page running inside the current extension. Returns null if the extension has no background page.

Returns

returns
Window

getExtensionTabs

Deprecated. Please use .

Returns an array of the JavaScript ‘window’ objects for each of the tabs running inside the current extension. If is specified, returns only the ‘window’ objects of tabs attached to the specified window.

windowId
number

Returns

returns
Window[]

Array of global window objects

getURL

Deprecated since Chrome 58. Please use .

Converts a relative path within an extension install directory to a fully-qualified URL.

path
string

A path to a resource within an extension expressed relative to its install directory.

Returns

returns
string

The fully-qualified URL to the resource.

getViews

Returns an array of the JavaScript ‘window’ objects for each of the pages running inside the current extension.

fetchProperties
object
- tabId
  
  number optional
  
  Since Chrome 54.
  
  Find a view according to a tab id. If this field is omitted, returns all views.
- type
  
  optional
  
  The type of view to get. If omitted, returns all views (including background pages and tabs). Valid values: ‘tab’, ‘notification’, ‘popup’.
- windowId
  
  number optional
  
  The window to restrict the search to. If omitted, returns all views.

Returns

returns
Window[]

Array of global objects

isAllowedFileSchemeAccess

Retrieves the state of the extension’s access to the ‘file://’ scheme (as determined by the user-controlled ‘Allow access to File URLs’ checkbox.

callback
function

The callback parameter should be a function that looks like this:

isAllowedIncognitoAccess

Retrieves the state of the extension’s access to Incognito-mode (as determined by the user-controlled ‘Allowed in Incognito’ checkbox.

callback
function

The callback parameter should be a function that looks like this:

sendRequest

Deprecated. Please use .

Sends a single request to other listeners within the extension. Similar to , but only sends a single request with an optional response. The event is fired in each page of the extension.

extensionId

string optional

The extension ID of the extension you want to connect to. If omitted, default is your own extension.
request
any
responseCallback
function

The responseCallback function looks like this:

setUpdateUrlData

Sets the value of the ap CGI parameter used in the extension’s update URL. This value is ignored for extensions that are hosted in the Chrome Extension Gallery.

AdGuard

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

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

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

Layer logic #

The extension now knows the popup should be available to users on developer.chrome.com and displays a colored button, but needs logic for further user interaction. Update to include the following code.

The updated code adds an event on the button, which triggers a . This turns the background color of the page the same color as the button. Using programmatic injection allows for user-invoked content scripts, instead of auto inserting unwanted code into web pages.

The manifest will need the permission to allow the extension temporary access to the API. This enables the extension to call .

The extension is now fully functional! Reload the extension, refresh this page, open the popup and click the button to turn it green! However, some users may want to change the background to a different color.

Introduce a user interface #

Extensions can have many forms of a user interface, but this one will use a . Create and add a file titled to the directory, or download it here. This extension uses a button to change the background color.

Like the background script, this file needs to be designated as a popup in the manifest under .

Extensions also display images on the extension management page, the permissions warning, and favicon. These images are designated in the manifest under .

If the extension is reloaded at this stage, it will include a grey-scale icon, but will not contain any functionality differences. Because is declared in the manifest, it is up to the extension to tell the browser when the user can interact with .

Add declared rules to the background script with the API within the listener event.

The extension will need permission to access the API in its manifest.

The browser will now show a full-color page action icon in the browser toolbar when users navigate to a URL that contains . When the icon is full-color, users can click it to view popup.html.

The last step for the popup UI is adding color to the button. Create and add a file called with the following code to the extension directory, or downloaded here.

This code grabs the button from and requests the color value from storage. It then applies the color as the background of the button. Include a script tag to in .

Reload the extension to view the green button.

Take the next step #

Congratulations! The directory now holds a fully-functional, albeit simplistic, Chrome extension.

What’s next?

The Chrome Extension Overview backs up a bit, and fills in a lot of detail about the Extensions architecture in general, and some specific concepts developers will want to be familiar with.
Learn about the options available for debugging Extensions in the debugging tutorial.
Chrome Extensions have access to powerful APIs above and beyond what’s available on the open web. The chrome.* APIs documentation will walk through each API.
The developer’s guide has dozens of additional links to pieces of documentation relevant to advanced extension creation.

Unshorten.link

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

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

1Password X

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

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

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

Manage your extensions

On your computer, open Chrome.
At the top right, click More More tools Extensions.
Make your changes:
- Turn on/off: Turn the extension on or off.
- Allow incognito: On the extension, click Details. Turn on Allow in incognito.
- Fix corruptions: Find a corrupted extension and click Repair. Confirm by clicking Repair extension.
- Allow site access: On the extension, click Details. Next to “Allow this extension to read and change all your data on websites you visit,” change the extension’s site access to On click, On specific sites, or On all sites.

Remove possible malware

If you repaired an extension but it’s still corrupted, a suspicious program might be changing this extension’s files.

On Windows computers, Check your computer for malware.
On Windows, Mac, or Linux computers, run an antivirus or anti-malware software. Remove any software programs that may be affecting Chrome.
On all computers, repair the extension:
1. On your computer, open Chrome.
2. At the top right, click More More tools Extensions.
3. Find a corrupted extension and click Repair. Confirm by clicking Repair.
If this doesn’t work, visit the and share your situation with us.

Layer logic #

The extension now has a custom icon and a popup, and it colors the popup button based on a value saved to the extension’s storage. Next, it needs logic for further user interaction. Update by adding the following to the end of the file.

The updated code adds a event listener to the button, which triggers a . This turns the background color of the page the same color as the button. Using programmatic injection allows for user-invoked content scripts, instead of auto inserting unwanted code into web pages.

The manifest will need the permission to allow the extension temporary access to the current page, and the permission to use the Scripting API’s method.