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

Ранее я уже добавлял в Chrome «Hello World»-расширение созданное по этому официальному мануалу, но оно не подходило в качестве примера манипуляций с DOM. Поэтому пришлось еще поискать и найти эту, еще одну официальную страницу примеров различных расширений, с применением всех возможностей API для Chrome Extensions.

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

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

// Copyright (c) 2011 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
 
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  console.log('Looking on the page' + tab.url + ' element with desired classname');
  chrome.tabs.executeScript({
    code: 'var testElements = document.getElementsByClassName("search-item"); var el = testElements[0]; if (el) {el.style.resize = "vertical"}'
  });
});

Соответственно, суть кода проста: при клике на православную иконку расширения, срабатывает листнер, в коде которого Chrome выполняет скрипт для текущей вкладки. Скрипт просто ищет какой-то элемент с классом «search-item», и, если находит хотя бы один, меняет ему значение стилевого атрибута resize на vertical.

И содержимое файла manifest.json, без которого не получится установить распакованное расширение в Chrome на странице chrome://extensions/ по кнопке «Загрузить распакованное расширение»:

{
  "name": "Element Resizer",
  "description": "Add resize control to element",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Add resize control to element"
  },
  "manifest_version": 2
}

Что получается в итоге после клика на кнопку нашего расширения, слева направо:

В это расширение очень легко добавить свою собственную иконку, для этого достаточно добавить строку «default_icon»: «icon.png» в описание объекта «browser_action» манифеста, и добавить саму картинку иконки icon.png в папку с 2-мя остальными файлами расширения. Все остальные тонкости подробно описаны в официальной документации, и описывать их сейчас в рамках этого простого расширения думаю смысла нет. Но если какие-то вопросы все-же возникнут, то напишите их в комментариях.