Как подключить свой JavaScript к чужому сайту?
У меня нестандартная задача.
Вопрос:
Как подключить к сайту свой JavaScript ?
Т.е. к примеру, загрузился сайт в ВКонтакте, а в нем, кроме его скриптов, загружен еще мой , например кнопка нажимая на которую происходит клиент по не прочитанному сообщению.
Знаю, что в браузере возможно подключать CSS, но возможно ли это сделать для JavaScript с последующим подключением Bootstrap ?
Если есть какие нибудь предложения и идеи буду очень признателен.
Как подключить JavaScript или CSS без доступа к сайту?
подключаемся не стесняемся не проходм мимо добавляем свой любимый плагин в сравнительную таблицу
лично я, рекомендую User JavaScript and CSS
User JavaScript and CSS 1.2.5
Свои JavaScript и CSS на любом сайте.
Userscript и userstyle — расширение позволяет запускать собственные скрипты и стили оформления на любых сайтах. JavaScript и CSS подключаются мгновенно, еще до загрузки страницы, поэтому результат выходит без задержек.
- Мгновенный запуск
- Возможность добавлять свои библиотеки
- Система URL масок позволяет гибко изменять список сайтов к которым будут применены изменения
В Н И М А Н И Е !! НАСТРОЙКИ -> БИБЛИОТЕКИ
Tampermonkey 4.5
Это бесплатное расширение браузера и самый популярный менеджер пользовательских скриптов для браузеров на базе Blink и WebKit, таких как Chrome, Microsoft Edge, Safari, Opera Next, и Firefox.
.
Кроме того, есть хорошие шансы на то, что несовместимые скрипты будут нормально работать при использовании Tampermonkey.
User JavaScript and CSS
Userscript’s and userstyle’s — simple extension to inject own JavaScript or CSS rules to any page.
Features:
– Instant execution
– Custom libs include
– URL masking allows use one script or CSS on many pages
Version 1.2.8
– Added function for naming rules
– Updated translations
Version 1.2.7
– Updated all extension libraries to current versions
Version 1.2.6
– Fixed error in console “Unchecked runtime.lastError: The message port closed before a response was received”
– Improved domain getter from URL
– Updated Ace Editor and jQuery to latest
Version 1.2.5
– Resolved bug with ‘@import’ and “Auto-important css” feature
– “Auto-important css” feature now disabled by default
– Added feature to exclude URL’s by ‘!’ symbol at start
– Updated jQuery and Ace editor to last versions
– Other small fixes
Version 1.2.4
– Added manual cloud sync in testing mode
– Improved “auto-important css” feature
– Other small fixes
Version 1.2.1
– Fixed algorithm of “high priority CSS”
Version 1.2.0
– Added toggle button in site list
– Added documentation tab
– Added ‘Vintage mode’ option to Ace Editor
– Updated jQuery, Ace Editor to last versions
– Other small fixies
Version 1.1.5
– Returned old method injection and added option to toggle this. Alternative method has feature to avoid CORS issues, but has only DOM access to site (no JS context). Old and now primary method is injecting by tag on site bottom.
– Added scroll past end in editor
Version 1.1.2
– Minor bug fixes
Version 1.1.0
– Added new injection system that increased perfomance
– Added feature: few URLs in one rule (separate by commas)
– Added word wrap setting
– Added CSS auto !important option
– Minor changes
Version 1.0.2
– Hot fixes
Version 1.0.0
– Full redesign of extension
– Added more settings
– Added toggleable counter on extension icon
Version 0.98
– Fix bug that prevent create new rules
– Minor changes
Version 0.96
– Full redesign of extension interface
– 80% code of extension core has been rewritten
– New feature: change URL field and mask with “*” symbol (eg *.expample.com)
– Editor window opens in new tab in split layout
– Disabled autosave feature
– Configurable editor in settings
– New icon
Version 0.94
– Hotfix editor opening bug
Version 0.93
– Fixed a bug where JavaScript is not always inserted in a page
– Outdated processes are disabled
Version 0.92
– Code autosave work on all pages
Version 0.91
– Fix “.co.uk” zone parse
– Other small fixes
Version 0.90
– Improve core
– Add feature to load own libraries
Beta test. If you find any problem or have a question contact me on email.
User JavaScript and CSS
User JavaScript and CSS on any websiteUserscript's and userstyle's — simple extension to inject own JavaScript or CSS rules to any page.
Features:
— Instant execution
— Custom libs include
— URL masking allows use one script or CSS on many pages
Version 1.2.8
— Added function for naming rules
— Updated translations
Version 1.2.7
— Updated all extension libraries to current versions
Version 1.2.6
— Fixed error in console "Unchecked runtime.lastError: The message port closed before a response was received"
— Improved domain getter from URL
— Updated Ace Editor and jQuery to latest
Version 1.2.5
— Resolved bug with '@import' and "Auto-important css" feature
— "Auto-important css" feature now disabled by default
— Added feature to exclude URL's by '!' symbol at start
— Updated jQuery and Ace editor to last versions
— Other small fixes
Version 1.2.4
— Added manual cloud sync in testing mode
— Improved "auto-important css" feature
— Other small fixes
Version 1.2.1
— Fixed algorithm of "high priority CSS"
Version 1.2.0
— Added toggle button in site list
— Added documentation tab
— Added 'Vintage mode' option to Ace Editor
— Updated jQuery, Ace Editor to last versions
— Other small fixies
Version 1.1.5
— Returned old method injection and added option to toggle this. Alternative method has feature to avoid CORS issues, but has only DOM access to site (no JS context). Old and now primary method is injecting by <script> tag on site bottom.
— Added scroll past end in editor
Version 1.1.2
— Minor bug fixes
Version 1.1.0
— Added new injection system that increased perfomance
— Added feature: few URLs in one rule (separate by commas)
— Added word wrap setting
— Added CSS auto !important option
— Minor changes
Version 1.0.2
— Hot fixes
Version 1.0.0
— Full redesign of extension
— Added more settings
— Added toggleable counter on extension icon
Version 0.98
— Fix bug that prevent create new rules
— Minor changes
Version 0.96
— Full redesign of extension interface
— 80% code of extension core has been rewritten
— New feature: change URL field and mask with "*" symbol (eg *.expample.com)
— Editor window opens in new tab in split layout
— Disabled autosave feature
— Configurable editor in settings
— New icon
Version 0.94
— Hotfix editor opening bug
Version 0.93
— Fixed a bug where JavaScript is not always inserted in a page
— Outdated processes are disabled
Version 0.92
— Code autosave work on all pages
Version 0.91
— Fix ".co.uk" zone parse
— Other small fixes
Version 0.90
— Improve core
— Add feature to load own libraries
Beta test. If you find any problem or have a question contact me on email.
10 инструментов, которые упростят жизнь веб-разработчика
Как разработчик, я считаю, что расширения для браузера — отличный способ повысить свою продуктивность. За время работы я составил список инструментов в Chrome, которые оказались для меня чрезвычайно полезными.
Если вы только начали изучать сферу разработки, то статья даст вам представление об основных инструментах. Если вы старший программист, вы всё равно можете узнать что-то новое для себя.
Большинство перечисленных здесь расширений доступны на любых других платформах. И так, начнем.
1. ColorZilla — 2 000 000+ пользователей
Я использую расширение ColorZilla с момента его появления. Я веб-разработчик, которому временами приходится выполнять простые дизайнерские задачи. И этот инструмент помогает быстро определить значения цветов на странице сайта, что значительно экономит время.
2. CSS Peeper — 100 000+ пользователей
С этим расширением найти элемент и его стили на странице стало намного проще, чем с помощью встроенного инструмента Inspect Element. Единственное, чего не хватает CSS Peeper, — функция редактирования страницы, которая есть у его стандартного аналога. Это позволило бы увидеть, какие изменения необходимо внести в серверную часть сайта.
3. Windor Resizer — 600 000+ пользователей
Этот плагин позволяет переключаться на необходимые размеры окна браузера, имитируя разные разрешения экрана. Мне нравится, что я могу сам устанавливать значения и применять их ко всему окну или только к области просмотра. Наконец, это самый простой способ переключаться между широким окном браузера для электронных таблиц и узким — для обычного просмотра веб-страниц.
4. Clear Cache — 800 000+ пользователей
Clear Cache — мое любимое расширение для браузера Chrome. Я даже уже не использую кнопку перезагрузки по умолчанию или ее параметры: «принудительная перезагрузка» или «очистка кеша и принудительная перезагрузка». Плагин удаляет историю, куки, пароли и т. д. Он бесплатный и работает отлично. Мне больше не нужно копаться в настройках в поисках кнопки удаления истории или файлов cookie. Я могу сделать это в один клик.
5. Wappalyzer — 1,000,000+ пользователей
Wappalyzer — это один из лучших инструментов в моем повседневном наборе. С его помощью можно узнать о веб-технологиях, используемых на сайте. Я легко могу сказать, когда приложение написано на AngularJS, React, Meteor, Backbone, FireBase и Django.
6. User Javascript and CSS — 70 000+ пользователей
Этот плагин позволяет запускать пользовательские JavaScript и CSS на любых сайтах. Он также отлично подходит для создания прототипа собственного расширения или виджета для веб-сайтов. А еще с помощью него я легко могу отладить JavaScript на сайтах клиентов.
7. ScreenShot Capture & Editor Tool — 200 000+ пользователей
Это расширение для скриншотов и редактирования. Сделав снимок, вы можете добавлять на него графические элементы и текст. Однако плагин фиксирует только вкладку, браузер или приложение, активные в момент съемки. За исключением этого факта приложение довольно хорошо подходит для создания снимков экрана.
8. Whatfont — 1 000 000+ пользователей
Если вы веб-дизайнер или программист, для вас этот инструмент станет бесценной находкой. Прошли те дни, когда надо было щелкать правой кнопкой мыши, чтобы просмотреть исходный код, а потом скроллить до нужной строчки. WhatFont показывает точную информацию о любом шрифте, на который вы наводите курсор: название, размер, цвет и т. д.
9. Toggl Track — 300 000+ пользователей
Раньше я сходил с ума, пытаясь подсчитать все свои рабочие часы. Теперь Toggl Track помогает мне отслеживать время, потраченное на различные задачи из Freshdesk, Todoist, Jira и Confluence, которые я использую каждый день.
10. AdBlock — 10 000 000+ пользователей
AdBlock блокирует всплывающие окна и раздражающую рекламу на веб-сайтах. Это помогает браузеру отображать контент намного быстрее, и ничто не будет отвлекать вас от написания кода.
Скорее всего, у вас есть собственный незаменимый набор инструментов для вашего цикла разработки, но, надеюсь, некоторые расширения из моего списка помогут сделать ваш рабочий процесс более продуктивным.