SurferSEO Trigger Share & copy links

Adds a button to trigger the "Share" action on SurferSEO drafts and automatically copies the link text, with a popup notification when copied.

  1. // ==UserScript==
  2. // @name SurferSEO Trigger Share & copy links
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0
  5. // @description Adds a button to trigger the "Share" action on SurferSEO drafts and automatically copies the link text, with a popup notification when copied.
  6. // @match https://app.surferseo.com/drafts/*
  7. // @grant none
  8. // @author mhshan
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13. 'use strict';
  14.  
  15. // Function to create the custom button
  16. function createCustomButton() {
  17. const button = document.createElement('button');
  18. button.textContent = 'Trigger Share & copy link';
  19. button.style.position = 'fixed';
  20. button.style.top = '10px';
  21. button.style.right = '800px';
  22. button.style.padding = '10px';
  23. button.style.backgroundColor = '#FA4032';
  24. button.style.color = 'white';
  25. button.style.border = 'none';
  26. button.style.borderRadius = '5px';
  27. button.style.cursor = 'pointer';
  28. button.style.zIndex = '1000';
  29.  
  30. // Append button to body
  31. document.body.appendChild(button);
  32.  
  33. // Add click event to the button
  34. button.addEventListener('click', function () {
  35. // Find and click the "Share" button
  36. const shareButton = document.querySelector('button[data-tour="share-content-editor"]');
  37. if (shareButton) {
  38. shareButton.click();
  39. console.log("Share button clicked.");
  40. setTimeout(copyLinkText, 100); // Wait for 1 seconds before attempting to copy the link
  41. } else {
  42. alert('Share button not found.');
  43. }
  44. });
  45. }
  46.  
  47. // Function to copy the text content of the link element
  48. function copyLinkText() {
  49. // Wait for the link element to be present
  50. const linkElement = document.querySelector("span.block.truncate");
  51.  
  52. if (linkElement) {
  53. // Get the text content of the link element
  54. let textContent = linkElement.textContent;
  55.  
  56. // Create a temporary textarea to copy the text content to the clipboard
  57. const textArea = document.createElement('textarea');
  58. textArea.value = textContent;
  59. document.body.appendChild(textArea);
  60.  
  61. // Select the text in the textarea
  62. textArea.select();
  63. textArea.setSelectionRange(0, 99999); // For mobile devices
  64.  
  65. // Copy the selected text to the clipboard
  66. document.execCommand('copy');
  67.  
  68. // Clean up by removing the temporary textarea
  69. document.body.removeChild(textArea);
  70.  
  71. console.log("Link text copied:", textContent);
  72.  
  73. // Show the popup notification
  74. showCopiedNotification();
  75. } else {
  76. console.log("Link element not found.");
  77. }
  78. }
  79.  
  80. // Function to show a popup notification with animation
  81. function showCopiedNotification() {
  82. const notification = document.createElement('div');
  83. notification.textContent = 'Link copied!';
  84. notification.style.position = 'fixed';
  85. notification.style.top = '10px';
  86. notification.style.right = '400px';
  87. notification.style.padding = '10px 20px';
  88. notification.style.backgroundColor = '#99FF74';
  89. notification.style.color = '#00681C';
  90. notification.style.borderRadius = '5px';
  91. notification.style.fontSize = '14px';
  92. notification.style.zIndex = '1000';
  93. notification.style.opacity = '0';
  94. notification.style.transition = 'opacity 0.5s ease-out';
  95. document.body.appendChild(notification);
  96.  
  97. // Trigger the fade-in animation
  98. setTimeout(() => {
  99. notification.style.opacity = '1';
  100. }, 10);
  101.  
  102. // After 2 seconds, fade out and remove the notification
  103. setTimeout(() => {
  104. notification.style.opacity = '0';
  105. setTimeout(() => {
  106. document.body.removeChild(notification);
  107. }, 500); // After the fade-out animation finishes
  108. }, 2000);
  109. }
  110.  
  111. // Wait until the page has fully loaded
  112. window.addEventListener('load', function () {
  113. // Create the custom button
  114. createCustomButton();
  115. });
  116. })();