MozillaPL.org - polskie centrum Mozilli

Główne menu:

Kilka pytań

Projektowanie aplikacji i rozszerzeń opartych na technologiach Mozilla Foundation: XUL, JavaScript, XPCOM, XBL i innych

Moderator: Pomocy?!

Kilka pytań

Postautor: homoklikus » 10 sierpnia 2015, 00:02

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0

1) Jak się podpiąć rozszerzeniem pod konkretną stronę www?
2) Jak podpiąć jquery i css do rozszerzenia?

Chcę przenieść parę moich skryptów z GM i stylish do pełnoprawnego rozszerzenia, sęk w tym, że nie znalazłem odpowiedzi na powyższe pytania. Na stronie https://developer.mozilla.org panuje jakiś konkretny chaos, gdzie co drugi link to błąd 404 ;-) Z tydzień czasu wertowałem dokumentację i mało co nie wyskoczyłem przez okno na trzecim pietrze :-)

Proszę o pomoc, jakieś wskazówki.
homoklikus
 
Posty: 9
Z nami od: 15 sierpnia 2014, 08:50

Odp: Kilka pytań

Postautor: dexter » 10 sierpnia 2015, 10:19

Przeglądarka: Mozilla/5.0 (Windows NT 5.1; rv:42.0) Gecko/20100101 Firefox/42.0

Pod konkretną stronę podepniesz się za pomocą pageMod.

Tu masz specyfikację: https://developer.mozilla.org/en-US/Add ... s/page-mod

A tu przykłady użycia, uwzględniające również podpięcie jquery i css: https://developer.mozilla.org/en-US/Add ... sed_on_URL
dexter
Moderator
 
Posty: 8319
Z nami od: 02 października 2004, 21:30

Odp: Kilka pytań

Postautor: homoklikus » 10 sierpnia 2015, 11:32

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0

Dzięki ;-)

Jeszcze jedno pytanie. Da radę zrobić tak, żeby najpierw wczytywało się rozszerzenie a dopiero modyfikowana strona? Tak żeby uniknąć efektu, nazwijmy to, migotania.
homoklikus
 
Posty: 9
Z nami od: 15 sierpnia 2014, 08:50

Odp: Kilka pytań

Postautor: dexter » 10 sierpnia 2015, 11:50

Przeglądarka: Mozilla/5.0 (Windows NT 5.1; rv:42.0) Gecko/20100101 Firefox/42.0

Do tego służy opcja contentScriptWhen. Masz tam w specyfikacji. Domyślnie jest ustawiona na "end", jeżeli więc jej nie użyłeś, możesz mieć ten efekt opóźnionego przekształcenia.

Najbezpieczniej jest użyć "ready". Jeśli koniecznie chcesz załadować, gdy tylko element znajdzie się w drzewie, możesz też użyć "start".
dexter
Moderator
 
Posty: 8319
Z nami od: 02 października 2004, 21:30

Odp: Kilka pytań

Postautor: homoklikus » 10 sierpnia 2015, 13:20

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0

Czyli będzie to wyglądało np. tak?

Kod: Zaznacz cały
pageMod.PageMod({
  include: ['domena.pl/*'],
  contentStyleFile: data.url("style.css"),
  contentScriptWhen: 'start',
  contentScriptFile: [data.url("jquery-1.7.min.js"),
                          data.url("my-script.js")]
});


Ok, skrypt załaduje się w locie, a jak zachowa się arkusz css?
homoklikus
 
Posty: 9
Z nami od: 15 sierpnia 2014, 08:50

Odp: Kilka pytań

Postautor: dexter » 10 sierpnia 2015, 14:25

Przeglądarka: Mozilla/5.0 (Windows NT 5.1; rv:42.0) Gecko/20100101 Firefox/42.0

homoklikus pisze:Czyli będzie to wyglądało np. tak?


No jakoś tak.
include: ["*.domena.pl"],

homoklikus pisze:Ok, skrypt załaduje się w locie, a jak zachowa się arkusz css?


Cholera wie :). Pewnie też w locie.
dexter
Moderator
 
Posty: 8319
Z nami od: 02 października 2004, 21:30

Odp: Kilka pytań

Postautor: homoklikus » 11 sierpnia 2015, 08:58

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0

Udało się, należy Ci się kolego wielki browar :-) Aczkolwiek ogarnąłem to wszystko, dopiero po odkryciu SDK, w życiu nie sądziłem, że konsola windows tak ułatwi mi życie ;-)
Kod: Zaznacz cały
 contentScriptWhen: 'start'

Powyższa funkcja nie działa tak jak oczekiwałem, jak się przeglądarka przytnie, np. przy otwarciu większej liczby kart, to widać moment przejścia, co ciekawe css wczytuje się "niezauważalnie" ;-)

Tematu, proszę nie zamykać, bo jeszcze tu wrócę. Jeszcze raz dziękuję :-)
homoklikus
 
Posty: 9
Z nami od: 15 sierpnia 2014, 08:50

Odp: Kilka pytań

Postautor: homoklikus » 11 sierpnia 2015, 10:45

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0

Wiedziałem, że pojawią się jakieś schody. Generalnie wszystko działa, ale konsola windows i debugger coś tam mi krzyczą w niezrozumiałym mi języku, debugger czepia się jquery i pliku moje.js, a w konsoli mam coś takiego:

http://iv.pl/images/46248661835735341069.png

Konsola przeglądarki nie zwraca żadnych błędów.
homoklikus
 
Posty: 9
Z nami od: 15 sierpnia 2014, 08:50

Odp: Kilka pytań

Postautor: dexter » 13 sierpnia 2015, 09:59

Przeglądarka: Mozilla/5.0 (Windows NT 6.0; rv:42.0) Gecko/20100101 Firefox/42.0

Wrzuć źródła na github.com. Może później spojrzę.
dexter
Moderator
 
Posty: 8319
Z nami od: 02 października 2004, 21:30

Odp: Kilka pytań

Postautor: homoklikus » 13 sierpnia 2015, 11:03

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0

Lepiej będzie jak Ci wrzucę całą paczkę do mnie na serwer, pobierzesz sobie i sprawdzisz. Tymczasem mam kolejne pytanie, bo mnie znowu szlak trafia. Nie umiem podać ścieżki do grafik z dysku. Tzn jak podam ścieżkę w pliku css, to działa bez problemu, a jak w pliku js to nie działa.

css:
Kod: Zaznacz cały
    background: url("./grafika/R1K.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);


js:
Kod: Zaznacz cały
$('img[src="inc/universe4k/img/U1K.jpg"]').attr('src','chrome://u4k/grafika/flota/szakal.gif');
$('img[src="inc/universe4k/img/U1K.jpg"]').attr('src','chrome://./grafika/flota/szakal.gif');
$('img[src="inc/universe4k/img/U1K.jpg"]').attr('src','chrome://grafika/flota/szakal.gif');


We wszystkich trzech wariantach nie działa. Bez "chrome" też próbowałem.

Edyta:
http://u4k.web-24.pl/download/u4k-1.0.0.zip

Modyfikowana strona:
http://s1.universe4k.com
Ostatnio zmieniony 13 sierpnia 2015, 12:09 przez homoklikus, łącznie zmieniany 1 raz
homoklikus
 
Posty: 9
Z nami od: 15 sierpnia 2014, 08:50

Odp: Kilka pytań

Postautor: dexter » 13 sierpnia 2015, 11:38

Przeglądarka: Mozilla/5.0 (Windows NT 6.0; rv:42.0) Gecko/20100101 Firefox/42.0

Nie znam za bardzo jquery. Ale spojrzę, jak będzie chłodniej.
dexter
Moderator
 
Posty: 8319
Z nami od: 02 października 2004, 21:30

Odp: Kilka pytań

Postautor: homoklikus » 13 sierpnia 2015, 12:24

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0

Kod: Zaznacz cały
$('img[src="inc/universe4k/img/U1K.jpg"]').attr('src','chrome://u4k/grafika/flota/szakal.gif');


Kod: Zaznacz cały
$('img[src="inc/universe4k/img/U1K.jpg"]').


Odwołanie do oryginalnego obrazka.

Kod: Zaznacz cały
attr('src','chrome://u4k/grafika/flota/szakal.gif');


Mój obrazek.

Całość podmienia oryginalny obrazek na mój. Jak wpiszę ścieżkę do grafiki na serwerze to działa, z dysku już nie.
homoklikus
 
Posty: 9
Z nami od: 15 sierpnia 2014, 08:50

Odp: Kilka pytań

Postautor: homoklikus » 14 sierpnia 2015, 12:47

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0

Problem z linkowaniem rozwiązany. Zabrakło mi w paczce pliku chrome.manifest ;-) Dla potomnych, w pliku powinno się znaleźć np:
Kod: Zaznacz cały
content     u4k    chrome/content/
content    u4k    chrome/content/ contentaccessible=yes


Gdzie u4k to nazwa pakietu "chrome". Może być inna niż nazwa rozszerzenia.
Pierwsza linijka umożliwi nam, wyświetlenie np. grafiki podając do niej ścieżkę bezpośrednio w przeglądarce, np:
Kod: Zaznacz cały
chrome://u4k/content/grafika/body-u4k.jpg


Druga linijka umożliwia używanie takich linków w plikach css, js. Innych rozszerzeń nie sprawdzałem.
Przykład przy użyciu biblioteki jquery:
Kod: Zaznacz cały
$('img[src="inc/universe4k/img/U1K.jpg"]').attr('src','chrome://u4k/content/grafika/flota/szakal.gif');

Czyli zmodyfikowany kawałek kodu, który wcześniej mi nie działał ;-)
homoklikus
 
Posty: 9
Z nami od: 15 sierpnia 2014, 08:50


Wróć do Programowanie z użyciem technologii Mozilli

Kto jest online

Zarejestrowani użytkownicy: Google [Bot]

Przejdź do powiązanej strony

Nawigacja:

Stopka: