Forum PHP.pl > [Chrome][Rozszerzenie] Skrypt z funkcjami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [Chrome][Rozszerzenie] Skrypt z funkcjami

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

404

4.02.2012, 03:20:21

Witam!

Kod

"content_scripts":
    [
        {
            "matches": ["*://moja-strona.pl/*"],
            "js": ["js/insertPanel.js"]
        }
  ],

Wstawiam sobie na stronę panel (głownie złożony z buttonów) poprzez skrypt insertPanel.js:

Kod

// insertPanel.js
//...
var panel = document.createElement("div");
panel.setAttribute("id", "idbleble");
panel.innerHTML = "<button type="button">xyz</button>...";
//...

Ok, to działa.

W tym panelu, np. po kliknięciu na button chcę, aby wykonała się jakaś funkcja (napisana przeze mnie). No i to działa tylko wtedy, kiedy umieszczę te funkcje w <head>:

Kod

var panelScripts = document.createElement("script");
panelScripts.setAttribute("type","text/javascript");
panelScripts.innerHTML = "function somethink() {...}";
document.getElementsByTagName("head")[0].appendChild(panelScripts);

Próbowałem tak:

Kod

"content_scripts":
    [
        {
            "matches": ["*://moja-strona.pl/*"],
            "js": ["js/insertPanel.js", "js/myFunctions.js"]
        }
  ],

...skrypt się ładuje (sprawdzam poprzez "narzędzia dla programistów"), ale po kliknięciu na button otrzymuję błąd:

Cytat

Uncaught ReferenceError: somethink is not defined

Mógłby mi ktoś wyjaśnić dlaczego przeglądarka "nie widzi" tych funkcji - pomimo tego, że skrypt jest załadowany? Bo ja chyba o czymś zapominam...

droslaw

6.02.2012, 23:19:24

Problem polega pewnie na tym, że odnosisz się do zmiennych/funkcji w złym kontekście(czyli windows). Pokazałeś bardzo mało kodu i nie mogę pokazać co konkretnie trzeba zrobić, ale dam przykład.

Kod

obj = {"x":"Hello world!", "f":function(){alert(this.x);}};
document.body.addEventListener('click',obj.f, false); // źle wyświetli undefined bo handler nie jest teraz w obiekcie obj tylko window.

Tak samo kiedy dasz:

Kod

obj = {"x":"Hello world!", "f":function(){alert(this.x);}};
f = obj.f;
f(); // źle wyświetli undefined bo funkcja nie jest teraz przypisana do obiektu obj tylko window.
x = 'jestem w window';
f(); // wyświetli 'jestem w window'.

Zanim użyjesz funkcji z innego kontekstu niż windows (jeśli odnosi się ona do jakichś danych przez this) do obsługi zdarzeń, musisz ją zbindować od obiektu w którym się znajduje. Wtedy this będzie się odnosiło so tego obiektu.

Kod

obj = {"x":"Hello world!", "f":function(){alert(this.x);}};
document.body.addEventListener('click',obj.f.bind(obj), false); //teraz dobrze.

Nie wszystkie przeglądarki mają metodę bind dla funkcji, np firefox 8 nie ma dlatego ja dodaję taki kod na początku:

Kod

if(!Function.prototype.bind)
    Function.prototype.bind = function(that)
{
    var func = this;
    return function()
    {
        return func.apply(that, arguments);
    };
};

MDC - bind
Jeśli to wydaje się zagmatwane możesz poszukać na googlach jakiś tutorial o metodach bind albo apply i call, dotyczą tej samej kwestii.
Możesz też używać bibliotek takich jak Jquery, one chyba robią co trzeba za programistę, ale nie jestem pewien bo ja z nich nie korzystam.

404

9.02.2012, 20:06:32

Dziękuję za odpowiedź, ale raczej nie w tym rzecz. To wygląda tak jakby przeglądarka nie widziała funkcji, które są w zdefiniowane w osobnym pliku.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.