2018-06-24 13:25:20 +02:00
/ *
Konstanten
* /
// CSS Pfad, der existiert, wenn die Seite mit Inhalten gefüllt wurde
2018-06-23 20:39:41 +02:00
const load _end _check _path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer' ;
2018-06-24 13:25:20 +02:00
// CSS Pfad, der die Position der Daumen beschreibt und dessen Objekt-Inhalt durch die Stempel ersetzt wird
2018-06-24 12:44:44 +02:00
const image _container _path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer ytd-toggle-button-renderer.style-scope.ytd-menu-renderer.force-icon-button a.yt-simple-endpoint.style-scope.ytd-toggle-button-renderer yt-icon-button#button.style-scope.ytd-toggle-button-renderer button#button.style-scope.yt-icon-button yt-icon.style-scope.ytd-toggle-button-renderer' ;
2018-06-23 20:39:41 +02:00
2018-06-24 13:25:20 +02:00
// CSS Pfad, der das Objekt, das die Daumen beinhaltet, beschriebt, um den Bereicht, in dem sich die Grafiken für die Objekte ausbreiten können, zu vergößern
2018-06-24 12:44:44 +02:00
const container _path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer ytd-toggle-button-renderer.style-scope.ytd-menu-renderer.force-icon-button a.yt-simple-endpoint.style-scope.ytd-toggle-button-renderer yt-icon-button#button.style-scope.ytd-toggle-button-renderer' ;
2018-06-23 20:39:41 +02:00
2018-06-29 11:03:07 +02:00
// Css Pfad, der beschreibt, von wo aus clicks zum ändern der Likes interprätiert werden sollen
const link _path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer ytd-toggle-button-renderer.style-scope.ytd-menu-renderer.force-icon-button a.yt-simple-endpoint.style-scope.ytd-toggle-button-renderer' ;
2018-06-24 13:25:20 +02:00
/ *
Hilfsfunktionen
* /
// Logfunktion zum debuggen
function log ( msg ) {
console . log ( "W!NW!: " + msg ) ;
}
2018-06-23 20:39:41 +02:00
2018-06-24 13:42:41 +02:00
function getURL ( path ) {
return chrome . runtime . getURL ( path ) || browser . runtime . getURL ( path ) ;
}
2018-06-29 12:16:09 +02:00
function onError ( error ) {
log ( ` Error: ${ error } ` ) ;
}
2018-06-24 13:25:20 +02:00
/ *
Grafikfunktionen
* /
// Passt die Breite des übergegebenen Objekts an
2018-06-24 12:44:44 +02:00
function resize _container ( container _object , width ) {
container _object . style . width = width ;
2018-06-23 20:39:41 +02:00
}
2018-06-24 13:25:20 +02:00
// Leer den Inhalt des übergebenen Objekts und befüllt ihn mit einer Grafik
2018-06-24 12:44:44 +02:00
function inject _image ( image _container _object , image _path ) {
2018-06-23 20:39:41 +02:00
var image = document . createElement ( 'img' ) ;
image . setAttribute ( 'src' , image _path ) ;
image . style . width = "100%" ;
2018-06-24 12:44:44 +02:00
image _container _object . innerHTML = "" ;
image _container _object . appendChild ( image ) ;
2018-06-23 20:39:41 +02:00
}
2018-06-24 13:25:20 +02:00
/ *
Hauptfunktion
* /
2018-06-23 20:39:41 +02:00
2018-06-24 13:25:20 +02:00
// Ersetzt die Daumen durch Stempel
2018-06-29 12:16:09 +02:00
function inject ( settings ) {
2018-06-24 12:44:44 +02:00
var container _object = document . querySelectorAll ( container _path ) ;
resize _container ( container _object [ 0 ] , "100px" ) ;
resize _container ( container _object [ 1 ] , "100px" ) ;
2018-06-24 13:25:20 +02:00
log ( "Stempelfläche vergrößert." ) ;
2018-06-24 12:44:44 +02:00
var image _container _object = document . querySelectorAll ( image _container _path ) ;
2018-06-24 13:25:20 +02:00
log ( "Packe Stempel aus..." ) ;
2018-06-29 11:03:07 +02:00
// wenn Like aktiv, zeige aktive Grafik an
2018-06-29 12:16:09 +02:00
if ( container _object [ 0 ] . classList . contains ( 'style-default-active' ) || settings . light ) {
2018-06-29 10:07:11 +02:00
inject _image ( image _container _object [ 0 ] , getURL ( "media/stempel-witzig.png" ) ) ;
}
else {
inject _image ( image _container _object [ 0 ] , getURL ( "media/stempel-witzig-disabled.png" ) ) ;
}
2018-06-24 13:25:20 +02:00
log ( "Witzig!" ) ;
2018-06-29 11:03:07 +02:00
// wenn Dislike aktiv, zeige aktive Grafik an
2018-06-29 12:16:09 +02:00
if ( container _object [ 1 ] . classList . contains ( 'style-default-active' ) || settings . light ) {
2018-06-29 10:07:11 +02:00
inject _image ( image _container _object [ 1 ] , getURL ( "media/stempel-nicht-witzig.png" ) ) ;
}
else {
inject _image ( image _container _object [ 1 ] , getURL ( "media/stempel-nicht-witzig-disabled.png" ) ) ;
}
2018-06-24 13:25:20 +02:00
log ( "Nicht Witzig!" ) ;
2018-06-23 20:39:41 +02:00
}
2018-06-29 11:03:07 +02:00
// Warte noch kurz vor dem einfügen
function inject _with _timeout ( ) {
2018-06-29 12:16:09 +02:00
setTimeout ( function ( ) { inject ( { light : false } ) } , 10 ) ;
2018-06-29 11:03:07 +02:00
}
2018-06-24 13:25:20 +02:00
/ *
Ladefunktion
* /
2018-06-23 20:39:41 +02:00
2018-06-29 11:03:07 +02:00
// regelmäßig prüfen, ob sich die URL geändert hat und entsprechend den Like Status aktualisieren
var current _url = '' ;
var last _loaded _url = '' ;
var link _object = '' ;
function inject _loop ( ) {
current _url = window . location . href ;
if ( current _url != last _loaded _url ) {
log ( "Neues" ) ;
2018-06-29 12:16:09 +02:00
setTimeout ( function ( ) { inject ( { light : false } ) } , 500 ) ;
2018-06-29 11:03:07 +02:00
last _loaded _url = current _url ;
}
setTimeout ( inject _loop , 500 ) ;
}
2018-06-24 13:25:20 +02:00
// Die YouTube Website läd die Inhalte durch ein externes JavaScript, wenn wir von vornherein unsere eigenen Inhalte einsetzen, werden diese später von YouTube wieder überschrieben. Wir schauen also, ob ein bestimmtes Objekt, dass durch JavaScript eingefügt wird, exstiert, dann erst bringen wir unsere eigenen Inhalte ein.
2018-06-23 20:39:41 +02:00
var loaded = false ;
2018-06-29 12:16:09 +02:00
function loading ( settings ) {
2018-06-23 20:39:41 +02:00
loaded = document . querySelector ( load _end _check _path ) ;
if ( loaded ) {
2018-06-24 13:25:20 +02:00
log ( "Stempelfläche gefunden." ) ;
2018-06-29 11:03:07 +02:00
2018-06-29 12:16:09 +02:00
if ( ! settings . light ) {
// initialisiere onclick events
link _object = document . querySelectorAll ( link _path ) ;
link _object [ 0 ] . onclick = inject _with _timeout ;
link _object [ 1 ] . onclick = inject _with _timeout ;
// starte Schleife, die nach aktualisierungen ausschau hält
inject _loop ( ) ;
}
else {
inject ( settings ) ;
}
2018-06-23 20:39:41 +02:00
}
2018-06-23 21:26:06 +02:00
else {
2018-06-29 12:16:09 +02:00
setTimeout ( function ( ) { loading ( settings ) } , 500 ) ;
2018-06-23 20:39:41 +02:00
}
}
2018-06-24 13:25:20 +02:00
// Starte das Add-on
log ( "Suche Stempelfläche..." ) ;
2018-06-29 12:16:09 +02:00
// lade Einstellungen
var getting = browser . storage . local . get ( "light" ) ;
getting . then ( loading , onError ) ;