Изучение и применение разработки плагинов Google

предисловие

Раньше автор всегда хотел узнать некоторые важные знания о плагинах Google. Благодаря этому плагину Google я могу лучше понять этот инструмент отладки Google. Мне просто нужно поделиться им недавно. Я изучил и понял плагин Google. в течение последних двух недель, а затем написал В этой статье я записал то, что знаю, и некоторые мысли. В то же время я также подумал, что мог бы использовать плагин Google для написания каких-то гаджетов, которые не только узнавали новое, но и вызывали определенный интерес. Конечно, по причинам времени, если у автора неправильное понимание этого произведения, критика и исправления приветствуются~

Что такое Google Plugin

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

Расширения позволяют добавлять функциональные возможности в браузер Chrome, не углубляясь в нативный код. Вы можете создавать новые расширения для браузера Chrome, используя базовые технологии (HTML, CSS и JavaScript), с которыми вы уже знакомы в веб-разработке.

Студенты, у которых есть сомнения, спросят, почему их до сих пор называют Плагинами Google, что в точности соответствует тому, что сказал Лу Синь: «В мире нет дороги, и людей, которые ходят, больше, поэтому дорога будет». Расширение Google Chrome изначально не является подключаемым модулем Google. Подключаемый модуль Google должен быть низкоуровневым элементом браузера, но слишком много людей вызывают его, поэтому в этой статье также используется подключаемый модуль Google для общего обозначения Google. расширение для браузера.

основное использование

Давайте сначала познакомимся с основными компонентами подключаемого модуля Google, так как чаще всего используется версия подключаемого модуля Google версии 2.0. Все следующие инструкции основаны на версии 2.0. Версия 3.0 более удобна, чем версия 2.0. Заинтересованные студенты Нажмите ссылка в конце статьи, чтобы узнать больше об этом.

конфигурационный файл

Основным файлом подключаемого модуля Google является файл конфигурации — файл manifest.json (манифест). Среди них самые основные API-интерфейсы файла manifest.json следующие:

{
    "name": "chrome extension",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "A litlle chrome extension demo"
}

В основном он содержит название, версию и связанное описание подключаемого модуля Google, где manifest_version указывает версию файла манифеста. Manifest.json является основной частью плагина Google. Автор считает, что этот файл эквивалентен конфигурационному файлу входа для плагина. Разработчику нужно только настроить соответствующий js в этом файле и вызвать предоставленный API Google Chrome для достижения этого улучшения. Цель плагина.

Базовое использование API

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

• browser_action

{
    ...

    "browser_action": {
        "default_icon": {
            "16": "images/get_started16.png",
            "32": "images/get_started32.png"
        },
        "default_title": "谷歌划词翻译",
        "default_popup": "popup.html"
    },

    ...
}

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

• permissions

{
    ...

    "permissions": [ "activeTab", "storage", "tabs", "contextMenus" ],
    
    ...
}

разрешения могут настраивать приложения разрешений плагинов Google, такие как contextMenus (меню правой кнопки мыши), вкладки (ярлыки), хранилище (локальное хранилище плагинов).

• content_scripts

{
    ...

    "content_scripts": {
        "matches": ["<all_urls>"],
        "css": ["content/content_script.css"],
        "js": ["content/content_script.js"]
    },
    
    ...
}

Контент-скрипты на самом деле представляют собой форму внедрения скриптов на страницы в плагине Google (хотя это и называется скриптом, на самом деле он может включать CSS) С помощью контент-скриптов вы можете легко вставлять JS и CSS на указанные страницы через конфигурацию .

• background

{
    ···

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

    ···
}

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

Также автор нарисовал дистрибутив задействованных в браузере скриптов, как показано ниже:

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

Предварительные условия

Поскольку некоторые учащиеся не знают, как разрабатывать подключаемые модули Google, давайте поговорим о предварительных условиях. Во-первых, вам нужно открыть расширение управления и включить режим разработчика. Нажмите кнопку «Загрузить распакованную программу», чтобы загрузить локальный подключаемый модуль Google.Если код обновляется во время разработки, необходимо обновить загруженный подключаемый модуль, нажать «Закрыть», а затем открыть, не обновляя страницу разработки.

Плагин Google для перевода слов

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

думать

Как сделать плагин для перевода словесных пометок, в первую очередь нужно рассмотреть следующее:

• Как добиться эффекта перевода
• Как выбрать нужный нам элемент
• Как отобразить панель перевода формулировок после выбора элемента
• Все вкладки браузера должны поддерживать эффекты перевода

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

панель перевода словесных пометок

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

HTML-код выглядит следующим образом:

<div class="translate-panel show">
    <header>谷歌划词翻译插件<span class="close">X</span></header>
    <main>
        <div class="source">
            <div class="title">英文</div>
            <div class="content">test</div>
        </div>
        <div class="result">
            <div class="title">简体中文</div>
            <div class="content">...</div>
        </div>
    </main>
</div>

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

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

// manifest.json
{
    ...

    "content_scripts": {
        "matches": ["<all_urls>"],
        "css": ["content_script.css"],
        "js": ["content_script.js"]
    },
    "permissions": [
        "activeTab"
    ],

    ...
}

// content_script.js
class TranslatePanel {

    createPanel = () => {
        let wrapper = document.createElement('div')
        wrapper.innerHTML = `
            <header>谷歌划词翻译插件<span class="close">X</span></header>
            <main>
                <div class="source">
                    <div class="title">英文</div>
                    <div class="content">test</div>
                </div>
                <div class="result">
                    <div class="title">简体中文</div>
                    <div class="content">...</div>
                </div>
            </main>
        `
        wrapper.classList.add('translate-panel')
        wrapper.querySelector('.close').onclick = () => {
            this.wrapper.classList.remove('show')
        }
        document.body.appendChild(wrapper)
        this.wrapper = wrapper

    }

    showPanel = () => {
        this.wrapper.classList.add('show')
    }

    translateSelect = (content) => {
        const source = this.wrapper.querySelector('.source .content')
        const result = this.wrapper.querySelector('.result .content')
        source.innerHTML = content
        result.innerHTML = '翻译中...'

        fetch(`https://translate.google.cn/translate_a/single?client=at&sl=en&tl=zh-CN&dt=t&q=${content}`)
            .then(res => res.json())
            .then(res => {
                result.innerHTML = res[0][0][0]
            })
    }

    locationPanel = (target) => {
        this.wrapper.style.top = target.y + 'px'
        this.wrapper.style.left = target.x + 'px'
###     }
}

let panel = new TranslatePanel()
panel.createPanel()

window.onmouseup = (target) => {
    // 获取选中内容
    const content = window.getSelection().toString().trim()

    if (!content) return
    panel.locationPanel({ x: target.pageX, y: target.pageY })
    panel.translateSelect(content)
    panel.showPanel()

}

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

связь по сценарию

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

Основные эффекты следующие:

<div class="switch-wrapper">
    <div class="switch-desc">是否启用划词翻译</div>
    <input type="checkbox" class="switch" />
</div>

В то же время панель и панель для перевода словесных маркировок уже существуют, а затем рассмотрим, как реализовать связь между скриптом popup и скриптом content_script. В первую очередь на popup script, когда мы открываем окно, нам нужно проверить, есть ли состояние, в котором хранится подчеркнутый перевод, в то же время, когда состояние изменяется, нам нужно его сохранить, а затем отправить запрос в текущей вкладке.

// popup.js
let switchWrapp = document.querySelector('.switch')

chrome.storage.sync.get(['checked'], (target) => {
    if (target) {
        switchWrapp.checked = target.checked
    }
})

switchWrapp.onclick = (e) => {
    chrome.storage.sync.set({ checked: e.target.checked })

    chrome.tabs.query( {active: true, currentWindow: true }, (tabs) => {
        chrome.tabs.sendMessage(tabs[0].id, { checked: e.target.checked })
    })
}

chrome.storage в приведенном выше коде можно использовать для хранения и отслеживания данных. Функция storage.sync заключается в синхронизации данных Google Chrome, благодаря чему состояние переключения на разных вкладках также синхронизируется, и нет необходимости сохранять данные на фоновой фоновой странице.В хранилище много API, такие как мониторинг данных хранилища.Измененные onChanged не будут вводиться один за другим. После отправки состояния включения или отключения перевода маркировки слов в content_script.JS необходимо добавить событие прослушивателя, а после получения состояния закрыть или открыть его.

// content_script.js
let checked = false

window.onmouseup = (target) => {
    ···

    if (!content || !checked) return

    ···

}

chrome.storage.sync.get(['checked'], (target) => {
    if (target) checked = target.checked
})

chrome.runtime.onMessage.addListener((target) => {
    if (target) {
        checked = target.checked
    }
})

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

// content_script.js
let panel = new TranslatePanel()
panel.createPanel()

window.onmouseup = (target) => {
    // 获取选中内容
    const content = window.getSelection().toString().trim()

    if (!content) return

    window.chrome.storage.sync.get(['checked'], (result) => {
        if (result.checked) {
            panel.locationPanel({ x: target.pageX, y: target.pageY })
            panel.translateSelect(content)
            panel.showPanel()
        }
    })
}

chrome.runtime.onMessage.addListener((target) => {
    if (target.type == 'CHECKED') {
        chrome.storage.sync.set({ checked: target.checked })
    }
})

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

Щелкните правой кнопкой мыши прямо на странице перевода

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

// backgrond.js
// 当扩展程序第一次安装、更新至新版本或 Chrome 浏览器更新至新版本时产生
chrome.runtime.onInstalled.addListener(() => {
    chrome.contextMenus.create({
        "id": "SELECT_TRANSLATE",
        "title": "翻译 %s",
        "contexts": ["selection"]
    })
})

chrome.contextMenus.onClicked.addListener((target) => {
    if (target.menuItemId == 'SELECT_TRANSLATE') {
        chrome.tabs.create({url: `https://translate.google.cn/?sl=en&tl=zh-CN&text=${target.selectionText}&op=translate`})
    }
})

междоменная проблема

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

Тогда, как правило, этот перевод словесной маркировки очень неразумно использовать, и тогда нам нужно решить эту междоменную проблему.

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

// content_script.js
translateSelect = (content) => {
    const source = this.wrapper.querySelector('.source .content')
    const result = this.wrapper.querySelector('.result .content')
    source.innerHTML = content
    result.innerHTML = '翻译中...'

    chrome.runtime.sendMessage({ type: 'QUERY_TRANSLATE', queryContent: content }, (res) => {
        result.innerHTML = res[0][0][0]
    })
}

// background.js
chrome.runtime.onMessage.addListener((request, sender, callBack)  => {
    if (request.type == 'QUERY_TRANSLATE') {
        fetch(`https://translate.google.cn/translate_a/single?client=at&sl=en&tl=zh-CN&dt=t&q=${request.queryContent}`)
            .then(res => res.json())
            .then(res => {
                callBack(res)
            })
        return true
    }
})

Событие прослушивателя отправки сообщения в фоновом режиме возвращает значение true, чтобы канал сообщений оставался открытым с помощью content_script и асинхронно отправлялся запрос.

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

точка для улучшения

• Поддержка перевода на другие языки.Интерфейс Google Translate имеет два API, sl (язык перед переводом текста) и tl (язык, на который необходимо перевести текст), которые могут поддерживать перевод на другие языки путем изменения соответствующего значения;
• Стиль идеален, и значок выбран первый для перевода. Добавление еще одного шага чувствует себя более дружелюбным к взаимодействию, без необходимости переключать операции;

структура кода

После введения плагина перевода словесных маркировок автор изначально планировал поделиться другим инструментом разработки Google devtool, чтобы разработать аналогичныйReact Developer ToolsЛокальный инструмент разработки .Развитие devtool позволяет читателям быстро распознавать плагины Google, некоторые из браузеров Google и делать другие выводы из одного случая, если вы заинтересованы в разработке плагинов инструмента devtool, вы также можете узнать об этом. Кроме того, некоторые студенты могут подумать, что текущая эффективность разработки немного низка.Теперь разработка плагинов Google также может быть разработана на основе реакции + antd, и это также может обеспечить эффект эффективной разработки плагина. и быстро.

конец

При изучении плагинов Google автор столкнулся с некоторыми проблемами, например, документов мало, а официальные документы на английском языке и часто 404. Однако, к счастью, браузер Google предоставляет много API, и автор пишет плагин -ins here Мне тоже было очень весело в то время. Эта статья по-прежнему написана относительно легко для понимания, если что-то не так или неясно, пожалуйста, поднимите руку и говорите.

Более

• Официальная документация:developer.chrome.com/docs/extens…
• реагировать + и строительные леса:GitHub.com/ просто 0409/ горячо…
• Полный код:GitHub.com/Ting0130/Ешь…