Chrome Extension Executor

Execute Chrome extensions by entering their URL

  1. // ==UserScript==
  2. // @name Chrome Extension Executor
  3. // @namespace http://your.namespace.com
  4. // @version 1.0
  5. // @description Execute Chrome extensions by entering their URL
  6. // @author Your Name
  7. // @match *://*/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13.  
  14. // Default colors for GUI
  15. var backgroundColor = 'rgba(0, 0, 0, 0.8)';
  16. var textColor = '#fff';
  17. var buttonColor = '#d9534f';
  18.  
  19. // Create the HTML GUI for the extension executor
  20. var guiHTML = `
  21. <style>
  22. #executor-panel {
  23. position: fixed;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. height: 100%;
  28. background-color: ${backgroundColor};
  29. z-index: 9999;
  30. overflow: hidden;
  31. padding: 20px;
  32. }
  33. #executor-content {
  34. display: flex;
  35. height: 100%;
  36. transition: transform 0.3s ease;
  37. overflow-y: auto;
  38. scrollbar-color: ${buttonColor} ${backgroundColor};
  39. }
  40. #executor-sidebar {
  41. width: 200px;
  42. background-color: rgba(0, 0, 0, 0.5);
  43. color: #fff;
  44. padding: 20px;
  45. overflow-y: auto;
  46. scrollbar-color: ${buttonColor} ${backgroundColor};
  47. }
  48. .executor-option {
  49. background-color: ${buttonColor};
  50. border: none;
  51. padding: 15px 30px;
  52. cursor: pointer;
  53. width: 100%;
  54. border-radius: 10px;
  55. margin-bottom: 15px;
  56. color: ${textColor};
  57. font-size: 16px;
  58. transition: background-color 0.3s ease;
  59. }
  60. .executor-option:hover {
  61. background-color: #c9302c;
  62. }
  63. #executor-main {
  64. flex: 1;
  65. background-color: rgba(255, 255, 255, 0.1);
  66. backdrop-filter: blur(10px);
  67. padding: 20px;
  68. overflow-y: auto;
  69. scrollbar-color: ${buttonColor} ${backgroundColor};
  70. display: flex;
  71. flex-direction: column;
  72. align-items: center;
  73. }
  74. #executor-title {
  75. margin-bottom: 20px;
  76. text-align: center;
  77. color: ${textColor};
  78. font-size: 24px;
  79. }
  80. #extension-executor, #html-executor, #html-logs {
  81. width: 80%;
  82. margin-bottom: 15px;
  83. }
  84. #extension-url, #code-editor, #console-log {
  85. width: 100%;
  86. min-height: 200px;
  87. padding: 10px;
  88. border: 1px solid ${buttonColor};
  89. border-radius: 5px;
  90. color: ${textColor};
  91. background-color: rgba(255, 255, 255, 0.1);
  92. transition: border-color 0.3s ease;
  93. resize: vertical;
  94. overflow: auto;
  95. }
  96. #extension-url:focus, #code-editor:focus {
  97. border-color: #5bc0de;
  98. }
  99. #get-extension-button, #execute-button {
  100. background-color: ${buttonColor};
  101. border: none;
  102. padding: 10px 20px;
  103. cursor: pointer;
  104. border-radius: 5px;
  105. color: ${textColor};
  106. font-size: 16px;
  107. transition: background-color 0.3s ease;
  108. }
  109. #get-extension-button:hover, #execute-button:hover {
  110. background-color: #c9302c;
  111. }
  112. ::-webkit-scrollbar {
  113. width: 10px;
  114. }
  115. ::-webkit-scrollbar-track {
  116. background: ${backgroundColor};
  117. }
  118. ::-webkit-scrollbar-thumb {
  119. background: ${buttonColor};
  120. border-radius: 5px;
  121. }
  122. ::-webkit-scrollbar-thumb:hover {
  123. background: #c9302c;
  124. }
  125. </style>
  126. <div id="executor-panel" style="display: none;">
  127. <div id="executor-content">
  128. <div id="executor-sidebar">
  129. <h3 style="margin-bottom: 20px; color: #f00; font-size: 20px; text-transform: uppercase;">Options</h3>
  130. <button class="executor-option" data-target="html-executor">HTML Executor</button>
  131. <button class="executor-option" data-target="extension-executor">Extension Executor</button>
  132. <button class="executor-option" data-target="html-logs">HTML Logs</button>
  133. <button class="executor-option" data-target="settings">Settings</button>
  134. </div>
  135. <div id="executor-main">
  136. <h2 id="executor-title">Choose an option</h2>
  137. <div id="html-executor" style="display: none;">
  138. <textarea id="code-editor"></textarea>
  139. <button id="execute-button">Execute Script</button>
  140. </div>
  141. <div id="extension-executor" style="display: none;">
  142. <input type="text" id="extension-url" placeholder="Enter extension URL">
  143. <button id="get-extension-button">Get Extension Source</button>
  144. </div>
  145. <div id="html-logs" style="display: none;">
  146. <textarea id="console-log" readonly></textarea>
  147. </div>
  148. <div id="settings" style="display: none;">
  149. <h3>Change GUI Colors</h3>
  150. <label for="background-color">Background Color:</label>
  151. <input type="color" id="background-color" value="${backgroundColor}">
  152. <label for="text-color">Text Color:</label>
  153. <input type="color" id="text-color" value="${textColor}">
  154. <label for="button-color">Button Color:</label>
  155. <input type="color" id="button-color" value="${buttonColor}">
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. `;
  161.  
  162. // Inject the HTML GUI into the document body
  163. document.body.insertAdjacentHTML('beforeend', guiHTML);
  164.  
  165. // Add event listener to toggle the GUI visibility
  166. document.addEventListener('keydown', function(event) {
  167. if (event.ctrlKey && event.key === 'm') {
  168. var executorPanel = document.getElementById('executor-panel');
  169. executorPanel.style.display = (executorPanel.style.display === 'none') ? 'block' : 'none';
  170. }
  171. });
  172.  
  173. // Add event listener to handle option clicks
  174. document.querySelectorAll('.executor-option').forEach(function(option) {
  175. option.addEventListener('click', function(event) {
  176. event.preventDefault();
  177. var targetId = this.getAttribute('data-target');
  178. showOption(targetId);
  179. });
  180. });
  181.  
  182. // Function to show the selected option
  183. function showOption(targetId) {
  184. document.querySelectorAll('.executor-option').forEach(function(option) {
  185. option.classList.remove('active');
  186. });
  187. document.getElementById('executor-title').textContent = targetId.charAt(0).toUpperCase() + targetId.slice(1);
  188. document.querySelectorAll('#executor-main > div').forEach(function(option) {
  189. option.style.display = 'none';
  190. });
  191. document.getElementById(targetId).style.display = 'flex';
  192. document.querySelector('.executor-option[data-target="' + targetId + '"]').classList.add('active');
  193. }
  194.  
  195. // Add event listener to execute script
  196. document.getElementById('execute-button').addEventListener('click', function() {
  197. var code = document.getElementById('code-editor').value;
  198. executeScript(code);
  199. });
  200.  
  201. // Function to execute the entered script
  202. function executeScript(code) {
  203. try {
  204. eval(code);
  205. logMessage('Successfully executed!', 'green');
  206. } catch (error) {
  207. console.error('Script execution error:', error);
  208. logMessage('Execution failed: ' + error, 'red');
  209. }
  210. }
  211.  
  212. // Function to log messages with color
  213. function logMessage(message, color) {
  214. var consoleLog = document.getElementById('console-log');
  215. consoleLog.value += message + '\n';
  216. consoleLog.scrollTop = consoleLog.scrollHeight; // Auto-scroll to the bottom
  217. consoleLog.style.color = color;
  218. }
  219.  
  220. // Capture console.log messages and display them in HTML Logs
  221. var oldLog = console.log;
  222. console.log = function(message) {
  223. oldLog.apply(console, arguments);
  224. logMessage(message, 'white');
  225. };
  226.  
  227. // Capture alerts and display them in HTML Logs
  228. window.alert = function(message) {
  229. console.log('Alert:', message);
  230. window.originalAlert(message); // Call original alert function to display alert
  231. };
  232.  
  233. // Save reference to the original alert function
  234. window.originalAlert = window.alert;
  235.  
  236. // Add event listener to get extension source code
  237. document.getElementById('get-extension-button').addEventListener('click', function() {
  238. var extensionUrl = document.getElementById('extension-url').value;
  239. if (extensionUrl) {
  240. getExtensionSource(extensionUrl);
  241. } else {
  242. alert('Please enter an extension URL.');
  243. }
  244. });
  245.  
  246. // Function to get extension source code
  247. function getExtensionSource(extensionUrl) {
  248. fetch(extensionUrl)
  249. .then(response => response.text())
  250. .then(data => {
  251. document.getElementById('code-editor').value = data;
  252. logMessage('Extension source code fetched successfully!', 'green');
  253. })
  254. .catch(error => {
  255. console.error('Error fetching extension source:', error);
  256. logMessage('Error fetching extension source: ' + error, 'red');
  257. });
  258. }
  259.  
  260. // Add event listener to change GUI colors
  261. document.getElementById('background-color').addEventListener('input', function() {
  262. backgroundColor = this.value;
  263. document.getElementById('executor-panel').style.backgroundColor = backgroundColor;
  264. });
  265.  
  266. document.getElementById('text-color').addEventListener('input', function() {
  267. textColor = this.value;
  268. var elements = document.querySelectorAll('#executor-panel, #executor-title, #executor-main, #code-editor, #console-log');
  269. elements.forEach(function(element) {
  270. element.style.color = textColor;
  271. });
  272. });
  273.  
  274. document.getElementById('button-color').addEventListener('input', function() {
  275. buttonColor = this.value;
  276. var buttons = document.querySelectorAll('.executor-option, #execute-button, #get-extension-button');
  277. buttons.forEach(function(button) {
  278. button.style.backgroundColor = buttonColor;
  279. });
  280. });
  281.  
  282. })();