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

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

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

Реальные примеры продуктов из CWS:

Pixel Measurement – добавляет функционал для измерения расстояния в пикселях между элементами на любом сайте:

Создаем sample-расширение

Создадим простое расширение, которое откроет простое сообщение hello world на сайтах с помощью контент-cкриптов.

Итоговая реализация состоит из 2 файлов.

Основная логика в background.js.

В данном скрипте добавлен механизм динамического подключения скриптов расширения не только к страницам, открытым ПОСЛЕ установки расширения, но и к «старым» страницам, открытым ДО установки расширения (при этом их перезагрузка не требуется).


// Function to inject the alert script to the page
function injectScript(tabId) {
  chrome.scripting.executeScript({
    target: { tabId: tabId },
    func: () => {
      alert('hello world');
    }
  });
}

// Inject script to all existing tabs when extension is installed
chrome.runtime.onInstalled.addListener(() => {
  chrome.tabs.query({ url: ['http://*/*', 'https://*/*'] }, (tabs) => {
    for (const tab of tabs) {
      injectScript(tab.id);
    }
  });
});

// Inject script to new tabs when they are updated and completed loading
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url && (tab.url.startsWith('http') || tab.url.startsWith('https'))) {
    injectScript(tabId);
  }
});

background.js

⚠️

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

Теперь проанализируем такую ситуацию:

Пользователь переходит на youtube.com. Находит видео, которое длится 3 часа. Понимает, что ему нужна транскрибация этого видео, чтобы изучить его за 10 минут, а не 3 часа.

Пользователь идет в Google и вводит YouTube to Text, пытаясь найти продукт для решения своей проблемы.

Пользователь находит наше расширение YouTube to Text и устанавливает его.

Пользователь переходит на вкладку с видео (помним, она была открыта ДО установки расширения!) и видит, что виджет транскрибации не появился.

Почему он не появился? Страница с видео была открыта ДО установки расширения. Однако пользователь не знает эти технические нюансы – он не видит виджет транскрибации (который мы ему пообещали) и думает, что расширение не работает. Затем удаляет его и возвращается в поисковую выдачу искать другие продукты.

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

Это одна из самых неочевидных причин, почему в CWS так много продуктов, которые встраивают виджеты на сайты, с низким количеством пользователей из-за плохих поведенческих факторов.

Также присутствует основной файл расширения manifest.json:


{
  "manifest_version": 3,
  "name": "Hello World Alert",
  "version": "1.0",
  "description": "Adds alert to all pages",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["scripting", "tabs"],
  "host_permissions": ["<all_urls>"]
}

manifest.json

Расширения, которые встраивают скрипты на сайты

Создаем sample-расширение