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); // регистрируем обработчик события, срабатывающий при клике на меню.