Skrypty zawartości są wykonywane w środowisku "izolowanego świata" . Musisz wprowadzić swoją metodę state() do samej strony.

Jeśli chcesz użyć jednego z API chrome.* w skrypcie, musisz zaimplementować specjalną obsługę zdarzeń, jak opisano w tej odpowiedzi: rozszerzenie Chrome - pobieranie oryginalnej wiadomości Gmaila.

W przeciwnym razie, jeśli nie musisz używać chrome.* API, zdecydowanie polecam wstrzyknąć cały kod JS na stronie poprzez dodanie <script> tag:

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 pozwól swoim treściom skrypt będzie następujący (wyjaśnione tutaj: Google Chome" skrót aplikacji " Niestandardowy Javascript):

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

Uwaga: w przypadku użycia tej metody należy dodać plik script.js do "web_accessible_resources" sekcja (przykład ). Jeśli tego nie zrobisz, Chrome odmówi załadowania skryptu i wyświetli następujący błąd w konsoli:

Odmowa załadowania chrome-extension://[EXTENSIONID]/script.js. Zasoby muszą być wymienione w klucz manifestu web_accessible_resources w celu załadowania stron spoza rozszerzenia.

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 {[28] } 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: Korzystanie z funkcji

Dla dużej części kodu cytowanie ciągu znaków nie jest możliwe. 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, oryginał zakres, a wszystkie związane właściwości są utracone!

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

Metoda 3: użycie zdarzenia 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 inline, to inline słuchacze zdarzeń są zablokowani. Z drugiej strony Skrypty inline wstrzykiwane przez rozszerzenie nadal działają. Jeśli nadal chcesz używać zdarzeń inline, 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.

Wartości dynamiczne we wstrzykiwanym kod

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ść, jak następuje:

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