Несколькими месяцами ранее я осознал необходимость делиться своими прочтениями (в основном сообщениями среднего размера) с публикой. Я очень разборчив к ним, поэтому обмен определенно поможет другим веб-разработчикам. Так родился телеграм-канал The Web Club!
Процесс был примерно таким: потратить некоторое время, чтобы найти хорошую статью на носителе, прочитать и подтвердить полезность, скопировать URL-адрес и название статьи в The Web Club. Наряду с этим добавлен пост для # вдохновения, в основном с сайта дня CSS Design Awards. Этот процесс быстро превратился в рутину.
Но копировать и вставить было действительно скучно. Например, если я хочу создать сообщение с среды: 1. выберите заголовок, 2. ctrl + c, 3. перейдите на канал, 4. вставьте его, 5. вернитесь на среду… Ого! Процесс слишком долгий и утомительный, к тому же я делаю его ежедневно !! Первое, что пришло мне в голову, это Расширения Chrome.
Попытка 1 - теперь отменена
Идея заключалась в том, чтобы создать расширение, которое поможет с легкостью копировать нужный мне контент. Первоначально думал о небольшом интерфейсе для моего расширения, которое содержит кнопку Написать сообщение, которая будет копировать необходимый контент с веб-страницы.
Исходный код выглядел так:
manifest.json:
{ "manifest_version": 2, "name": "Social Pro", "description": "by Dani Vijay", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab", "tabs" ] }
popup.html:
<!doctype html> <html> <head> <title>Social Pro</title> <script src="popup.js"></script> </head> <body> <h1>Social Pro</h1> <button id="compose-post">Compose Post</button> </body> </html>
popup.js:
document.addEventListener('DOMContentLoaded', function() { var checkPageButton = document.getElementById('compose-post'); checkPageButton.addEventListener('click', function() { chrome.tabs.executeScript({ code: "console.log((document.getElementsByClassName('graf')[0].innerHTML).replace(/ /g, ' ') + '\\n\\n' + window.location.href)" }) }, false) }, false)
Как видите, compose-post
просто помещает контент в консоль разработчика с помощью console.log
. Построив это, я понял, что еще так много кликов! Всплывающее окно является излишним для этого сценария. Я должен построить что-то, что значительно снизит рабочую нагрузку.
Попытка 2 - кликов больше нет, результат лучше
Затем я узнал о сценариях содержания. Это просто сценарии, написанные на JavaScript, который запускается автоматически при загрузке страницы. Например, следующий код может внедрить файл content.js на каждую страницу.
... "content_scripts": [ { "matches": [ "<all_urls>" ], "js": ["content.js"] } ] ...
Правильный выбор URL-адресов с matches
был несколько трудным, поэтому я решил придерживаться пути JavaScript. Вот что я придумал.
manifest.js:
{ "manifest_version": 2, "name": "Social Pro", "version": "0.2", "browser_action": { "default_icon": "icon.png" }, "content_scripts": [ { "matches": [ "<all_urls>" ], "js": ["content.js"] } ] }
content.js:
var url = window.location.href setTimeout(function(){ if (url.indexOf('https://medium') !== -1) { if (url.indexOf('?' !== -1)) { url = url.split("?")[0] } var post = (document.getElementsByClassName('graf')[0].innerHTML).replace(/ /g, ' ') + ' \n\n' + url console.log(post) navigator.clipboard.writeText(post).then(function() { console.log('Async: Copying to clipboard was successful!'); }, function(err) { console.error('Async: Could not copy text: ', err); }); } else if (url.indexOf('https://www.cssdesignawards.com/') !== -1) { var post = '#inspiration' + '\n\n' + document.getElementsByClassName("single-website__thumbnail")[0].href console.log(post) navigator.clipboard.writeText(post).then(function() { console.log('Async: Copying to clipboard was successful!'); }, function(err) { console.error('Async: Could not copy text: ', err); }); } }, 2000);
Давайте начнем сверху. URL-адрес играет ключевую роль, поскольку он определяет, запускать ли остальную часть скрипта или нет. Итак, это взято с использованием window.location.href
. Остальная часть скрипта просто ждет некоторое время, чтобы загрузить страницу, а затем проверяет, является ли страница средним значением или оценкой CSS Design Awards. Если страница с носителя, она берет URL-адрес и заголовок сообщения, а затем копирует его в буфер обмена. В другом случае он просто добавляет "# вдохновение" впереди, а затем делает то же самое.
Теперь все, что я хочу сделать, это нажать `ctrl + v`, чтобы вставить составленный пост в любое место !!
Возможны многие улучшения, включая оптимизацию кода. Не стесняйтесь сотрудничать, если вам интересно.
Репозиторий GitHub: https://github.com/danivijay/social-pro
Присоединяйтесь к Веб-клубу: https://t.me/thewebclub
✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .