/ / Rozszerzenia Firefox: dodanie funkcjonalności do istniejących chrome elementów XUL - javascript, javascript-events, firefox-addon, xul

Rozszerzenia Firefoksa: dodawanie funkcjonalności do istniejących chromowanych elementów XUL - javascript, javascript-events, firefox-addon, xul

Na kopniaki i chichoty, próbuję napisać rozszerzenie do Firefoksa. Po prostu naprawdę proste. Przeszedłem przez samouczki, które znalazłem, i mam podstawową aplikację "Hello, World" działającą.

To, co chciałbym zrobić, to dodać detektor zdarzeń do istniejącego elementu w przeglądarka internetowa DOM aplikacji Firefox (tj. zakładki).Do tej pory wszystkie zasoby, które udało mi się znaleźć, pokazują, jak dodać nowy element do aplikacji, a następnie dodać do niego akcję za pomocą javascript. Wypróbowałem kilka sposobów na dodanie funkcji javascript (które znam działa, ponieważ pomyślnie dodałem elementy z funkcją) do istniejących elementów.

Moja ostatnia próba tego ma następującą strukturę:

<?xml version="1.0"?>
<!-- in myExtension.xul -->

<overlay  id="myExtension"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript">
var tabs = document.getElementsByTagName("tabbrowser-tab")
var len = tabs.length;
for (var i = 0; i < len; i++) {
tabs[i].ondblclick = function() {
alert("bam!");
}
};
</script>

</overlay>

Żadna z tych rzeczy nie działa.Tak jak powiedziałem, jestem całkowicie nowy w tym temacie i właśnie trochę zainspirowałem się do weekendowego projektu. Może jest jakiś sposób na upewnienie się, że mam dostęp do dokumentu chrome, a nie do dokumentu strony? Chociaż gdy próbuję uzyskać elementy strony (np. "p") za pomocą tej techniki, to też nie działa, więc prawdopodobnie jest to ślepy zaułek.

[edytować] Aby spróbować wyjaśnić pewne zamieszanie:

Co mam na myśli przez „the przeglądarka internetowa DOM” to elementy wchodzące w skład interfejsu chrome, nie elementy strony internetowej.Mówię o umieszczeniu detektora zdarzeń konkretnie na elemencie, który już istnieje jako część interfejsu użytkownika aplikacji Firefox, takim jak karta (nie zawartość karty, ale sama karta) lub powiedzmy przycisk Home. chcesz przedefiniować zachowanie części GUI aplikacji Firefox.

Powiedz na przykład, że chcę dodać alertza każdym razem, gdy ktoś kliknął przycisk „Nowa karta” lub przycisk „Zamknij kartę”. Lub gdybym chciał przedefiniować przycisk „Przeładuj”, aby przekierowywał do katalogu głównego domeny bieżącej karty, zamiast po prostu ponownie ładować stronę. To są wszystkie istniejące części Firefoksa i chcę je przedefiniować/nadpisać za pomocą rozszerzenia, w szczególności dodając do nich akcję javascript.

[/edytować]

[sidenote]Czy osadzony javascript jest dozwolony w xul? A może musi znajdować się w osobnym pliku?[/sidenote]

Czy ktoś ma jakieś rady na ten temat? Dziękuję.

Odpowiedzi:

4 dla odpowiedzi № 1

Kod javascript w kodzie nakładki nie działa, ponieważ jest uruchamiany wcześniej niż gbrowser zawiera jakiekolwiek karty.

W rozszerzeniach Firefox (lub Thunderbird) zwykle uruchamiasz swoje rozszerzenie w detektorze zdarzeń ładowania:

window.addEventListener("load",
pinfresh.init,
false);

Funkcja init musi następnie zarejestrować detektory zdarzeń dla różnych zdarzeń na karcie:

  pub.init = function() {
var container = gBrowser.tabContainer;

container.addEventListener("TabOpen", tabOpened, false);
container.addEventListener("TabClose", tabRemoved, false);
};

Po otwarciu nowej karty rejestrujemy innego słuchacza, który wywoła przeładowanie karty, gdy użytkownik dwukrotnie kliknie na kartę:

  tabOpened = function(e) {
var tab = e.target;
tab.addEventListener("dblclick", tabDoubleClicked, false);
}

tabDoubleClicked = function(e) {
gBrowser.reloadTab(e.target);
}

Pełny kod wygląda następująco:

<overlay  id="pinfresh"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript">
pinfresh = function() {
var pub = {};

tabOpened = function(e) {
var tab = e.target;
tab.addEventListener("dblclick", tabDoubleClicked, false);
}

tabRemoved = function(e) {
var tab = e.target;

tab.removeEventListener("dblclick", tabDoubleClicked, false);
}

tabDoubleClicked = function(e) {
gBrowser.reloadTab(e.target);
}

pub.init = function() {
var container = gBrowser.tabContainer;

container.addEventListener("TabOpen", tabOpened, false);
container.addEventListener("TabClose", tabRemoved, false);
};

return pub;
}();

window.addEventListener("load",
pinfresh.init,
false);

</script>
</overlay>

Aby fragmenty kodu działały z kartami, polecam Przeglądarka kart w Centrum Rozwoju Mozilli.

Zalecam umieszczenie kodu Javascript w jegowłasny plik zamiast dołączać go do pliku XUL. Błędy w zewnętrznych plikach JavaScript pojawiają się w konsoli błędów Firefoksa, co znacznie ułatwia debugowanie.


3 dla odpowiedzi № 2

Aby uzyskać element strony aktualnie przeglądanej karty, najpierw musisz pobrać sam dokument za pomocą gBrowser.selectedBrowser.contentDocument

Więc w zasadzie, gdybyś miał <p id="test">blah</p> element i chcesz nim manipulować, możesz to zrobić var p = gBrowser.selectedBrowser.contentDocument.getElementById("test"); a potem rób z nim, co chcesz.

Odnośnie „dodawania detektora zdarzeń doistniejący element w DOM przeglądarki (tj. zakładki)", przepraszam, ale nie rozumiem, czego chcesz, czy chcesz manipulować GUI przeglądarki (tj. dodać przycisk do paska nawigacyjnego) czy chcesz manipulować zawartością DOM zakładki (czyli przeglądanej strony)?(w zasadzie "przeglądarka" może oznaczać wiele rzeczy :)).