Я из тех, кто любит собирать всевозможные ссылки и изображения со всего мира, чтобы посмотреть их позже, и я использую несколько расширений Chrome, которые помогают мне делать это быстро и безболезненно. Здесь я покажу, как создать простое расширение, которое получает URL-адрес, заголовок и любой выделенный текст страницы и отображает его во всплывающем окне. Это только начало, но в конечном итоге вы сможете подключить подобное расширение к своим собственным приложениям, чтобы принимать пользовательский ввод, чтобы ваши пользователи также могли быть интернет-крысами.

Это простое демонстрационное расширение будет состоять из трех файлов:

  1. HTML для всплывающего окна,
  2. JavaScript для всплывающего окна и
  3. файл 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) нажмите «загрузить распакованное расширение» и выберите папку. Ваше расширение появится в списке, а ваш значок появится в строке браузера. Удачного строительства!