Как рисовать в браузере firefox
Логику расширения пишут на JS, интерфейс пользователя создают с помощью HTML+CSS, а файл настроек пишут на INI/JSON/XML.
Для написания расширений достаточно блокнота.
4. Зачем нужен этот топик? Вон статья на хабре, вон оф. документация, вон ещё статья на хабре, что ещё надо?
1) Вам не нужно - вы и не создавайте топиков, и этот не читайте. А некоторым нужно. Мне бы в своё время пригодился.
2) По расширениям к хрому инфа и правда есть, но вот с огнелисом и оперой сложнее. Про оперу - см. выше.
3) Я не прошу отправлять этот топик в важные ( хотя буду рад, если он туда попадёт ), не буду его апить каждые полчаса. Так что вам он не мешает ничем. Не нужно его трогать.
4) Этот топик нужен мне. Чтобы в свободное время или просто когда лень работать продолжать углублять свои знания и расширять специализацию. И вы бы лучше занялись чем-то таким, нежели ругать и портить чужое.
5. Пишем простое расширение к Chrome.
Расширение будет добавлять всплывающий баннер с текстом "Ура!" на каждую страницу в браузере, в левый-верхний угол.
Итак, приступим.
1. Создаём отдельную папку. Называем её, например, HelloChromeAPI.
2. В папке создаём файл настроек расширения.
Для этого запускаем блокнот, пишем такой код
сохраняем в нашу папку под именем manifest.json обязательно в кодировке UTF-8.
Такой формат представления данных называется JSON: записи через запятую, имена их в кавычках, каждая запись может включать в себя подзаписи разного типа (тогда заключается в <>) или подзаписи одного и того же типа (тогда называется массивом и заключается в []).
"name" - имя расширения, которое будет видно в браузере
"version" - версия расширения, которую тоже будет видно в браузере
"manifest_version", равное 2, указывает, что расширение будет совместимо с Chrome выше версии 13. Если вместо 2 указать 1, то расширение будет работать в хромах с 5 по
12. Такие хромы сейчас редки, но если уж писать серьёзный проект, то нужно сделать дубликаты расширения для обоих поколений хрома.
"content_scripts" - это массив контентных скриптов (то есть скриптов, которые, как говорилось выше, выполняются на каждой странице в браузере). В данном случае в списке один элемент (он ограничен скобками <>), так как скрипт в нашем расширении будет только 1
"matches" - маска, указывающая, на каких страницах будет выполняться скрипт. * означает любую последовательность символов. Наш скрипт будет выполнять на всех страницах протокола http. Почему только http? Потому что на страницах протокола https браузер проверяет, нет ли левого html-кода, и если есть, то ругается. Может ругаться и антивирус.
"run_at" указывает, на каком этапе загрузки страницы скрипт будет выполняться.
Значение "document_start" = не загружено ничего (скрипт сможет вывести окошко alert или изменить window.location.href, но не сможет работать с document.body, его просто не будет)
Значение "document_end" = загружен код страницы, доступны document и document.body, но могут выполнять какие-то скрипты, которые ещё просто не успели выполниться
Значение "document_idle" = простой, когда никакой другой скрипт не выполняется. точнее ближайший период простоя с начала загрузки. Рекомендуется использовать для сложных ресурсоёмких скриптов, когда в то же время не требуется, чтобы скрипт выполнился прямо сразу после загрузки.
"js" - это массив путей к скриптам, выполняющимся с данными matches. Скрипт один, он будет называться end.js (это будет означать, что скрипт выполняется по document_end) и лежать в подпапке content_scripts в нашей папке расширения.
3. Создадим подпапку content_scripts, а в ней скрипт end.js.
В нём пропишем код
6. Добавляем кнопочку на панель инструментов Chrome
Теперь оно будет ещё добавлять кнопочку на панель инструментов хрома и при нажатии на кнопку открывать диалоговое окно.
Нам понадобится Chrome 20 или новее.
1. Откроем наш файл manifest.json
Изменим его таким образом
и сохраним.
2. Создадим подпапки images и popup.
В images создадим две картинки, как указано в манифесте. Картинки могут быть одинаковыми, отображается только одна, в зависимости от расширения монитора (на больших мониторах - 38x38, на маленьких - 19x19).
В popup создадим файл popup.html и запишем в него такой код
Сохранять тоже лучше в UTF-8.
3. Чтобы изменения вступили в силу, зайдём в Расширения и нажмём кнопку Обновить под нашим расширением.
4. На панели инструментов (слева вверху) появится кнопка с заданной иконкой.
Нажав на кнопку, увидим окошко, в котором будет надпись "Ура!".
Заметим, что размер окошка соответствует размеру, указанному в style корневого элемента popup.html (т.е. 300 x 100 пкс).
Если этот размер не указывать, окошко будет таким, чтобы в него поместилось содержимое этого элемента, т.е. надпись "Ура!".
7. Добавляем иконку в расширение к Chrome.
1. Подправим манифест.
2. Создадим файл icon48.jpg в папке images.
Это будет иконка расширения, отображаемая на странице расширений вместо дефолтного значка с фрагментом мозаики.
Примечание: помимо иконки размером в 48 пкс, мы можем сделать иконки размером 16, 32, 128 пкс, дописав внутрь ветви "icons:" соотв. строчки, не забывая про запятые. Но это нужно только если мы решим нарисовать действительно разные иконки для расширения. Просто растянув иконку под 16, 32, 128 пкс, мы ничего не достигнем - хром это сделает и сам, где оно понадобится. Я ограничился 48 пкс.
3. Обновим расширение на странице расширений.
8. Пишем простое расширение к Opera.
Расширение будет работать аналогично расширению к хрому.
Опера у меня версии 12. На других не пробовал. На 15 и выше, ещё раз, работать не должно.
Все файлы, как и с хромом, лучше сохранять в UTF-8, иначе кириллица будет отображаться неверно.
Приступим.
1. Создаём отдельную папку. Называем её, например, HelloOperaAPI.
2. В папке создаём файл настроек расширения.
Для этого запускаем блокнот, пишем такой код
сохраняем в нашу папку под именем config.xml обязательно в кодировке UTF-8.
Такой формат представления данных называется XML.
- имя расширения, которое будет видно в браузере
- версия расширения, которую тоже будет видно в браузере
А вот никакого упоминания о скриптах в файле не будет. Мы просто создадим в папке с расширением подпапку include и файл .js с любым именем. Этого будет достаточно, чтобы скрипт работал.
3. Сказано - сделано. Создаём подпапку include и файл script_end.js
DOMContentLoaded позволяет создать эффект "document_end" из хрома (а сам юзерскрипт в опере выполняется фактически по "document_start".
"==UserScript==. ==/UserScript==" вверху - это не просто комментарий. Там указываются настройки данного скрипта. @include здесь работает по принципу "matches" из Chrome.
Скрипт тоже обязательно должен быть сохранён в UTF-8.
Этот скрипт добавляет код баннера в код body той страницы, на которой выполняется.
4. В папке с расширением создадим index.html. Это фоновая страница. Мы можем оставить её пустой, потому что фоновых скриптов пока нет и она нам не нужна, но в расширении для оперы она должна быть обязательно.
5. Упакуем расширение в zip-архив. Сменим его расширение с zip на oex.
6. Запустим оперу, зайдём в меню, выберим пункт Дополнения, перетащим туда oex.
7. Проверим, появляются ли баннеры при загрузке страниц.
9. Добавляем кнопку на панель инструментов Opera
На панели инструментов справа-вверху появится кнопка. При нажатии на неё откроется всплывающее окошко с заданной страницей. Всё как в хроме.
Нам понадобится Chrome 20 или новее.
1. Изменим фоновую страницу index.html таким образом
и сохраним.
opera.contexts.toolbar - это класс из Opera API.
У хрома тоже есть API - chrome.*.
2. Создадим подпапки images и popup.
В images создадим картинку, как указано в манифесте.
В popup создадим файл popup.html и запишем в него такой код
Примечание: в отличие от хрома, размер окошка формируется не через style корневого элемента popup.html, а через width и height, прописанные в ToolbarUIItemProperties в index.html.
3. Чтобы изменения вступили в силу, удалим расширение и установим его обратно.
4. На панели инструментов (слева вверху) появится кнопка с заданной иконкой.
Нажав на кнопку, увидим окошко, в котором будет надпись "Ура!".
10. Добавляем иконку в расширение Opera.
1. Путь к иконке указывается в файле настроек - config.xml.
За него отвечает тэг icon с атрибутом src, в котором указывается относительный путь к иконке (относительно основной папке расширения).
Откроем файл config.xml.
Внутри добавим строчку
2. Создадим файл icon48.jpg (это может любая картинка 48x48 пкс) в папке images.
3. Перепакуем и переустановим расширение.
В списке расширений вместо дефолтного значка (сиреневого фрагмента мозаики) будет отображаться наша иконка.
11. Пишем простое расширение Firefox.
12. Добавляем панель инструментов в Firefox.
13. Добавляем иконку в расширение Firefox.
Продолжение следует.
Пока что читаем здесь и экспериментируем.
Easily draw on any website with simple drawing tools, then print the result.
Метаданные расширения
Используется
Draw on Page is a browser add-on that lets you draw on any website. Please first navigate to a website, then press on the toolbar button to activate the add-on. Once the interface appears on the page, please choose the desired mode.
Currently, there are two modes available, Drawing Mode and Brushing Mode. Brushing mode is for drawing with mouse or pen (touch-enabled devices) on the page. You can choose a pencil, circle, or spray brush in this mode. There is also an option to change the color and width of the brushing tool from the UI. The other mode is for drawing shapes (Drawing Mode). When you select this mode, five different primitive shapes are available to choose from the UI. Once you click on a shape, it will be added to the screen.
You can drag and drop, remove, resize, or rotate and zoom objects on the screen. To print the page with your drawings on it, please press on the print button at the top left corner of the screen. Once you are done with the drawing, please close the interface by pressing on the close button at the top left corner or pressing on the toolbar button once. Before closing, you can save your drawings by pressing on the - Save - button at the bottom of the UI.
If you have a feature request or found a bug to report, please fill the bug report form on the addon's homepage.
Сообщить о нарушении правил этим дополнением
Если вы считаете, что это дополнение нарушает политики Mozilla в отношении дополнений, или имеет проблемы с безопасностью или приватностью, сообщите об этих проблемах в Mozilla, используя эту форму.
Разработчик этого расширения просит вас помочь поддержать его дальнейшее развитие, внеся небольшое пожертвование.
Draw shapes, lines, and add text to live web pages and take screenshot.
Метаданные расширения
Используется
Web Paint provides the following easy to use drawing tools that let you draw shapes, lines, and add text to live web pages and take screenshot:
Pencil tool - draw a custom line with the selected line width and color.
Eyedropper tool - pick a color from the web page or your drawings and use it for drawing.
Text tool - insert text into the web page with the selected color and transparency.
Line tool - draw a straight line with the selected line width, transparency and color.
Quadratic curve - draw a quadratic curve with the selected line width, transparency and color.
Bezier curve - draw a bezier curve with the selected line width, transparency and color.
Polygon tool - draw a polygon with the selected line width, transparency and color.
Ellipse tool - draw an ellipse or a circle with the selected line width, transparency and color.
Color picker - select a color for the text and line.
Transparency slider - select a transparency for the text and line. (Drag the slider to the left to decrease the value and to the right to increase the value)
Line width slider - select a line width. (Drag the slider to the left to decrease the value and to the right to increase the value)
Rectangle tool - draw a rectangle with the selected line width, transparency and color.
Cursor tool - interact with the web page.
Eraser tool - erase part of your drawings.
Screenshot tool - take a screenshot of the current web page with your drawings.
Exit button - clear your drawings and disable the tools.
Please click the extension icon in the upper right of your browser to enable the tools
Сообщить о нарушении правил этим дополнением
Если вы считаете, что это дополнение нарушает политики Mozilla в отношении дополнений, или имеет проблемы с безопасностью или приватностью, сообщите об этих проблемах в Mozilla, используя эту форму.
PaintMagick - это редактор изображений для фотографий и рисунков с расширенными функциями рисования, эффектами и фильтрами. Он позволяет создавать и редактировать изображения непосредственно в веб-браузере. Вы можете создавать изображения, вставлять их из буфера обмена (ctrl + v) или загружать с компьютера (с помощью меню или перетаскивания). Все остается в вашем веб-браузере.
Его основные функции:
- Файлы: открытые изображения, каталоги, URL, перетаскивание, сохранение (PNG, JPG, BMP, WEBP, анимированный GIF, JSON (данные слоев), печать.
- Редактировать: отменить, вырезать, скопировать, вставить, выделить, вставить из буфера обмена.
- Изображение: информация, EXIF, обрезка, масштабирование, изменение размера (выбор размера Эрмита, изменение размера по умолчанию), поворот, отражение, коррекция цвета (яркость, контрастность, оттенок, насыщенность, яркость), автоматическая настройка цветов, сетка, гистограмма, негатив.
- Слои: система с несколькими слоями, различия, слияние, сглаживание, поддержка прозрачности.
- Эффекты: Черно-белое, Размытие (поле, гауссовское, стек, масштабирование), Bulge / Pinch, Denoise, Desaturate, Dither, Dot Screen, Edge, Emboss, Enrich, Gamma, Grains, GrayScale, Heatmap, JPG Compression, Mosaic, Масло, Сепия, Резкость, Соляризация, Сдвиг наклона, Виньетка, Вибрация, Винтаж,
- Инструменты: карандаш, кисть, волшебная палочка, стирание, заливка, подборщик цветов, буквы, обрезка, размытие, резкость, обесцветие, клон, границы, спрайты, ключевые точки, цвет альфа, увеличение цвета, замена цвета, заполнение содержимого.
- Справка: быстрые клавиши, переводы.
Сообщить о нарушении правил этим дополнением
Если вы считаете, что это дополнение нарушает политики Mozilla в отношении дополнений, или имеет проблемы с безопасностью или приватностью, сообщите об этих проблемах в Mozilla, используя эту форму.
Доброе время суток!
Дали индивидуальную работу но не могу понять,что нужно сделать "средство firefox для рисования в окне браузера",можете объяснить как это?
Помогите разобрать простой класс для рисования прямоугольнка в окне
Написал два класса, по идеи у меня в окошке должен рисоваться прямоугольник, но он не рисуется, че.
Для военных в рф компьютер+интернет средство сбора досье на граждан, для вебмастеров средство заработка
Для военных в рф компьютер+интернет средство сбора досье на граждан, для вебмастеров средство.
Можно ли как-то перенести закладки с браузера Firefox c ПК, на Андройд браузер (не Firefox)?
Ребят, всем привет! Подскажите, можно ли как-то перенести закладки с браузера Firefox c ПК, на.
Я с конвой знаком уже давно,но тут что-то другое,связанное лишь с firefox. Вот что делать?
Написал рисовалку на convas но это не то,что нужно по заданию(
Добавлено через 4 минуты
painzp, еще можно использовать WebGL. Если вы не достигли необходимого результата, то ст́оит
уточнить вопрос или удостоверится в здравом рассудке преподавателя.
еще можно использовать WebGL. Если вы не достигли необходимого результата, то ст́оит
уточнить вопрос или удостоверится в здравом рассудке преподавателя.
Т.е. никакой замены тега canvas в firefox-e нет?Вообще бред какой-то он говорил,для чего это собственно говоря нужно было?Я лишь попросил дать задание по canvas,а он дал мне "ЭТО".
Представители Mozilla Foundation участвуют в рабочих группах консорциума, но они не изобретают велосипед в противоположность баллистической ракете под названием Canvas, а следуют договоренностям и условиям группы.
Padimanskas,
Большое спасибо!
Пожалуй сделаю,чтобы моя "рисовалка" могла открываться лишь с помощью браузера Mozilla firefox,может засчитает.
Ограничение пространства рисования в окне
Как сделать невозможным рисование по панели инструментов(смена цвета, толщины кисти и т.п.).
Странности браузера Mozilla Firefox
Добрый день. Наблюдается интересная проблемка в адресной строке браузера. Жирным выделено.
Зависание браузера Firefox в Windows XP
Наткнулся я на сайт, где можно скачать всю музыку с Контактов одним архивом. Вбил ID. А потом.
Изменение окна браузера Firefox
Как запретить пользователям и скриптам изменять размер и положение окна?
Установка дополнений браузера Firefox
Необходимо на парк компов установить в FF набор дополнений с определёнными настройками. Очень.
Firefox игнорирует открытие в новом окне
<script language="JavaScript1.2"> function change()< if.
Читайте также: