Открытие ссылки в новой вкладке: Chrome Extension

Быстрый ответ

Для открытия ссылки в новой вкладке при помощи расширения Chrome используйте метод chrome.tabs.create({ url: "http://www.yoursite.com" }). Не забывайте при этом указывать разрешение "tabs" в файле manifest.json:

// "Откройтесь, новые вкладки, как волшебные двери!"
chrome.tabs.create({ url: "http://www.yoursite.com" });

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

Лучшие практики создания вкладок

Обновление до последней версии для безопасности

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

Подробнее об этом расскажет наш спикер на видео

Использование фоновых скриптов для организации кода

Фоновые скрипты – это ваш секретный помощник. Добавьте страницу фонового скрипта в ваш manifest.json для удобства управления кодом. Это упростит отладку и поможет поддерживать порядок в проекте.

Перенос скриптов в отдельные файлы для повышения производительности

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

Встроенные скрипты: пережиток прошлого

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

Тестирование в разных браузерных средах

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

Советы по программированию

Добавление динамики с помощью JavaScript и jQuery

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

// "Не нажимайте на меня, я сам откроюсь!" – каждая ссылка.
document.querySelectorAll('a[target="_blank"]').forEach(link => {
  link.addEventListener('click', event => {
    // Вуаля, вкладка готова!
    chrome.tabs.create({ url: link.href });
  });
});

Альтернативный метод: window.open()

Иногда может оказаться необходимым window.open() для работы с особенностями окон. Это отличная альтернатива chrome.tabs.create().

Походка по жизненному циклу вкладки

| Основные этапы               | События в жизни вкладки Chrome |
| ----------------------------- | ---------------------------- |
| Клик на ссылку                | 🖱️→🔗                       |
| Браузер без расширения        | Открывается в текущей вкладке ↩️ |
| Браузер с активированным расширением | Открывается в новой вкладке 🆕🔲 |

Запомните:

<a href="https://example.com" target="_blank">Готов к новому путешествию 🛩️</a>

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

Рекомендации по улучшению UX

Сохранение фокуса на всплывающем окне

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

// "Я предпочту остаться в тени." – так бы сказала новая вкладка.
chrome.tabs.create({ url: "http://www.yoursite.com", active: false });

Блокировка стандартного поведения события

Управление вкладками может потребовать блокировки стандартного действия при клике:

element.addEventListener('click', event => {
  event.preventDefault(); // "СТОП! Это мое событие, и я решаю, что с ним делать!"
  // Начинаем приключение в новой вкладке!
});

Правилное составление файла manifest.json

Ключ к успешному расширению – грамотно составленный файл manifest.json. Убедитесь, что все разрешения и настройки указаны корректно для правильной работы функции создания вкладок.

Будьте вкурсе, оставайтесь на шаг впереди

Хотите всегда быть на шаг впереди? Следите за новостями и обновлениями Chrome, изучайте лучшие практики. Вашим источником знаний будет developer.chrome.com.

Полезные материалы

1. chrome.runtime | Chrome для разработчиков – API расширений Chrome, упрощающее коммуникацию внутри расширения.
2. tabs.create() – Mozilla | MDN — Руководство по использованию метода создания новой вкладки в расширениях Firefox.
3. Обмен сообщениями | Chrome для разработчиков – Методы обмена сообщениями в расширениях Chrome.
4. GitHub – GoogleChrome/chrome-extensions-samples: Примеры расширений Chrome — Официальная коллекция примеров для разработки расширений Chrome.
5. Content scripts | Chrome для разработчиков — Подходы к интеграции скриптов в веб-страницы при помощи расширений Chrome.