На данный момент я создал два успешных расширения для Chrome и подумал, что было бы здорово поделиться своим опытом и знаниями со всеми. Это поможет всем нам учиться вместе. Я буду называть вас приятелем через этот пост в блоге, и я, надеюсь, вы не возражаете 😉 и даже если вы это сделаете, мне просто все равно 😜
Напрасно вы приобрели знания, если не передали их другим. - Второзаконие Раба
Вот два моих замечательных расширения:
- JSconsole: для загрузки внешних JS-библиотек в вашу консоль разработчика. Недавно опубликовал в магазине Chrome
- Подведем итоги: микро-закладка и многоцветный маркер.
PS: Оба были представлены на Product Hunt (JSconsole и SumItUp)
Давайте вместе создадим JSconsole 🤝
Проблема, которую он решит:
Итак, приятель, у меня была проблема с моей консолью разработчика Chrome (⌘ + ⌥ + i на Mac или Ctrl + Shift + i в Windows ИЛИ Linux). Поверьте, хромированная консоль разработчика очень умна и имеет множество встроенных функций, но чего не хватает, так это то, что она не может загружать внешние библиотеки прямо внутри нее. Например, что, если мне нужны jQuery, Lodash, Moment и т. Д. В текущем рабочем контексте консоли?
Чем я занимался раньше?
1. Скопируйте полный код из CDN и вставьте его прямо в мою консоль. Например, если бы мне понадобился `момент` в моей консоли, я бы сделал, как показано ниже:
2. Я бы пошел на некоторые веб-сайты с кодовыми скриптами, такие как JSfiddle, Plunker, JSBin и т. Д., Которые могут предоставить вам платформу для игры с внешними библиотеками, но это тоже требует большого переключения контекста, и вам нужно установить аналогичную среду на реальную один для правильного тестирования.
3. Если бы я хотел, чтобы библиотека загружалась на страницу как часть тега скрипта. Я бы использовал приведенный ниже код.
const script = document.createElement(‘script’); script.src = CDN_URL; (document.head||document.documentElement).appendChild(script);
4. Один из способов - отредактировать HTML и добавить в него тег скрипта с правильной ссылкой CDN, но этот тоже утомляет.
Но все четыре вышеупомянутых метода заставят вас переключить контекст и искать URL-адрес CDN библиотеки.
Зачем мне переключать весь свой контекст и искать внешние ресурсы в другом месте? Я не хочу переключаться даже на один URL, потому что это займет несколько минут моей жизни, и у меня совсем нет лишнего времени, чтобы тратить его зря. Надеюсь, приятель, ты понял мою проблему, и если нет, пожалуйста, прочтите ее еще раз, прежде чем двигаться дальше.
Давайте погрузимся в настоящую игру !!!
Первая часть будет посвящена основам расширения Chrome и тому, как начать работу с Yeoman (инструмент для создания шаблонов) для настройки начальной иерархии папок.
Вторая часть будет подробным решением проблемы, о которой я только что рассказал вам выше, и того, как я создаю расширение Chrome для ее решения. Вы также можете внести свой вклад в проект, потому что это OpenSource.
PepTalk: если вы знаете основы HTML, CSS и JAVASCRIPT, вы также можете создать расширение для Chrome.
Основные определения 📖
- Yeoman: веб-инструмент для создания современных веб-приложений. Это поможет вам получить стартовый набор всего, что связано с сетью в этом мире.
- API JavaScript: перейдите к руководству по всем API, которые Google предоставляет разработчикам расширений Chrome.
- Обзор: основное определение различных компонентов, которые мы будем использовать в этом руководстве.
Отказ от ответственности: если вы новичок в расширениях Chrome, прочтите обзор, а затем продолжайте только это руководство, иначе весь жаргон будет выше вашей ленивой головы. .
Первая ( 😛 ) -арт:
Я всегда использую yeoman для настройки базовой архитектуры своих приложений и верю, что это счастье избежать хлопот с настройкой структуры папок. Это помогает мне сосредоточиться на написании бизнес-логики, а не на настройке множества конфигураций. Вот иди, приятель, следуй ниже 👣
------------------------------------------------------------
SETUP STEPS
------------------------------------------------------------
# Please make sure that `yo`, `gulp` and `bower` was installed on your system using this command:
npm install -- global yo gulp-cli bower
# Install the generator:
npm install -g generator-chrome-extension
# Make a new directory, and `cd` get into it:
mkdir lovely_extension && cd $_
# Generate a new project
yo chrome-extension
? Choose your style of DSL (Use arrow keys)
❯ BDD (Choose this one if you don't want to write test case from starting)
TDD (Recommended)
? What would you like to call this extension? (lovely_extension): Test
? How would you like to describe this extension? (My Chrome Extension) Learning chrome extensions
? Would you like to use UI Action? (Use arrow keys)
No
Browser Action (Permanently displayed to the right of the address bar.)
❯ Page Action (Only displayed on certain pages, and their icon appears inside the address bar.)
Would you like more UI Features?
◯ Options UI (UI for options in extension)
❯◉ Content Scripts (Required to control the page of users. Need to inject something on DOM).
◯ Omnibox
Would you like to set permissions?
◯ History
◯ Idle
◯ Management
❯◯ Notifications
◯ Page Capture
◯ Tabs
◯ Top Sites
(Choose appropriate storage according to your extension type. Don't worry you can edit it later directly in manifest.json file).
Wait for 2 minutes setup magic 💥 💫 is happening ..............
2. Откройте приложение ›popup.html.
Replace <h1>’Allo, ‘Allo!</h1> to <h1>’I am awesome chrome extension developer’</h1>
3. Запустите ›gulp build (будет создана папка dist).
4. Откройте Настройки Chrome ›Дополнительные инструменты› Расширения ›Режим разработчика (проверьте)› Загрузить распакованное расширение… › Выберите папку dist, созданную на шаге 2.
Вот и ты, приятель
Некоторые команды, которые вы можете использовать при разработке расширения Chrome.
------------------------------------------------------------ DEVLOPEMENTS COMMANDS ------------------------------------------------------------ # Using watch to update source continuously gulp watch // Use it for development # Make a production version extension gulp build // Use it to get it build for production. # Make a production ready zip file to upload to Chrome web store gulp build && gulp package
Второй (😛) -арт:
Эта часть будет включать в себя шаги по созданию JSconsole.
1) Я выполнил точно те же шаги, что и в первой части.
2) Мне нужно вставить мою библиотеку в объект окна с пространством имен window.js. Этого можно добиться только с помощью контентного сценария.
function injectJs(link) {
var scr = document.createElement("script");
scr.type = "text/javascript";
scr.src = link;
(document.head || document.body || document.documentElement).appendChild(scr);
}
injectJs(chrome.extension.getURL("scripts/main.js"));
main.js содержит всю логику для добавления элементов в окно.
https://github.com/jsconsole/chrome-jsconsole/blob/master/app/scripts.babel/main.js // In the abstract world main.js looks like this. const js = function() { // private and public methods i.e readme(), load()..etc const readme = function() { //Definition }; const load = function(value) { //Definition }; const result = { readme, load, .... etc }; } window.js = js();
3) Внутри метода load (). WTM (Что за магия) происходит внутри него? Я вызываю api.cdnjs.com, чтобы получить URL-адрес CDN для имени библиотеки, которое пользователь ввел при загрузке с помощью js.load (имя_библиотеки).
var url = `https://api.cdnjs.com/libraries?search=${name}&fields=version,description,homepage`; return fetch(url).then(function(dataJSON) { return dataJSON.json(); });
4) Добавьте URL-адрес CDN из ответа приведенного выше кода в качестве сценария в DOM (аналогично шагу 2).
5) Вы можете получить полный код здесь. Разбейте его, нравится и получайте удовольствие. Отправьте PR, если вы хотите внести свой вклад и ищете какой-нибудь начинающий проект с открытым исходным кодом.
Спасибо всем за то, что дочитали до сих пор. Я блогер-новичок, и любой отзыв будет для меня полезен.
Если вам понравился мой пост и вы хотите, чтобы я написал больше, нажмите 👏, чтобы дать мне некоторую мотивацию и поделиться ею с другими, чтобы они тоже могли создавать свои собственные расширения для Chrome.
