Несколькими месяцами ранее я осознал необходимость делиться своими прочтениями (в основном сообщениями среднего размера) с публикой. Я очень разборчив к ним, поэтому обмен определенно поможет другим веб-разработчикам. Так родился телеграм-канал 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(/&nbsp;/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(/&nbsp;/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 год и 🕸️ Изучите веб-разработку с полным стеком .