Я из тех, кто любит собирать всевозможные ссылки и изображения со всего мира, чтобы посмотреть их позже, и я использую несколько расширений Chrome, которые помогают мне делать это быстро и безболезненно. Здесь я покажу, как создать простое расширение, которое получает URL-адрес, заголовок и любой выделенный текст страницы и отображает его во всплывающем окне. Это только начало, но в конечном итоге вы сможете подключить подобное расширение к своим собственным приложениям, чтобы принимать пользовательский ввод, чтобы ваши пользователи также могли быть интернет-крысами.
Это простое демонстрационное расширение будет состоять из трех файлов:
- HTML для всплывающего окна,
- JavaScript для всплывающего окна и
- файл manifest.json. Это единственный файл, который всегда требуется для расширений Chrome.
Сначала давайте создадим наш файл manifest.json. manifest_version 1 был прекращен в 2014 году, поэтому все текущие приложения должны использовать версию 2. Используйте раздел browser_action, чтобы назначить значок для всплывающей кнопки браузера и HTML-файл для отображения всплывающего окна.
//manifest.json { "manifest_version": 2, "name": "Chrome Extension Example", "description": "Displays url, title, and description", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html", "default_title": "Chrome Ext Example" } }
Затем создайте базовый файл HTML для отображения и укажите ссылку на файл popup.js:
//popup.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Chrome Extension</title> </head> <body> URL: <div id="pageUrl"></div><br/> Title: <div id="pageTitle"></div><br/> Description: <div id="pageDescription"></div> <script src="popup.js"></script> </body> </html>
Теперь мы будем использовать API chrome.tab для доступа к URL-адресу, заголовку и выделенному тексту на странице, которую мы хотим сохранить. Сначала вам нужно добавить вкладки в часть разрешений manifest.json. Чтобы получить выделенный текст, вы также должны дать приложению разрешение на захват содержимого страниц, которые вы можете посетить — вы можете сделать это, добавив http://*/* и https://*. /*»:
//manifest.json { "name": "Chrome Extension Example", ..., "permissions": [ "tabs", "http://*/*", "https://*/*" ], ... }
Затем мы можем добавить функции для захвата выделенного текста, URL-адреса и заголовка страницы:
//popup.js //grab selected text and render to page chrome.tabs.executeScript({ code: "window.getSelection().toString();" }, function(selection) { document.getElementById("pageDescription").textContent = selection[0] } ) //get url, title of current tab and render var queryInfo = { active: true, currentWindow: true } chrome.tabs.query(queryInfo, function(tabs) { var pageUrl = tabs[0].url; var pageTitle = tabs[0].title; document.getElementById('pageUrl').textContent = pageUrl; document.getElementById('pageTitle').textContent = pageTitle; })
И это все! Сохраните эти файлы в папку вместе с выбранным вами icon.png. Откройте chrome://extensions, включите режим разработчика и либо 1) перетащите папку в окно, либо 2) нажмите «загрузить распакованное расширение» и выберите папку. Ваше расширение появится в списке, а ваш значок появится в строке браузера. Удачного строительства!