Dodawanie ikony do menu "prawoklikowego"

[qicon]

witam,

czy jest jakaś magiczna sztuczka, która pozwoliłaby dodać małą ikonkę "google" do menu wyświetlanego po zaznaczeniu np. jakiegoś wyrazu na stronie www, a ściślej do opcji "Szukaj w Google <zaznaczona fraza>"

przykład:
http://prntscr.com/g2gn60

chodzi o to, żeby się ta opcja trochę wyróżniała pośród innych "bezikonowych" i tym samym była łatwiejsza do odnalezienia

[Mirek]

Nie znam takiego dodatku, ale np. mi wystarcza, że przy korzystaniu z dodatku Context Search przy odpowiedniej pozycji pojawia się strzałeczka do rozwinięcia listy - i wizualnie pamiętam, że jest to zawsze pierwsza od góry pozycja z taką strzałeczką (trójkącikiem), a dalej na liście już są ikonki. Żeby nie było trzeba każdorazowo rozwijać tego menu, gdy chce się użyć aktualnie wybranej wyszukiwarki, to warto na stronie about:config zmienić jeszcze ustawienie extensions.contextsearch.clickMenuToSearch na true - i wtedy można kliknąć pozycję w menu, bez potrzeby rozwijania listy/podmenu.
Podobne, ale bez żadnej potrzeby rozwijania i od razu z ikonkami jest też rozwiązanie zastosowane w tym dodatku: https://addons.mozilla.org/en-US/firefo ... extsearch/ - o ile tylko ktoś nie przesadzi z liczbą wyszukiwarek.

Ciekawe tylko, czy którykolwiek z tych dodatków będzie dostosowany do nowszych wersji Firefoksa - choć akurat w ich przypadku nie powinno to stanowić dużych problemów...

[qicon]

Dzieki, Mirek

ten drugi dodatek jest dosyć ciekawy (czytelny i szybki tzn. bez konieczności rozwijania). Jedyny jego minus to to, że trzeba wycelować w dość nieduże pole przycisku danej wyszukiwarki (w cały pasek łatwiej jest nacelować). Jednak dodatek sam w sobie wydaje się być dopracowany i "lekki".


Szperając w międzyczasie w Dodatkach do FF i natrafiłem na "kombajn" od Oleksandr: Menu Wizard 5.08 https://addons.mozilla.org/pl/firefox/a ... nu-wizard/
Jedną z funkcji jest zmiana ikonek w menu kontekstowym (bo chyba tak się to nazywa). Pod tym linkiem jest tutorial jak robić to na przykładzie ikonki Firefoxa http://forums.mozillazine.org/viewtopic.php?t=2988755
Wychodzi to całkiem fajnie http://prntscr.com/g2i8mz oczywiście wolałbym zamiast ikony FF mieć tam skrócone logo Google (w formie kolorowej litery G -> https://upload.wikimedia.org/wikipedia/ ... go.svg.png

Niestety, za cienki jestem w te klocki aby pojąć o co chodzi w pkt.4 tutoriala:

4. You can also convert the image and use local data, for example by:
http://www.askapache.com/online-tools/b ... converter/
That will have the following code:

[qicon]

dopisano:
Gdyby ktoś był zainteresowany zmianą lub dodawaniem ikon do menu kontekstowego to oznajmiam, że właśnie udało mi się dojść do tego, jak dodawać i zmieniac ikony w menu kontekstowym za pomocą dodatku Menu Wizard 5.08

W punkcie 3 tego tutoriala: http://forums.mozillazine.org/viewtopic.php?t=2988755 wpisujemy url odnoszący się do dowolnego obrazka, który będzie pełnił rolę ikonki w menu kontekstowym, np:

dle ikony FF: list-style-image: url('https://addons.cdn.mozilla.net/static/img/app-icons/med/firefox.png') !important;

dla ikonky Google "G": list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/600px-Google_%22G%22_Logo.svg.png') !important;

[Mirek]

A w pkt. 4., chodzi o to, żeby nie pobierać przez Internet przy każdym starcie przeglądarki tego obrazka/ikony - bo można mieć go zapisanego lokalnie, w ustawieniach dodatku. Wtedy, nawet jak adres obrazka zmieni się, przestanie działać, nie będzie połączenia Internetowego - to i tak ikonka nadal będzie wyświetlana.
W tym celu trzeba odpowiednio zakodować obrazek - do czego służy konwerter podlinkowany w punkcie 4.
Nie ma też sensu korzystać z obrazka 600 x 600 pikseli - więc poniżej masz przerobioną już odpowiednio mniejszą wersję (mniejsza = szybsza):

Kod: Zaznacz cały

list-style-image: url('data:image/png;base64,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') !important;

[qicon]

Dzięki wielkie, Mirek!

Moja wiedza w tym zakresie jest równa nieco powyżej zera. Domyślałem się tylko, że skoro obrazek jest ładowany z URL to wystarczy, że ktoś go usunie albo nie daj Boże podmieni na jakąś obscenę :lol: i będzie po ptokach jak to mówią Mazurzy. Teraz już rozumiem po co ta procedura kodowania.

Spróbowałem właśnie na ikonce do Google Similiar Images i po 3 próbie wyszło całkiem nieźle http://prntscr.com/g3br2y
Jedyne co trzeba zmienić w kodzie CSS jaki otrzymamy po kodowaniu to dwie "frazy":

1. na początku zamiast: "#id { background-image: " należy wkleić: " list-style-image: "
2. na końcu: od ostatniego nawiasu do końca zamiast: " ; }" należy wkleić " !important;"

[Mirek]

Nie ma za co A skoro domyślałeś się, że w przypadku ładowania obrazka z URL-a ktoś może go np. podmienić i będzie obscenicznie (i) "po ptokach", do tego w miarę rozgryzłeś CSS-a - więc wiedzę masz już zdecydowanie powyżej zerowej