Przyczyna:
Skrypty zawartości są wykonywane w środowisku "isolated world".

Rozwiązanie::
Aby uzyskać dostęp do funkcji / zmiennych kontekstu strony ("main world"), musisz wprowadzić kod do samej strony za pomocą DOM. To samo, jeśli chcesz wyeksponować swoje funkcje / zmienne w kontekście strony(w Twoim przypadku jest to metoda state()).

• Uwaga w przypadku komunikacji z skrypt strony jest potrzebny:
  Użyj dom CustomEvent handler. Przykłady: one, dwa i trzy .

• Uwaga w przypadku, gdy chrome API jest potrzebne w skrypcie strony:
  Ponieważ interfejsy API chrome.* nie mogą być używane w skrypcie strony, musisz użyć ich w skrypcie zawartości i wysłać wyniki do skryptu strony za pomocą wiadomości DOM (patrz uwaga powyżej).

Ostrzeżenie o bezpieczeństwie :
Strona może redefiniować lub powiększać / hook a wbudowany prototyp, więc Twój kod może się nie udać, jeśli strona zrobiła to w niezgodny sposób. Jeśli chcesz mieć pewność, że ujawniony kod działa w bezpiecznym środowisku, powinieneś albo zadeklarować swój skrypt zawartości za pomocą "run_at": "document_start" i użyć metod 2-3, a nie 1, albo B) wyodrębnić oryginalną natywną wbudowaną zawartość za pomocą pustego iframe, przykład. Zauważ, że w przypadku document_start może być konieczne użycie zdarzenia DOMContentLoaded wewnątrz odsłoniętego kodu, aby czekać na DOM.

Tabela spis treści

• Metoda 1: Inject another file
• Metoda 2: wstrzyknięcie wbudowanego kodu
• metoda 2b: Używanie funkcji
• Metoda 3: użycie zdarzenia inline
• wartości dynamiczne w kodzie

Metoda 1: Inject another file

jest to najprostsza/najlepsza metoda, gdy masz dużo kodu. Dołącz swój rzeczywisty kod JS do pliku w swoim rozszerzeniu, powiedzmy script.js. Następnie niech twój skrypt treści będzie następujący (wyjaśnione tutaj: Google Chome "Application Shortcut" Custom Javascript):

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.runtime.getURL('script.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

Uwaga: Ze względów bezpieczeństwa Chrome zapobiega wczytywaniu plików js. Twój plik musi być dodany jako "web_accessible_resources" pozycja (przykład) :

// manifest.json must include: 
"web_accessible_resources": ["script.js"],

Odmowa załadowania chrome-extension://[EXTENSIONID]/script.js. Zasoby muszą być wymienione w kluczu manifestu web_accessible_resources, aby mogły być ładowane przez strony poza przedłużeniem.

Metoda 2: wstrzyknięcie wbudowanego kodu

Ta metoda jest przydatna, gdy chcesz szybko uruchomić mały fragment kodu. (Zobacz także: jak wyłączyć skróty klawiszowe facebook z rozszerzeniem Chrome?).

var actualCode = `// Code here.
// If you want to use a variable, use $ and curly braces.
// For example, to use a fixed random number:
var someFixedRandomValue = ${ Math.random() };
// NOTE: Do not insert unsafe variables in this way, see below
// at "Dynamic values in the injected code"
`;

var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();

Uwaga: literały szablonów {[33] } są obsługiwane tylko w Chrome 41 i nowszych wersjach. Jeśli chcesz, aby rozszerzenie działało w Chrome 40-, użyj:

var actualCode = ['/* Code here. Example: */' + 'alert(0);',
                  '// Beware! This array have to be joined',
                  '// using a newline. Otherwise, missing semicolons',
                  '// or single-line comments (//) will mess up your',
                  '// code ----->'].join('\n');

Metoda 2b: Używanie funkcji

Dla dużej części kodu, cytowanie ciągu jest niewykonalne. Zamiast używać tablicy, można użyć funkcji i stringified:

var actualCode = '(' + function() {
    // All code is executed in a local scope.
    // For example, the following does NOT overwrite the global `alert` method
    var alert = null;
    // To overwrite a global variable, prefix `window`:
    window.alert = null;
} + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();

Ta metoda działa, ponieważ operator + na łańcuchach znaków i funkcji konwertuje wszystkie obiekty na łańcuch znaków. Jeśli zamierzasz używać kodu więcej niż raz, dobrze jest utworzyć funkcję, aby uniknąć powtarzania kodu. Implementacja może wyglądać następująco:

function injectScript(func) {
    var actualCode = '(' + func + ')();'
    ...
}
injectScript(function() {
   alert("Injected script");
});

Uwaga: Ponieważ funkcja jest serializowana, oryginalny zakres i wszystkie powiązane właściwości zostają utracone!

var scriptToInject = function() {
    console.log(typeof scriptToInject);
};
injectScript(scriptToInject);
// Console output:  "undefined"

Metoda 3: Użycie Zdarzenie inline

Czasami chcesz uruchomić jakiś kod natychmiast, np. uruchomić jakiś kod przed utworzeniem elementu <head>. Można to zrobić wstawiając znacznik <script> z textContent (patrz Metoda 2/2B).

Alternatywą, ale niezalecaną jest użycie zdarzeń inline. Nie jest to zalecane, ponieważ jeśli strona definiuje politykę bezpieczeństwa treści, która zabrania skryptów wbudowanych, to słuchacze zdarzeń wbudowanych są blokowane. Skrypty inline wtryskiwane przez rozszerzenie, z drugiej ręka, dalej biegnij. Jeśli nadal chcesz używać zdarzeń w wierszu, oto jak:]}

var actualCode = '// Some code example \n' + 
                 'console.log(document.documentElement.outerHTML);';

document.documentElement.setAttribute('onreset', actualCode);
document.documentElement.dispatchEvent(new CustomEvent('reset'));
document.documentElement.removeAttribute('onreset');

Uwaga: ta metoda zakłada, że nie ma innych globalnych detektorów zdarzeń, które obsługują Zdarzenie reset. Jeśli tak, możesz również wybrać jedno z innych wydarzeń globalnych. Po prostu otwórz konsolę JavaScript (F12), wpisz document.documentElement.on i wybierz dostępne zdarzenia.

Dynamiczne wartości w kodzie

Od czasu do czasu trzeba przekazać dowolną zmienną do wstrzykiwanej funkcji. Na przykład:

var GREETING = "Hi, I'm ";
var NAME = "Rob";
var scriptToInject = function() {
    alert(GREETING + NAME);
};

Aby wprowadzić ten kod, musisz przekazać zmienne jako argumenty do funkcji anonimowej. Pamiętaj, aby wdrożyć go poprawnie! Następujące będą Nie działać:

var scriptToInject = function (GREETING, NAME) { ... };
var actualCode = '(' + scriptToInject + ')(' + GREETING + ',' + NAME + ')';
// The previous will work for numbers and booleans, but not strings.
// To see why, have a look at the resulting string:
var actualCode = "(function(GREETING, NAME) {...})(Hi, I'm ,Rob)";
//                                                 ^^^^^^^^ ^^^ No string literals!

Rozwiązaniem jest użycie JSON.stringify przed przekazaniem argumentu. Przykład:

var actualCode = '(' + function(greeting, name) { ...
} + ')(' + JSON.stringify(GREETING) + ',' + JSON.stringify(NAME) + ')';

Jeśli masz wiele zmiennych, warto użyć JSON.stringify raz, aby poprawić czytelność, w następujący sposób:

...
} + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]) + ')';