Создайте расширение Chrome для повышения производительности блоггеров и выпустите его на рынок

Введение

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

Есть две причины, по которым я решил создать утилиту с расширением для Chrome.

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

Буфер обмена Markdown
Подключаемый модуль может повысить производительность и сократить время редактирования синтаксиса markdown.chrome.google.com

Я запишу только грубый обзор этой статьи. Он представит следующие разделы.

Основа расширений Chrome
Введение API-интерфейсов хранилища
ContextMenus (меню правой кнопки мыши)
Этапы выхода на рынок

Основа расширений Chrome

1. Разберитесь со структурой на официальном примере

Пример расширения Chrome в Руководстве по началу работы поможет новичкам понять структуру.

(1) Загрузите пример расширения Chrome

(2) Посетите chrome://extensions и включите режим разработчика (правая кнопка)

(3) Загрузите загруженную папку с помощью левой кнопки, после чего вы увидите свое первое расширение Chrome.

2. Создайте обзор приложения

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

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

3. Выбираем компоненты, которые нам нужны

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

popup.js и popup.html: основной интерфейс, который пользователи могут проверять и манипулировать
background.js: создать contextMenus (меню правой кнопкой мыши)
изображения: содержат значки
manifest.json: открыть разрешения и добавить всплывающее окно, фон, значки

Введение API-интерфейсов хранилища

Есть куча Chrome API из официального документа. Это отличается от API localStorage. API-интерфейсы хранилища могут синхронизировать данные с браузерами и работать в режиме инкогнито.

Включите разрешение:

Изменить файл manifest.json

"permissions": [
    "storage"
]

Тип 1. Chrome.local хранилище

Хранить и загружать информацию с локальной машины
Квота Chrome.local составляет 5242880 байт (chrome.storage.local.QUOTA_BYTES).

Тип 2. Хранилище Chrome.sync

Сохраненные данные будут автоматически синхронизированы с любым браузером Chrome, в который вошел пользователь.
Квота Chrome.sync составляет 102 400 байт (chrome.storage.sync.QUOTA_BYTES).

Запись и чтение данных с помощью Chrome.local или Chrome.sync

let data = //number, string, list, or JSON
chrome.storage.sync.set({'key':data},function() {
    chrome.storage.sync.get('test9',function(newItems)
        alert(newItems[key])
        alert(JSON.stringify(newItems))
    });
});

Удалить данные из хранилища

chrome.storage.sync.remove("key",function() {
    var error = chrome.runtime.lastError;
    if (error) {
        alert.error(error);
    } else {
        //Do something
    }
});

ContextMenus (меню правой кнопки мыши)

Включите разрешение

Изменить файл manifest.json

"permissions": [
    "storage"
]

Изменить background.js

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

Это будет выглядеть как следующий снимок экрана

Изменить popup.js

В этом случае мы используем традиционные HTML, CSS и JavaScript без фреймворков. Мы должны выполнять манипуляции с DOM в событии DOMContentLoaded.

Этапы выхода на рынок

Посетите портал разработчиков и вам придется заплатить 5 долларов.
Загрузите следующие файлы

(1) Сжатая папка вашего расширения

(2) Значок (128 * 128 пикселей)

(3) Скриншоты вашего расширения (1280 * 800 или 640 * 400 пикселей)

(3) Холсты разных размеров (440*280/920*680/1400*560 пикселей)

3. Измените разрешения вашего расширения.

4. Отправьте и дождитесь рассмотрения

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

Резюме

Спасибо за вашего пациента. Я Шон. Я работаю инженером-программистом.

Эта статья — моя заметка. Пожалуйста, не стесняйтесь дать мне совет, если какие-либо ошибки. Я с нетерпением жду ваших отзывов.

Страница Facebook для статей

Профан
Профан. 81 лайк. Страница с информацией о языках программирования, алгоритмах, базах данных, devops и…www.facebook.com

Последний побочный проект: Daily Learning

ALayman Daily Learning
Daily Learning предоставляет статьи, задачи или видео для людей, которые также изучают программирование самостоятельно.daily-learning.herokuapp.com