Skip to content

Commit 842b4de

Browse files
hackernesehackernese
committed
Latest changes for today :
1. Updated README.md 2. Published to Chrome webstore 3. Added more necessary comments and minor functions 4. Successfully got rid of the "Receiving end does not exist" error. 5. Successfully checked for when a user derived from anoter route rather than "/watch" and added the Icons afterward.
1 parent 4f481b8 commit 842b4de

File tree

6 files changed

+119
-44
lines changed

6 files changed

+119
-44
lines changed

‎ContentScript.js

Lines changed: 81 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,6 @@ function BookmarkFormBind(vidid, timestamp, ctimestamp){
6767
// Binding some HTML elements to some events and tweaking some stuffs when a user wish
6868
// to open the textarea in order to insert notes into the bookmark
6969

70-
$j("body").off('keydown');
71-
$j("body").off('keypress');
72-
$j("body").off('keyup');
73-
74-
// console.log(getEventListeners($j("body")[0]));
75-
7670
$j(".ymark-menu-bookmark").children().last()
7771
$j(".ymark-menu-bookmark").children().last()[0].style.display = "none";
7872

@@ -289,16 +283,42 @@ const popup_menu = async ()=>{
289283

290284
}
291285

292-
$j(".html5-video-player").ready(function(){video_container = $j(".html5-video-player");});
286+
function GetDOMReady(f){
287+
288+
/*
289+
290+
This function will do some necessary DOM manipulation like grabbing the element
291+
of .html5-video-player and also binding necessary function to "play" and "pause"
292+
events on the main <video>. before executing the callback function f(...)
293+
294+
f => Callback function after successfully grabbing the element.
293295
294-
$j("video").ready(function(){
295-
$j("video").on("play", ()=>{
296-
is_played = true;
296+
*/
297+
298+
$j("video").ready(function(){
299+
$j("video").on("play", ()=>{
300+
is_played = true;
301+
});
302+
$j("video").on("pause", ()=>{
303+
is_played = false;
304+
});
297305
});
298-
$j("video").on("pause", ()=>{
299-
is_played = false;
306+
307+
// binding play + pause event to <video> ^^^^
308+
309+
$j(".html5-video-player").ready(()=>{
310+
311+
video_container = $j(".html5-video-player");
312+
313+
f();
314+
300315
});
301-
});
316+
317+
}
318+
319+
GetDOMReady(()=>{});
320+
321+
302322

303323
const load_fonts = async ()=>{
304324

@@ -376,32 +396,66 @@ function notify(type, msg){
376396

377397
}
378398

379-
(()=>{
380-
381-
load_fonts();
382-
// Loadng existing fonts into the system here
383-
399+
function SendMessageBackGround(){
384400

385-
chrome.runtime.onMessage.addListener((obj, sender, resp)=>{
401+
// Called when the ContentScript is ready and it will send back a message
402+
// to the Background script to notify it that this is ready and will load
403+
// the icon into the utility bars afterward.
386404

387-
// Recieving message when a new youtube tab is created.
388-
389-
const {type, id} = obj;
405+
chrome.runtime.sendMessage("READY",(response) => {
390406

391-
if(type==="NEWVID"){
392-
393-
// Loading the extension button into the video bar
407+
if(response==="NEWVID"){
394408

395409
$j(".ytp-right-controls").ready(function() {
396410

397411
youtubebar = $j(".ytp-right-controls");
398412
loadIcon();
399413

400414
});
401-
402415
}
403-
416+
404417
});
418+
}
419+
420+
async function MonitorURLChange(){
421+
422+
/*
423+
424+
The content script can only be available in two hosts
425+
1. youtube.com/watch?v=<id>
426+
2. youtune.com/
427+
428+
The valid route is /watch?v but if the user chooses to go with a different
429+
route rather than /watch?v, this function will be called and it will wait
430+
until the user finally choose to switch to a video, only then it will
431+
GetDOMReady(...) in order to grab the necessary HTML elements
432+
and calling SendMessageBackGround(...) afterward to notify the background
433+
script of new changes...
434+
435+
*/
436+
437+
while((new URL(window.location.href)).pathname !== "/watch" ){
438+
await new Promise(r => setTimeout(r, 200));
439+
}
440+
441+
GetDOMReady(SendMessageBackGround);
442+
443+
// Similar to
444+
/*
445+
GetDOMReady(()=>{
446+
447+
SendMessageBackGround();
448+
449+
})
450+
*/
451+
452+
}
453+
454+
(()=>{
455+
456+
load_fonts(); // Loadng existing fonts into the system here
457+
458+
window.location.href.startsWith("https://www.youtube.com/watch") ? SendMessageBackGround() : MonitorURLChange();
405459

406460

407461
chrome.storage.sync.get([db], (e)=>{

‎README.md

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
# YouMarker ( v1.0.0 )
2+
YouMarker or YoutubeMarker is a chrome extension which can helps you keeping track of your youtube videos in an easy and viewable manner. Each bookmark will be separated and categories into a collection corresponding to a specific video
23

3-
[![N|Solid](https://uploads-ssl.webflow.com/5f4f5872323e026126988212/5f56321f2220c927ad18423e_ChromeWebStore_BadgeWBorder_v2_496x150.png)](https://nodesource.com/products/nsolid)
4+
<img src="http://kerrick.github.io/Mostly-Harmless/images/ss_webstore.png" width="200" height=50 />
45

5-
YouMarker or YoutubeMarker is a chrome extension which can helps you keeping track of your youtube videos in an easy and viewable manner. Each bookmark will be separated and categories into a collection corresponding to a specific video
66

77

8+
## Demo :
9+
The following clip demonstrates how you can use this extension.
810

9-
## Installation :
10-
something here
11+
![Quick tutorial](https://media.giphy.com/media/bGIumLpZg0P6QhNjlI/giphy.gif)
1112

1213

13-
## Quick Tutorial :
14-
![](https://github.com/hackernese/YoutubeMarker/tree/main/assets/tutorial.gif)
14+
You can utilize some of the following keystrokes combination in order to make your process more convenient :
15+
Combination | Description |
16+
--- | --- |
17+
Ctrl - I | Quickly open up the textarea for inputting. Reclick for closing |
18+
19+
## Installation :
20+
This project is available on Chrome Web Store. Simply [click here](https://media.giphy.com/media/bGIumLpZg0P6QhNjlI/giphy.gif) to browse to the Chrome Web Store and choose "Add to browser" in order to install and use it.

‎TODO

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
-> Figuring out how to detect route changes for /watch?v=ID faster rather than using an async function with infinite loop.

‎background.js

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
1+
2+
var activeVideos = {};
3+
4+
5+
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
6+
7+
console.log("background.js got a message")
8+
9+
if(request==="READY" && activeVideos.hasOwnProperty(sender.tab.id)){
10+
11+
// The content script on the other side is ready
12+
sendResponse("NEWVID");
13+
14+
}
15+
16+
});
17+
118
chrome.tabs.onUpdated.addListener((tabid, cinfo, tab)=>{
219

320
if(tab.url && tab.url.includes("youtube.com/watch")){
421

522
const params = tab.url.split("?")[1];
623
const urlparams = new URLSearchParams(params);
724

8-
chrome.tabs.sendMessage(tabid, {
9-
25+
activeVideos[tabid] = {
1026
type : "NEWVID",
1127
id : urlparams.get("v")
12-
13-
});
28+
}
1429

1530
}
1631
});
17-
18-
1932
chrome.runtime.onInstalled.addListener((reason) => {
2033
if (reason === chrome.runtime.OnInstalledReason.INSTALL) {
2134

‎keystrokes.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,6 @@ const open_bookmark_menu = async (e)=>{
3030

3131
$j(document).keydown((e)=>{
3232

33-
console.log("WHATEVER");
34-
3533

3634
if (e.ctrlKey && e.keyCode == 73) {
3735

‎manifest.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@
33
"name" : "YouMarker",
44
"description":"Bookmarking youtube timestamp",
55
"version":"0.1.0",
6-
"host_permissions" : ["https://*.youtube.com/*"],
7-
"permissions":["storage", "tabs","notifications"] ,
6+
"host_permissions" : ["https://www.youtube.com/watch?*"],
7+
"permissions":["storage", "tabs", "notifications"] ,
88

99
"content_scripts":[
1010
{
11-
"matches":["https://*.youtube.com/watch?v=*"],
11+
"matches":[
12+
"https://*.youtube.com/watch?v=*",
13+
"https://www.youtube.com/*"
14+
],
1215
"js":[
1316
"assets/api/jquery.js",
1417
"keystrokes.js",

0 commit comments

Comments
 (0)