Skocz do zawartości
Tartar

Wtyczka do Firefoxa jako przycisk i/lub menu kontekstowe

Rekomendowane odpowiedzi

Hello.

 

Piszę sobie wtyczkę do FF (moja pierwsza w życiu) i o ile w ciągu 4 dni (średnio po 5h) sobie poradziłem ze "szkieletem" tej wtyczki to niestety uruchamianie jej jest nieco utrudnione. Wtyczka jest tylko na potrzeby mojej firmy by ułatwić zadanie z kopiowaniem danych.

Celem wtyczki jest pobranie danych ze strony, obrobienie ich w odpowiedni format wyjściowy i wrzucenie do schowka skąd dane są wklejane gdzie indziej (ręczna obróbka jest praco- i czasochłonna).

Pracę nad wtyczką zacząłem od przykładu z github - mdn copy-selection-to -clipboard. Przykład ten rozwijałem, aż uzyskałem dane ze schowka takie jakie chciałem.

Zawartość manifest.json poniżej:

{ "manifest_version": 2, 
"name": "Schowek", 
"description": "Schowek mój", 
"version": "1.0", 
"icons": { "48": "icons/clipboard-48.png" }, 
"content_scripts": [{ "matches": [""], 
"js": ["content-script.js"] }], 
"permissions": [ "clipboardWrite" ] }

Zawartość content-script.js poniżej:

const pageUrl = new URL(window.location.href);
console.log("strona: "+pageUrl.hostname); 

function OEasPROFI() 
{ 
	switch(pageUrl.hostname) 
	{ 
	case "stackoverflow.com":
console.log(pageUrl.hostname); 
	break; 
	case "strona www": 
	var klas = document.querySelector("#numery-oe-right-sidebar-towary"); //dzieki temu mamy listę nr OE z danego towaru 
	var str = klas.innerText.toString(); //wrzucamy to jako string 
	var str_wyjsciowy = ""; 
	/* obróbka pobranych danych ze strony i wrzucenie ich do stringu - zmienna str_wyjsciowy */ 
	copyTextToClipboard(str_wyjsciowy); 
	break; 
	} 
} 
//z neta 
function fallbackCopyTextToClipboard(text) 
{ 
	var textArea = document.createElement("textarea"); 
	textArea.value = text; 
	textArea.style.position="fixed"; //avoid scrolling to bottom 
	document.body.appendChild(textArea); 
	textArea.focus(); textArea.select(); 
	try 
{ 
	var successful = document.execCommand('copy'); 
	var msg = successful ? 'udane' : 'nieudane'; console.log('Zapasowe: Kopiowanie tekstu było ' + msg); 
} 
catch (err) 
{ 
	console.error('Zapasowe: Oops, nie mogę skopiować', err); 
}
document.body.removeChild(textArea); 
} 
//z neta 
function copyTextToClipboard(text) 
{ 
	if (!navigator.clipboard) 
{ 
	fallbackCopyTextToClipboard(text); 
	return; 
} 
navigator.clipboard.writeText(text).then(function() 
{ 
	console.log('Async: Kopiowanie do schowka było udane!'); 
}, function(err) 
{ 
	console.error('Async: Nie można skopiować tekstu: ', err); 
}
); 
} 

document.addEventListener("mouseup", OEasPROFI); //tymczasowo, żeby sprawdzić kopiowanie

 

Nad samym skopiowaniem zmiennej do schowka siedziałem 2 dni bo za każdym razem 'rejected' albo 'pending', aż w końcu na jednej stronce wyczytałem o tym by w manifest dodać permissions a z innej wziąłem te 2 funkcje.

 

W tej postaci ładnie działa ale wywołanie jest niepraktyczne - nie można skopiować innych danych ze strony bo są zastępowane tymi z funkcji.

 

Bazując na przykładach z github'a i sieci chciałem zrobić tak by wtyczka była uruchamiana za pomocą przycisku koło paska adresu (zacząłem od przykładu otwarcia nowej strony w nowej karcie).

Sam przykład mi działa ale jak przerzuciłem funkcje z moje wtyczki do tamtej (oczywiście bez ostatniej linijki kodu) to wtyczka "umiera" - ikonka jest ale kliknięcie na nią nic nie robi nawet w konsoli nie zapisuje mi się adres strony na której jestem.

Mówię dobra - coś źle zrobiłem (oczywiście nie wiem co), trzeba spróbować z menu kontekstowym.

Przykład z github'a - i przykład działa do czasu dodania moich funkcji (i podmiany wywołania na moją) - potem brak jest w menu (no i nie umiem też tak zrobić by było w menu cały czas a nie tylko jak zaznaczę fragment tekstu.

 

Tu mam ogromną prośbę by ktoś napisał mi (z komentarzem tłumaczącym co i po co) jak ma wyglądać plik manifest i skrypt z wywołaniem mojej funkcji - albo co powinienem sprawdzić i gdzie.

Siedzę nad tym już 2 dni i nie wiem czemu nadal nie działa (dodaję tylko moje funkcje do pliku i zmieniam wywołanie na moją funkcję - niby proste).

 

Od razu uprzedzam, że w pisaniu wtyczek jestem zielony (z JS też miałem troszkę przebojów żeby ją choć trochę załapać) - liczyłem na to, że napisanie funkcji obrabiających dane będzie najtrudniejsze a reszta to tylko wklejenie do kodu z przykładu.

 

Pozdrawiam

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jako, że też nie mam zielonego pojęcia o pluginach w FF to sugeruję przeklejać kod do przykładu (podmień tylko ciało funkcji a resztę zostaw) i/lub użyć debuggera: https://stackoverflow.com/questions/17547364/how-to-debug-a-firefox-extension-with-chromebug/17579253#17579253, z tego co szybko zerknąłem musisz użyć remote debuggera, w VS code można sobie wygenerować częściowo konfigurację do debuggowania i się podpiąć pod odpowiedni port, musisz doczytać, później jak bd miał czas to zobaczę coś więcej.

Edytowane przez Matt91111

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Spróbuj tu przekleić logikę: https://drive.google.com/open?id=1IUSWdatu2rugbFlrU8-jYG74mJu9nzgK, u mnie działa + masz okienko z informacją o powodzeniu lub błędzie.

 

U mnie console.log(...) / .error(...) wgl nic nie wypisywało, i nie mogłem zmusić twojego kodu do działania.

 

Hipoteza 1:

Brak odpowiednich uprawnień / źle określony "content_scripts": "matches": [""] , w przykładzie jaki znalazłem wygląda to tak:

     "matches": [
       "<all_urls>"
     ]

 

Hipoteza 2:

U mnie wyrzucało: "pageUrl" not defined. Jeżeli u ciebie w przykładzie to działało to pojęcia nie mam jakim sposobem, możliwe że na innej wersji FF jesteśmy, testowałem na 72.0.1

 

Hipoteza 3:

Twój przykład wygląda na stary albo co gorsze przestarzały, w przykładzie jaki ja znalazłem akcje menu kontekstowego są dodawane w background.js po uprzedniej deklaracji w manifest.json, rzuć okiem. Ponownie możliwe różnice w wersjach

 

Ja tu widzę dwa rozwiązania przepisujesz logikę do tego co Ci podesłałem albo próbujesz coś podziałać z manifestem, w szczególności z uprawnieniami, u mnie twój kod po prostu nie zadziałał. Testowałem poprzez "tymczasowe dodatki" (about:debugging#/runtime/this-firefox)

Edytowane przez Matt91111

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Matt91111 dzięki za odzew - w poniedziałek jak będę w robocie to sprawdzę i zainstaluję VS Code + przekleję logikę do Twojego przykładu.

Dodatki też testuję przez about:debugging (bo szybciej).

Co do wersji FF to w numerze ma 2 a w tym tygodniu się aktualizacja instalowała więc podejrzewam, że to ta sama co u Ciebie.

 

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Matt91111 dzięki za przykład. Zmodyfikowałem go pod siebie i działa tak jak chciałem.

Jakby tylko jeszcze ktoś mi to łopatologicznie wyjaśnił co i jak jest w tych plikach to by było super (a jest całkiem inaczej niż w przykładach z github'a).

Jeszcze raz dzięki za pomoc.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się

  • Ostatnio przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników przeglądających tę stronę.

×
×
  • Dodaj nową pozycję...