frontendler
Goto Top

Addon Badge oder icon in Seite einfügen

Hi,

da ich derzeit Krank war und mir gedacht habe, wenn alle mit Chat Gpt arbeiten, versuche ich es auch mal.
Und siehe da, ich habe ein Funktionierendes Addon (eine Extension erstellt).
Sobald es aber komplexer wird, kommen ständig Fehler.
Habe es nun 12 Stunden probiert mit etlichen Addons und Versionen, aber so wie ich es haben möchte, funktioniert es leider nicht mit Chat Gpt.
Daher hoffe ich, das mir jemand hier helfen kann.
Das funktionierende:

manifest.json
{
  "manifest_version": 3,  
  "name": "Twitch Compressor",  
  "description": "Activates a compressor with specified values on Twitch.tv",  
  "version": "0.1",  
  "icons": {  
    "48": "icon.png"  
  },
  "permissions": ["activeTab"],  
  "content_scripts": [  
    {
      "matches": ["https://www.twitch.tv/*"],  
      "js": ["compressor.js"],  
      "run_at": "document_end"  
    }
  ]
}

compressor.js
(function () {
  window.addEventListener("load", function () {  
    let audioContext = new (window.AudioContext || window.webkitAudioContext)();
    let source = audioContext.createMediaElementSource(
      document.querySelector("video")  
    );
    let compressor = audioContext.createDynamicsCompressor();
 
    compressor.threshold.value = -60;
    compressor.knee.value = 40;
    compressor.ratio.value = 20;
    compressor.attack.value = 0;
    compressor.release.value = 1;
 
    source.connect(compressor);
    compressor.connect(audioContext.destination);
  });
})();

Was ich nun möchte:
Derzeit funktioniert der Compressor ja nur auf twitch.tv Chanels, was schonmal top ist..
Nun möchte ich aber nur kleine Dekorative Zusätze, heißt:

Wenn ich auf Twitch.tv oder einem twitch.tv/channel bin, soll das Extension Icon als "Badge" (das ist das kleine Kästchen wo zb bei ublock zahlen stehen) in Grün ein Häkchen zeigen (sodass ich weiß, ok geht).
Und wenn ich außerhalb von twitch.tv bin, wie zb. YouTube, soll er in Rot ein X zeigen.
Das wäre es auch schon.

Hier ist auch eine Seite die es ein wenig erklärt, nur irgendwie kriege ich dies nicht zusammen geschustert.
dev.to/paulasantamaria/chrome-extensions-adding-a-badge-644

ODER:

Falls das mit dem Badge wirklich zu schwer sein sollte, hätte ich noch eine Idee.
Das Twitch Icon soll oben Links mit meinem Icon ersetzt werden wenn die Extension aktiviert ist und funktioniert.
Falls das nicht möglich ist, reicht es auch, wenn mein icon rechts oben neben der Suchleiste erscheint.
Und wenn man auf anderen Seiten ist, ist natürlich kein Icon da und das Extension Icon wird Grau so wie man es kennt.
(Ich habe auch schon geschaut, nur das ist animiert und es hat Polygon points und co und damit kenne ich mich nicht aus.)
Vielleicht ist das ja einfacher, sodass man es mir vllt netterweise in meinen Code hinzufügen könnte?

Ich hoffe mir kann da jemand helfen?

Grüße

Content-Key: 5860720583

Url: https://administrator.de/contentid/5860720583

Printed on: May 2, 2024 at 22:05 o'clock

Member: FrontEndler
FrontEndler Feb 05, 2023 at 21:00:59 (UTC)
Goto Top
Ich bin weiter gekommen, versteckt ist nun das Twitch.tv Logo oben links, aber ich kriege es nicht ersetzt :S

(function() {
'use strict';  
 
    let style = document.createElement("style");  
    style.innerHTML = 'svg.ScSvg-sc-mx5axi-2 {visibility: hidden !important;}';  
    document.head.appendChild(style);
})();
Mitglied: 5175293307
Solution 5175293307 Feb 06, 2023 updated at 10:08:56 (UTC)
Goto Top
Autsch, chatGPT Programmierer, OMG what the fuck 😂😅😂. Den Müll sollte man hier sofort sperren! Ich sehe schwarz für die nächste Generation, zumindest was die Masse an kognitiven Zellen betrifft...

Wie wäre es vielleicht sich erst mal die HTML und JavaScript Grundlagen rein zu pfeifen, das wäre ja meine erste Tat wenn ich selbst mehr damit machen wollen würde, dann braucht man auch nicht immer stundenlang irgendwo suchen oder generieren, sondern man investiert einmalig Zeit in nachhaltiges Lernen und kann es hinterher einfach nur runter tippen ohne viel Zeit mit "suchen" zu verschwenden ... So hat man das zumindest früher in der Schule gelernt, heute scheint da irgendwie was falsch zu laufen.
https://wiki.selfhtml.org/
https://wiki.selfhtml.org/wiki/JavaScript
Hier nur mal n' Beispiel um das Twitch-Logo der Seite (ganz oben links) auszutauschen.
let logodiv = document.querySelector('div.tw-animated-glitch-logo');  
logodiv.innerHTML = '';  
let newlogo = document.createElement("img");  
newlogo.src = 'https://domain.tld/images/u/2022/11/20/4693369142_43066222500_256.jpg';  
newlogo.width = 32;
newlogo.height = 32;
logodiv.appendChild(newlogo);
W.
Member: FrontEndler
FrontEndler Feb 06, 2023 at 11:04:30 (UTC)
Goto Top
Zitat von @5175293307:

Autsch, chatGPT Programmierer, OMG what the fuck 😂😅😂. Den Müll sollte man hier sofort sperren! Ich sehe schwarz für die nächste Generation, zumindest was die Masse an kognitiven Zellen betrifft...

Wie wäre es vielleicht sich erst mal die HTML und JavaScript Grundlagen rein zu pfeifen, das wäre ja meine erste Tat wenn ich selbst mehr damit machen wollen würde, dann braucht man auch nicht immer stundenlang irgendwo suchen oder generieren, sondern man investiert einmalig Zeit in nachhaltiges Lernen und kann es hinterher einfach nur runter tippen ohne viel Zeit mit "suchen" zu verschwenden ... So hat man das zumindest früher in der Schule gelernt, heute scheint da irgendwie was falsch zu laufen.
https://wiki.selfhtml.org/
https://wiki.selfhtml.org/wiki/JavaScript
Hier nur mal n' Beispiel um das Twitch-Logo der Seite (ganz oben links) auszutauschen.
let logodiv = document.querySelector('div.tw-animated-glitch-logo');  
logodiv.innerHTML = '';  
let newlogo = document.createElement("img");  
newlogo.src = 'https://domain.tld/images/u/2022/11/20/4693369142_43066222500_256.jpg';  
newlogo.width = 32;
newlogo.height = 32;
logodiv.appendChild(newlogo);
W.

Hi, erstmal dankeschön für deine Mühe face-smile.
Ich wäre froh wenn ich genug Zeit hätte um Javascript zu lernen, allerdings ist dies mit einem 40std. Job schwierig, vor allem weil ich von 14:40 - 2 Uhr nachts weg bin, da bleibt mir nicht all zu viel zeit :S.
Auch nur deswegen habe ich auf diese Option zurück gegriffen.
Nun gut, nun zu deinem Code:
Hattest du den ausprobiert?
Weil er bei mir leider nicht funktioniert :S
Egal ob als Addon wenn ich es dort einfüge, oder als Tampermonkey Script :S.
Mitglied: 5175293307
5175293307 Feb 06, 2023 updated at 11:20:40 (UTC)
Goto Top
Zitat von @FrontEndler:
Nun gut, nun zu deinem Code:
Hattest du den ausprobiert?
Jepp, natürlich. Lerne was er tut, dann verstehst du's auch ...

Vorher

screenshot

Nachher

screenshot

I'm out.
Member: FrontEndler
FrontEndler Feb 06, 2023 at 12:00:07 (UTC)
Goto Top
Zitat von @5175293307:

Zitat von @FrontEndler:
Nun gut, nun zu deinem Code:
Hattest du den ausprobiert?
Jepp, natürlich. Lerne was er tut, dann verstehst du's auch ...

Vorher

screenshot

Nachher

screenshot

I'm out.

Was es tut wusste ich ja, nur ich habe nun auch den Fehler gefunden wodurch ich fragte ob es bei dir geht und zwar tut er es, aber nur in Vollbild.
Jedenfalls ist es bei mir so:
Sobald ich das Fenster verkleiner, verschwindet das Bild nämlich nach links und dann ist da nichts mehr.
Und irgendwie geht es bei mir auch nur in Tampermonkey und nicht im Addon.
Danke dir das mich schonmal einen schritt weiter gebracht hast face-smile