├── images ├── icon-16x16.png ├── icon-32x32.png └── icon-128x128.png ├── notes.txt ├── css └── styles.css ├── background.js ├── popup.html ├── manifest.json ├── js └── popup.js └── content.js /images/icon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debaosuidecl/yt_extension_tutorial/HEAD/images/icon-16x16.png -------------------------------------------------------------------------------- /images/icon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debaosuidecl/yt_extension_tutorial/HEAD/images/icon-32x32.png -------------------------------------------------------------------------------- /images/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debaosuidecl/yt_extension_tutorial/HEAD/images/icon-128x128.png -------------------------------------------------------------------------------- /notes.txt: -------------------------------------------------------------------------------- 1 | 2 | KEY PARTIES OF A CHROME EXTENSION 3 | popup.js <---> tab (content script) <---> background.js script -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | 7 | 8 | .content{ 9 | padding: 10px; 10 | min-width: 300px; 11 | } 12 | 13 | .button_cont button{ 14 | padding: 10px; 15 | border: none; 16 | border-radius: 10px; 17 | background: teal; 18 | color: white; 19 | width: 100%; 20 | 21 | } 22 | 23 | .button_cont button:hover{ 24 | box-shadow: 1px 0px 10p #eee; 25 | } -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | //chrome 2 | 3 | chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab)=>{ 4 | if(changeInfo.status === "complete" && /^http/.test(tab.url)){ 5 | chrome.scripting.executeScript({ 6 | target: {tabId}, 7 | files: ["./content.js"] 8 | }).then(()=>{ 9 | console.log("we have injected the content script") 10 | }).catch(err=> console.log(err, "error in background script line 10")) 11 | } 12 | }) 13 | 14 | 15 | -------------------------------------------------------------------------------- /popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Degraphe Video Recorder 8 | 9 | 10 |
11 |

TAKE VIDEO

12 | 13 |
14 | 15 |
16 |
17 |
18 | 19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "Degraphe Screen Recorder", 4 | "description": "It records the user's screen", 5 | "icons": { 6 | "128": "/images/icon-128x128.png" 7 | }, 8 | 9 | "background": { 10 | "service_worker": "background.js" 11 | }, 12 | 13 | "action": { 14 | "default_popup": "popup.html", 15 | "default_icon": { 16 | "16": "/images/icon-16x16.png", 17 | "32": "/images/icon-32x32.png", 18 | "128": "/images/icon-128x128.png" 19 | } 20 | 21 | }, 22 | 23 | "host_permissions": [ 24 | "http://*/", 25 | "https://*/*" 26 | ], 27 | 28 | "permissions": [ 29 | "scripting", 30 | "tabs", 31 | "activeTab" 32 | ], 33 | "version": "1.0.0" 34 | } -------------------------------------------------------------------------------- /js/popup.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", ()=>{ 2 | // GET THE SELECTORS OF THE BUTTONS 3 | const startVideoButton = document.querySelector("button#start_video") 4 | const stopVideoButton = document.querySelector("button#stop_video") 5 | 6 | // adding event listeners 7 | 8 | startVideoButton.addEventListener("click", ()=>{ 9 | chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ 10 | chrome.tabs.sendMessage(tabs[0].id, {action: "request_recording"}, function(response){ 11 | if(!chrome.runtime.lastError){ 12 | console.log(response) 13 | } else{ 14 | console.log(chrome.runtime.lastError, 'error line 14') 15 | } 16 | }) 17 | } ) 18 | }) 19 | 20 | 21 | stopVideoButton.addEventListener("click", ()=>{ 22 | chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ 23 | chrome.tabs.sendMessage(tabs[0].id, {action: "stopvideo"}, function(response){ 24 | if(!chrome.runtime.lastError){ 25 | console.log(response) 26 | } else{ 27 | console.log(chrome.runtime.lastError, 'error line 27') 28 | } 29 | }) 30 | } ) 31 | }) 32 | }) -------------------------------------------------------------------------------- /content.js: -------------------------------------------------------------------------------- 1 | console.log("Hi, I have been injected whoopie!!!") 2 | 3 | var recorder = null 4 | function onAccessApproved(stream){ 5 | recorder = new MediaRecorder(stream); 6 | 7 | recorder.start(); 8 | 9 | recorder.onstop = function(){ 10 | stream.getTracks().forEach(function(track){ 11 | if(track.readyState === "live"){ 12 | track.stop() 13 | } 14 | }) 15 | } 16 | 17 | recorder.ondataavailable = function(event){ 18 | let recordedBlob = event.data; 19 | let url = URL.createObjectURL(recordedBlob); 20 | 21 | let a = document.createElement("a"); 22 | 23 | a.style.display = "none"; 24 | a.href = url; 25 | a.download = "screen-recording.webm" 26 | 27 | document.body.appendChild(a); 28 | a.click(); 29 | 30 | document.body.removeChild(a); 31 | 32 | URL.revokeObjectURL(url); 33 | } 34 | } 35 | 36 | 37 | chrome.runtime.onMessage.addListener( (message, sender, sendResponse)=>{ 38 | 39 | if(message.action === "request_recording"){ 40 | console.log("requesting recording") 41 | 42 | sendResponse(`processed: ${message.action}`); 43 | 44 | navigator.mediaDevices.getDisplayMedia({ 45 | audio:true, 46 | video: { 47 | width:9999999999, 48 | height: 9999999999 49 | } 50 | }).then((stream)=>{ 51 | onAccessApproved(stream) 52 | }) 53 | } 54 | 55 | if(message.action === "stopvideo"){ 56 | console.log("stopping video"); 57 | sendResponse(`processed: ${message.action}`); 58 | if(!recorder) return console.log("no recorder") 59 | 60 | recorder.stop(); 61 | 62 | 63 | } 64 | 65 | }) --------------------------------------------------------------------------------