13.

Feb 02, 2013 20:58

Простой пример использования Context menu для Хрома.

Меню навешивается на правый клик мыши, и вызывается по клику на заданном элементе, в данном случае, на выделенном участке текста, для того чтобы подсчитать число символов в нем ( не считая пробелы и прочие символы-разделители).

Любое расширение начинается с его описания в файле manifest.json, где указываются параметры расширения посредством (очевидно же) JSON

Для приводимого простого примера файл manifest.json выглядит следующим образом:

{
  "name": "Selection stats ",// Имя
  "version": "1.0",// Версия
  "manifest_version": 2,// Важно указать именно 2!
  "description": "Selection stats",// Описание
  "icons": { "16": "icon16.png" }, // иконка, которая появится в меню по правому клику мыши
  "background": {"scripts": ["selectionStats.js"]}, // Фоновый скрипт, регистрирующий само меню и обработчики событий
  "permissions":["contextMenus"] // Важно указать это разрешение для работы с context menus
}

содержание фонового скрипта, работающего на фоновой (background) странице соответственно выглядит следующим образом:

var createProperties={title:"Selection Stats", contexts:["selection"]} // объект createProperties имеет много свойств, из которых в данном конкретном случае задействованы всего 2 - название меню и для какого объекта оно применяется. Возможны следующие варианты "all", "page", "frame", "selection", "link", "editable", "image", "video", "audio", "launcher", но из всех вариантов нужен только один - выделенный текст

var calculateStats=function (info, tabs)
{
// функция - обработчик события, принимает два аргумента - объект OnClickData (с информацией о кликнутом объекте) и объект с информацией об окне

var text=info.selectionText; // в данном конкретном случае, объект info содержит свойство selectionText с выделенным текстом

var pattern=/\s/g;// регэскп для глобального поиска всех пробелов и прочих разделителей.

var whiteSpaces=text.match(pattern); // поиск пробелов

if (!whiteSpaces) whiteSpaces=0; else whiteSpaces=whiteSpaces.length;

var numberOfLetters=text.length-whiteSpaces;// сколько же символов в выделенном тексте без учета пробелов?

alert("Число символов без пробелов= "+numberOfLetters);

};

chrome.contextMenus.create(createProperties); // создаем меню

chrome.contextMenus.onClicked.addListener(calculateStats); // регистрируем обработчик события, срабатывающий при клике на меню.
Previous post Next post
Up