10-минутное введение в разработку плагина для браузера Chrome (Google)

Chrome
10-минутное введение в разработку плагина для браузера Chrome (Google)

Организуйте возможности подключаемых модулей Chrome, начните разработку подключаемых модулей и систематизируйте документы.

Разработка плагина для браузера Chrome Google звучит очень высоко, на самом деле, если вы знакомы сHTML、CSS、JSЕго можно разработать, а также плагин отрисовывает html-страницу и выполняет js-скрипт.

Какие плагины что-то делают?

  • управление закладками;
  • контроль загрузки;
  • управление окном;
  • контроль этикетки;
  • контроль сетевых запросов,
  • Мониторинг различных событий;
  • собственное нативное меню;
  • Совершенный механизм связи;

Введение

расширение главное существительное

  • Манифест (файл манифеста)
  • Фоновый скрипт
  • Элементы пользовательского интерфейса (элементы страницы)
  • Сценарий контента
  • Страница параметров

Начало разработки

1. Создайте новую папку со следующей структурой каталогов:

chrome-plugin-demo
├── background.js
├── images
│   ├── 128.png
│   ├── 16.png
│   ├── 32.png
│   └── 48.png
├── manifest.json
├── popup.html
└── popup.js

2. Создатьmanifest.jsonконфигурационный файл

{
    "name": "chrome-plugin-demo",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2 // 注意这个必须写2
}

3. Создатьpopup.htmlдокумент

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content{color: red;}
    </style>
</head>
<body>
    <h1>chrome-plugin-test</h1>
    <p id="content"></p>
    <script src="popup.js"></script>
</body>
</html>

4. Создатьpopup.jsдокумент

document.getElementById('content').innerText = 'Hello world!';

5. Установите расширение в хром

  • Верхний правый угол Google Chrome: кнопка «Дополнительно» -> «Дополнительные инструменты» -> «Расширения».
  • нажмите加载已解压的扩展程序, выберите только что созданную папку
  • Нажмите на значок головоломки в правом верхнем углу Google Chrome, чтобы увидеть ваш плагин.

Рекомендуемые плагины

Ссылка на текущую просматриваемую веб-страницу становится QR-кодом

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

ColorZilla (веб-подборщик цветов)

Он может поглощать цветовые значения шрифтов, фона, элементов и т. д.

Markdown Preview Plus (визуализация уценки)

Дополнительная тема, поддержка пользовательской темы css

json-viewer (визуализировать json)

Необязательная тема, поддержка пользовательской темы css, складная, расширяемая, редактируемая

JavaScript и CSS Code Beautifier (визуализация js, css)

Дополнительная тема, поддержка пользовательской темы css

Для получения дополнительной информации см.

Категории