30 минут на разработку плагина для браузера, который собирает ресурсы изображений веб-сайта.

JavaScript Chrome
30 минут на разработку плагина для браузера, который собирает ресурсы изображений веб-сайта.

предисловие

В связи с потребностями бизнеса автор хочет разработать несколько практичных подключаемых модулей для браузера для компании, поэтому на чтение документации по разработке подключаемого модуля для браузера Google ушло примерно один день, и здесь я специально подытоживаю опыт и рассматриваю подключаемый модуль. в через фактический случай.Процесс разработки и соображения.

ты получишь

  • Как быстро приступить к разработке плагинов для браузера
  • Основные концепции разработки подключаемых модулей браузера
  • Механизм связи подключаемого модуля браузера
  • Хранение данных для плагинов браузера
  • Сценарии применения плагинов браузера
  • Разработайте плагин для браузера, который захватывает ресурсы изображения веб-сайта.

текст

Прежде чем приступить к основному тексту, давайте взглянем на обзор авторского резюме: Если вы знакомы с разработкой подключаемых модулей для браузера, вы можете непосредственно прочитать последний раздел практики разработки подключаемых модулей.

1. Начало работы

Сначала давайте посмотрим на определение плагина для браузера:

Плагины браузера — это небольшие программы, созданные на основе веб-технологий, таких как HTML, JavaScript и CSS, которые могут настраивать работу в Интернете. Они позволяют пользователям настраивать функции и поведение Chrome в соответствии с личными потребностями или предпочтениями.

Для разработки подключаемого модуля браузера нам нужен только файл manifest.json. Чтобы быстро приступить к разработке подключаемого модуля браузера, нам нужно открыть инструмент разработчика браузера. Конкретные шаги заключаются в следующем:

  1. Введите chrome://extensions/ в Google Chrome.
  2. включить режим разработчика

3. Импортируйте собственный пакет плагинов для браузера

Выполнив три вышеуказанных шага, мы можем начать разработку подключаемого модуля для браузера. Плагин для браузера обычно размещается в правой части адресной строки браузера. Мы можем настроить значок подключаемого модуля в файле manifest.json. файл и настроить определенные правила, тогда мы сможем увидеть значок плагина браузера, как показано ниже:Давайте подробнее рассмотрим основные концепции разработки подключаемых модулей браузера.

2. Основные точки знаний

Плагины браузера обычно включают следующие основные файлы:

  • manifest.jsonИспользуется для настройки всех конфигураций, связанных с плагинами (должно быть размещено в корневом каталоге)
  • background.jsФоновый скрипт (фоновая страница), жизненный цикл такой же, как и у браузера, а глобальный код обычно размещается
  • content-scriptsФорма плагинов, внедряющих скрипты на страницы, мы можем внедрять ресурсы js и css на страницы через контент-скрипты и можем контролировать объем разрешенных инъекций.
  • popupПользовательское окно, которое открывается при нажатии на значок плагина для управления взаимодействием с пользователем.

Автор нарисовал диаграмму, чтобы примерно представить взаимосвязь между ними:

Далее, давайте подробнее рассмотрим некоторые основные точки знаний.

2.1 manifest.json

Официальный сайт Google предоставляет нам простую конфигурацию, а именно:

{
    "name": "My Extension",
    "version": "2.1",
    "description": "Gets information from Google.",
    "icons": {
      "128": "icon_16.png",
      "128": "icon_32.png",
      "128": "icon_48.png",
      "128": "icon_128.png"
    },
    "background": {
      "persistent": false,
      "scripts": ["background_script.js"]
    },
    "permissions": ["https://*.google.com/", "activeTab"],
    "browser_action": {
      "default_icon": "icon_16.png",
      "default_popup": "popup.html"
    }
 }

Значение каждого поля описывается следующим образом:

  • nameНазвание плагина браузера, которое будет отображаться в списке плагинов
  • descriptionЗнакомство с плагинами браузера, в котором удобно сообщить разработчикам функции и функции плагинов, которые будут отображаться в списке плагинов
  • versionВерсия плагина для браузера
  • iconзначок плагина для браузера

  • backgroundПуть к скрипту фоновой страницы, обычно это относительный адрес каталога плагинов.
  • permissionsРазрешения, позволяющие использовать API-интерфейсы браузера, такие как contextMenus (меню, вызываемое правой кнопкой мыши), вкладки (рабочие вкладки), webRequest (с использованием веб-запросов), хранилище (разрешение использовать локальное хранилище), "http://*" (веб-сайт доступен через executeScript или insertCSS)
  • browser_actionНастройки значков в правом верхнем углу браузера (включая всплывающую страницу, заголовок при наведении мыши, значок и т. д.)
  • content_scriptsjavascript-скрипты, которые необходимо внедрить прямо на страницу
  • web_accessible_resourcesСписок ресурсов плагина, к которым могут напрямую обращаться обычные страницы. Если они не заданы, прямой доступ к ним невозможен.
  • chrome_url_overridesПереопределить страницу браузера по умолчанию (часто используется в качестве пользовательского рабочего стола для браузера)
  • omniboxЗарегистрируйте ключевое слово в адресной строке, чтобы предлагать поисковые предложения, можно установить только одно ключевое слово (в основном используется для перехвата пользовательского поиска)
  • default_localeЯзык по умолчанию (например, "zh_CN")

Полный адрес файла конфигурации будет указан в конце статьи для справки.

2.2 background.js

Фоновая страница в основном используется для предоставления некоторой глобальной конфигурации, мониторинга событий, перенаправления бизнеса и т. д. Вот несколько распространенных случаев:

  1. Определение контекстного меню
// background.js
const systems = {
  a: '趣谈前端',
  b: '掘金',
  c: '微信'
}

chrome.runtime.onInstalled.addListener(function() {
  // 上下文菜单
  for (let key of Object.keys(systems)) {
    chrome.contextMenus.create({
      id: key,
      title: systems[key],
      type: 'normal',
      contexts: ['selection'],
    });
  }
});

// manifest.json
{
    "permissions": ["contextMenus"]
}

Эффект следующий:

  1. Установите только страницы с суффиксом .com для активации плагина
chrome.runtime.onInstalled.addListener(function() {
  // 类似于什么时候激活浏览器插件图标这种感觉
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostSuffix: '.com'},
      })
      ],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

Как показано на рисунке ниже, когда суффикс адреса страницы не равен .com, иконка плагина не будет активирована:3. Обмен сообщениями с помощью content_script или всплывающей страницы

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

2.3 content-scripts

Сценарий содержимого обычно внедряется на страницу и может управлять dom на странице. Мы можем использовать его для выполнения таких операций, как блокировка рекламы на веб-странице, настройка скинов страницы и т. д. Базовая конфигурация в manifest.json выглядит следующим образом:

{
    "content_scripts": [{
    "matches": [
        "http://*/*",
        "https://*/*"
    ],
    "js": [
        "lib/jquery3.4.min.js",
        "content_script.js"
    ],
    "css": ["base.css"]
  }],
}

В приведенном выше коде мы определяем область страницы, которую content_scripts позволяет внедрить, и вставляем js и css страницы, чтобы мы могли легко изменить стиль страницы.Например, мы можем внедрить кнопку на страницу:В случае следующего плагина для браузера автор подробно расскажет об использовании content_scripts.

2.4 popup

Всплывающее окно — это небольшое окно, которое открывается, когда пользователь щелкает значок подключаемого модуля. Окно немедленно закрывается при потере фокуса. Обычно мы используем его для обработки некоторых простых действий пользователя и описаний подключаемых модулей.

Поскольку всплывающее окно также является веб-страницей, мы обычно создаем popup.html и popup.js для управления отображением страницы и взаимодействием с всплывающим окном.В manifest.json мы настраиваем следующее:

{
    "page_action": {
        "default_title": "小夕图片提取插件",
        "default_popup": "popup.html"
  },
}

Здесь следует отметить, что мы не можем напрямую использовать сценарии сценариев в popup.html, нам нужно импортировать файлы сценариев, как показано ниже:

<!DOCTYPE html>
<html>
  <head>
    <title>在线图片提取工具</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <div class="pop-wrap">
    </div>
    <script src="lib/jquery3.4.min.js"></script>
    <script src="popup.js"></script>
  </body>
</html>

Ниже приведена всплывающая страница плагина, написанного автором:

3. Механизм связи

Для относительно сложного подключаемого модуля браузера нам нужно не только управлять DOM или предоставлять основные функции, нам также необходимо получать полезные данные страницы от стороннего или нашего собственного сервера. в механизме связи.

Поскольку сценарий content_script существует на текущей странице и на него распространяется политика того же источника, мы не можем передавать захваченные данные на стороннюю платформу или на наш собственный сервер, поэтому нам нужен коммуникационный API на основе браузера. связь процесса подключаемого модуля браузера Google:

3.1 всплывающее окно и фон взаимодействуют друг с другом

Из официальной документации мы знаем, что popup может напрямую обращаться к фоновой странице, поэтому popup может напрямую с ней взаимодействовать:

// background.js
var getData = (data) => { console.log('拿到数据:' + data) }
// popup.js
let bgObj = chrome.extension.getBackgroundPage();
bgObj.getData(); // 访问bg的函数

3.2 Всплывающее окно или фоновая страница взаимодействует с content_script

Здесь мы используем API вкладок Chrome следующим образом:

// popup.js
// 发送消息给content_script
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
      console.log(response);
    });
  });
  
// 接收消息
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

content_script получать и отправлять сообщения:

// 接收消息
chrome.runtime.onMessage.addListener(
  function(message, sender, sendResponse) {
    if (message == "activeBtn"){
      // ...
      sendResponse({farewell: "激活成功"});
    }
 });
 
 // 主动发送消息
 chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
   console.log(response, document.body);
   // document.body.style.backgroundColor="orange"
});

По поводу долгой связи сообщения, так же четко написано на официальном сайте Google:Мы можем делать длинные соединения следующими способами:

// content_script.js
var port = chrome.runtime.connect({name: "徐小夕"});
port.postMessage({Ling: "你好"});
port.onMessage.addListener(function(msg) {
  if (msg.question == "你是做什么滴?")
    port.postMessage({answer: "搬砖"});
  else if (msg.question == "搬砖有钱吗?")
    port.postMessage({answer: "木有"});
});

// popup.js
chrome.runtime.onConnect.addListener(function(port) {
  port.onMessage.addListener(function(msg) {
    if (msg.Ling == "你好")
      port.postMessage({question: "你是做什么滴?"});
    else if (msg.answer == "搬砖")
      port.postMessage({question: "搬砖有钱吗?"});
    else if (msg.answer == "木有")
      port.postMessage({question: "太难了."});
  });
});

4. Хранение данных

chrome.storage используется для глобального хранения данных для плагина. Мы храним данные на любой странице (всплывающее окно, контент_скрипт или фон), и мы можем получить их на трех вышеуказанных страницах. Конкретное использование выглядит следующим образом:

获取数据
chrome.storage.sync.get('imgArr', function(data) {
  console.log(data)
});
// 保存数据
chrome.storage.sync.set({'imgArr': imgArr}, function() {
    console.log('保存成功');
  });
  
// 另一种方式
chrome.storage.local.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

5. Сценарии применения

Сценариев применения плагинов для Google Chrome много, как написано в ментальной карте в начале статьи. Ниже приведены некоторые сценарии применения, обобщенные автором. Если вам интересно, вы можете попробовать их реализовать:

  • Пользовательский рабочий стол Google Chrome
  • Инструмент анализа производительности веб-страницы
  • поисковый робот
  • Инструмент для захоронения
  • Инструмент для создания тепловой карты веб-страницы
  • Плагин блокировки безопасности
  • Плагин фильтра рекламы
  • Динамический скин сайта
  • импорт сторонних данных
  • средство форматирования кода
  • онлайн-инструмент для совместной работы
  • Анти-чит плагин

Есть много практических инструментов для разработки, каждый может получить удовольствие. Далее мы подытожим следующий процесс разработки подключаемого модуля браузера, реализуя подключаемый модуль извлечения изображений веб-страницы.

6. Разработайте плагин для браузера, который захватывает ресурсы изображений веб-сайта.

Во-первых, по стилю автора, перед разработкой какого-либо инструмента мы должны уточнить требования, поэтому давайте посмотрим на функциональные точки плагина:

  • Можно вставлять веб-кнопки, захватывать изображения веб-страниц, нажав кнопку
  • Возможность отображения захваченных изображений на стороне клиента
  • Нажмите на плагин, чтобы просмотреть захваченное изображение.

В основном это функции. Далее я покажу основной код. Прежде чем представить код, давайте предварительно просмотрим эффект реализации плагина: Структура каталога плагина выглядит следующим образом:Поскольку разработка подключаемого модуля относительно проста, я непосредственно использую jquery для его разработки. Здесь мы в основном сосредоточимся на popup.js и content_script.js. Popup.js в основном используется для получения данных изображения, передаваемых со страницы content_script, и отображения их в popup.html. сгенерированная кнопка, popupu должна отправлять информацию на страницу контента и активно генерировать кнопку, код выглядит следующим образом:

chrome.storage.sync.get('imgArr', function(data) {
  data.imgArr && data.imgArr.forEach(item => {
    var imgWrap = $("<div class='img-box'></div>")
    var img = $("<img src='" + item + "' alt='" + item + "' />")
    imgWrap.append(img);
    $('#content').append(imgWrap);
    $('.empty').hide();
  })
});

$('#activeBtn').click(function(element) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
      console.log(response);
    });
  });
});

Для страницы с контентом нам нужно реализовать динамическую генерацию кнопки и имплантацию всплывающего окна на страницу для отображения полученного изображения.С другой стороны, нам нужно передать данные изображения в хранилище, чтобы всплывающая страница может получить данные изображения.

Так как страница относительно простая, автору не нужно слишком много сторонних библиотек, автор просто вручную пишет модальный компонент, код такой:

// 弹窗
~function Modal() {
  var modal;
  
  if(this instanceof Modal) {
    this.init = function(opt) {
      modal = $("<div class='modal'></div>");
      var title = $("<div class='modal-title'>" + opt.title + "</div>");
      var close_btn = $("<span class='modal-close-btn'>X</span>");
      var content = $("<div class='modal-content'></div>");
      var mask = $("<div class='modal-mask'></div>");
      close_btn.click(function(){
        modal.hide()
      })
      title.append(close_btn);
      content.append(title);
      content.append(opt.content);
      modal.append(content);
      modal.append(mask);
      $('body').append(modal);
    }
    this.show = function(opt) {
      if(modal) {
        modal.show();
      }else {
        var options = {
          title: opt.title || '标题',
          content: opt.content || ''
        }
        this.init(options)
        modal.show();
      }
    }
    this.hide = function() {
      modal.hide();
    }
  }else {
    window.Modal = new Modal()
  }
}()

Первым шагом является получение данных изображения страницы в пакетах:

var imgArr = []
  $('img').each(function(i) {
    var src = $(this).attr('src');
    var realSrc = /^(http|https)/.test(src) ? src : location.protocol+ '//' + location.host + src;
    imgArr.push(realSrc)
  })

Поскольку путь src изображения может быть относительным адресом, автор просто использует следующий, чтобы иметь дело со следующим, конечно, мы можем осуществлять более тонкий контроль.

Второй шаг — сохранить данные изображения в хранилище:

chrome.storage.sync.set({'imgArr': imgArr}, function() {
    console.log('保存成功');
  });

Третий шаг — генерация всплывающего окна для предварительного просмотра изображений, здесь используется модальный компонент, реализованный автором выше:

Modal.show({
  title: '提取结果',
  content: imgBox
})

Четвертый шаг, когда всплывающее окно отправляет уведомление для активации кнопки, мы хотим динамически вставить сгенерированную кнопку на веб-страницу:

chrome.runtime.onMessage.addListener(
  function(message, sender, sendResponse) {
    if (message == "activeBtn"){
      if(!$('.crawl-btn')) {
        $('body').append("<div class='crawl-btn'>提取</div>")
      }else {
        $('.crawl-btn').css("background-color","orange");
        setTimeout(() => {
          $('.crawl-btn').css("background-color","#06c");
        }, 3000);
      }
      sendResponse({farewell: "激活成功"});
    }
 });

Часть setTimeout предназначена исключительно для привлечения внимания пользователя, конечно, мы можем справиться с этим более элегантным способом. Основной код плагина в основном вот такой.Конечно,много деталей надо учесть.Конфигурационный файл и некоторые детали я выложил на github.Если интересно,можете установить и пощупать.

адрес гитхаба:Плагин браузера для извлечения данных изображения веб-страницы.

наконец

Если вы хотите узнать большеигра Н5, webpack,node,gulp,css3,javascript,nodeJS,визуализация данных холстаВ ожидании передовых знаний и реальных сражений, добро пожаловать в нашу техническую группу в общедоступном аккаунте «Интересный передний конец», чтобы вместе учиться и обсуждать, а также вместе исследовать границы переднего плана.

использованная литература

больше рекомендаций

Категории