JavaScript & Pfadangaben

Mira_Belle

Ich habe in einem Skript das Problem, dass die Grafik einfach nicht angezeigt wird,
wenn ich Variablen benutzen möchte.

Folgendes habe ich alles schon ausprobiert:

JavaScript

//	let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons')); // Pfad zum Profilordner und gleich in den entsprechenden Unterordner
	
	let ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");  // Pfadangabe zum Profilordner

	let ButtonIcon = "DeepL_2.png"; // Name & Dateiendung des anzuzeigenden Symbols!

//	let iconPath = "file:///C:/Users/Andreas/AppData/Roaming/Mozilla/Firefox/Profiles/Andreas/chrome/icons/"; // Pfad zur Grafik
	let iconPath = "file:";

	menuitem.style.listStyleImage = 'url("' + iconPath + ProfilePath + ButtonIcon +'")';

//	menuitem.style.listStyleImage = 'url("' + ProfilePath + ButtonIcon + '")'; // Verwendung der Variable für den Pfad zur Grafik
//	menuitem.style.listStyleImage = 'url("' + ProfilePath + "/chrome/icons/" + ButtonIcon + '")';
//	menuitem.style.listStyleImage = 'url("' + ("file:" + ProfilePath + "/chrome/icons/" + ButtonIcon) +'")';

Alles anzeigen

Jemand eine Idee, wie es korrekt lauten müsste?

Sören Hentzschel

Hallo,

lass dir den Pfad doch mal in der Konsole ausgeben. In meinem Fall ergibt das:

file:/Users/sorenhentzschel/Library/Application Support/Firefox/Profiles/7th0bcyz.default-nightlyDeepL_2.png

Mir fallen ungetestet zwei Dinge auf:

1. Der Anfang müsste so aussehen: file:///.
2. Vor dem Dateinamen fehlt auch ein /.

Mira_Belle

Sören Hentzschel Sorry, aber ich stehe oder sitze auf'em Schlauch.

Wenn ich folgendes im Code verwende, bekomme ich die Grafik angezeigt.

JavaScript

let iconPath = "file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/Andreas/chrome/icons/";
let ButtonIcon = "DeepL_2.png";
menuitem.style.listStyleImage = 'url("' + iconPath + ButtonIcon + '")';

Ich möchte nun aber den Pfad ins Verzeichnis "berechnen".
Entweder sollte es so Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/") gehen,
wobei /chrome/icons/ noch irgendwie da rein gewurschtelt werden muss.

Oder einfach nur PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))

Jedoch funktioniert keines von beiden und das NUR in diesem einem Skript!

Beide Varianten habe ich in verschiedenen Skripten in der Anwendung,

jedoch nie mit menuitem.style.listStyleImage.

Ich hänge mal das ganze Skript an.

JavaScript

(function () {
    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
    let translate = function () {
        let browserMM = gBrowser.selectedBrowser.messageManager;
        browserMM.addMessageListener('getSelection', function listener(message) {
            let t = (message.data !== '');
            let e = (document.charset || document.characterSet);
            if (t) {
                openWebLinkIn('https://www.deepl.com/translator#en/de/' + encodeURIComponent(message.data), 'tab');
            } else {
                openWebLinkIn('https://www.deepl.com/translate?u=' + encodeURIComponent(gBrowser.currentURI.spec) + '&hl=de-DE&ie=' + e + '&sl=auto&tl=de-DE', 'tab');
            };
            browserMM.removeMessageListener('getSelection', listener, true);
        });
        browserMM.loadFrameScript('data:,sendAsyncMessage("getSelection", content.document.getSelection().toString())', true);
    }
    let menuitem = document.createXULElement('menuitem');
    menuitem.id = 'context-googletranslate';
    menuitem.setAttribute('label', '\u00dcbersetzen (DeepL)');
    //menuitem.setAttribute('tooltiptext', 'Mit DeepL \u00fcbersetzen');
    menuitem.setAttribute('oncommand', '(' + translate.toString() + ')()');
    menuitem.classList.add('menuitem-iconic');

  menuitem.style.listStyleImage = 'url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/Andreas/chrome/icons/DeepL_2.png")';
    let refItem = document.getElementById('context-inspect');
    refItem.parentNode.insertBefore(menuitem, refItem);
})();

Alles anzeigen

Sören Hentzschel

Bei welchem Punkt? file:/ durch file:/// zu ersetzen oder vor dem Dateinamen ein / einzufügen?

Mira_Belle

Sören Hentzschel So ganz generell!
Welche Konsole! Eingabeaufforderung, PowerShell?
Oder irgendwas in den Browserwerkzeugen?

Habe aber den obigen Beitrag ergänzt.

AH! Habs geschnackelt!

Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/")
Ergibt: "C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/Mira"

Ergebniss ist soweit richtig!

PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
Ergibt:
"file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/Mira/chrome/icons"

Auch dieses Ergebniss wäre soweit richtig!

Somit müssten doch beide Varianten normalerweise funktionieren!

Variante 1:

JavaScript

  let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
  let ButtonIcon = "DeepL_2.png";
  menuitem.style.listStyleImage = 'url("' + ProfilePath + ButtonIcon +'")';

Variante2:

JavaScript

let ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
let ButtonIcon = "DeepL_2.png";
menuitem.style.listStyleImage = 'url("' + ProfilePath + "/chrome/icons/" + ButtonIcon + '")';

Mitleser

Dies funzt bei mir (nur ein Beispiel), vieleicht bringt Dich das weiter.:

JavaScript

// JavaScript Document
// Test_gContextMenu.uc.js

(function() {
// ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

const buttonIcon = 'DeepL_2.png';  // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
const buttonPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet | Path to folder containing the icon
const label = 'Test_gContextMenu'
const tooltiptext = 'Site als Lesezeichen speichern/ändern';
const oncommand = "gContextMenu.bookmarkThisPage();";

// ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));


// -- Contextmenu -----------------------------------------------
const menuitem1 = document.createXULElement('menuitem');
      menuitem1.id = 'tabContextBookmarkpage';
      menuitem1.setAttribute('label', label);
      menuitem1.setAttribute('tooltiptext', tooltiptext);
      menuitem1.setAttribute('oncommand', oncommand);
      menuitem1.classList.add('menuitem-iconic');
      menuitem1.style = "list-style-image: url('" + curProfDir + buttonPath + buttonIcon + "');";

const refItem1 = document.getElementById('context-inspect');
   	  refItem1.parentNode.insertBefore(menuitem1, refItem1.nextSibling);
 
})();

Alles anzeigen

Mira_Belle

Ich fress 'en Besen.

Vielen lieben Dank Mitleser

JavaScript

    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
    let ButtonPath = '/chrome/icons/';
    let ButtonIcon = "DeepL_2.png";

    menuitem.style = "list-style-image: url('" + ProfilePath + ButtonPath + ButtonIcon + "');";

Das ist die Lösung!

Mitleser

Zitat von Mira_Belle

Ich fress 'en Besen.

Burger tuts auch 🍔️ ...

Mira_Belle

Habe noch etwas herumexperimentiert!
menuitem.style = 'list-style-image: url("' + ProfilePath + ButtonPath + ButtonIcon + '")';
Funktioniert.

Und menuitem.style.listStyleImage = 'url("' + ProfilePath + ButtonPath + ButtonIcon + '")';
funktioniert auch.

Und der ganze Ärger nur, weil für /chrome/icons/ auch noch eine Variable erstellt werden musste.
bzw. weil let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
so und nur in diesem Skript, warum auch immer, einfach nicht will.
Wenn mir DAS mal einer erklären könnte.

Sören Hentzschel

Zitat von Mira_Belle

Und der ganze Ärger nur, weil für /chrome/icons/ auch noch eine Variable erstellt werden musste.
bzw. weil let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
so und nur in diesem Skript, warum auch immer, einfach nicht will.
Wenn mir DAS mal einer erklären könnte.

Klar funktioniert das. Du hast nur, wie ich es schon zwei Mal schrieb, ein / vor dem Dateinamen vergessen. Nutze doch, wie empfohlen, die Konsole und teste dort die Pfade. Dann siehst du sofort den Unterschied:

JavaScript

var ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
var ButtonPath = '/chrome/icons/';
var ButtonIcon = "DeepL_2.png";
ProfilePath + ButtonPath + ButtonIcon

=> "file:///<profilordner>/chrome/icons/DeepL_2.png"

JavaScript

var ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
var ButtonIcon = "DeepL_2.png";
ProfilePath + ButtonIcon

=> "file:///<profilordner>/chrome/iconsDeepL_2.png"

Schau direkt vor dem DeepL_2.png. Ist ja auch logisch, wenn du dir beide Codes ansiehst. Im oberen Beispiel setzt du über die zweite Variable noch ein / zwischen Pfad und Dateiname, im unteren Beispiel nicht, da folgt der Dateiname direkt auf den PathUtils-Aufruf.

(Ich habe die let an der Stelle nur gegen var ausgetauscht, weil sich dann leichter damit in der Konsole experimentieren lässt. Einmal definiert, dürfte man es nicht nochmal neu mit gleichem Namen definieren. Im realen Script würde ich nur let oder const verwenden.)

Mitleser

Zitat von Mira_Belle

Und
menuitem.style.listStyleImage = 'url("' + ....... + '")';
funktioniert auch.

Werde ich mal übernehmen, ist ja irgendwie 'eleganter'...

Mira_Belle

Sören Hentzschel Das mit dem "vergessenem" / habe ich nun, nach etlichen "Zaunlatten" begriffen.

Nur warum es partout nicht mit

JavaScript

let ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
let ButtonIcon = "DeepL_2.png";
menuitem.style.listStyleImage = 'url("' + ProfilePath + "/chrome/icons/" + ButtonIcon + '")';

will, will mir nicht in den Kopf rein.
Denn in der Konsole ergibt

Code

var ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
var ButtonIcon = "DeepL_2.png";
ProfilePath + "/chrome/icons/" + ButtonIcon
"C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/Mira/chrome/icons/DeepL_2.png"

Und das wäre ja eigentlich richtig.

Mira_Belle

Liegt es daran, dass dieses file:/// fehlt?

Sören Hentzschel

Ja, das fehlt.

Mira_Belle

Nun habe ich es, so hoffe ich, kapiert.
Ich habe jetzt mehrere Möglichkeiten, den Pfad "berechnen" zu lassen.

Version 1

JavaScript

	let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)); // Pfad zum Profilordner
	let ButtonPath = "/chrome/icons/"; // Pfad in den entsprechenden Unterordner
	let ButtonIcon = "DeepL_2.png"; // Name & Dateiendung des anzuzeigenden Symbols!
	menuitem.style = 'list-style-image: url("' + ProfilePath + ButtonPath + ButtonIcon + '")';

Version 2

JavaScript

	menuitem.style.listStyleImage = 'url("' + ProfilePath + ButtonPath + ButtonIcon + '")';

Version 3

JavaScript

	let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'))
	let ButtonIcon = "DeepL_2.png";
	menuitem.style.listStyleImage = 'url("' + ProfilePath + "/" + ButtonIcon + '")';

Und die "schönste" wie ich finde,
Version 4

JavaScript

	let ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
	let ButtonIcon = "DeepL_2.png";
	menuitem.style.listStyleImage = 'url("' + ("file:" + ProfilePath + "/chrome/icons/" + ButtonIcon) + '")';

Alle Möglichkeiten habe ich für zukünftige "Projekte" ausgeklammert und kommentiert,
mal in dem Skript stehen lassen, weil ich mich kenne und mir sicher bin,
dass ich das alles wieder vergessen werde.

Hoffentlich erinnere ich mir dann aber an diese "Vorlagen".

Und, Danke. Sören Hentzschel & Mitleser

JavaScript & Pfadangaben

Ähnliche Themen

Button ändern bei einem Skript