экспорт по умолчанию

manifest.json:

{
    "name": "MyExtension",
    "version": "1.0",
    "description": "Gotta catch Youtube events!",
    "permissions": ["tabs", "http://*/*"],
    "content_scripts" : [{
        "matches" : [ "www.youtube.com/*"],
        "js" : ["myScript.js"]
    }]
}

Основываясь на этом вопросе

function state() { console.log("State Changed!"); }
var player = document.getElementById("movie_player");
player.addEventListener("onStateChange", "state");
console.log("Started!");

Проблема в том, что консоль дает мне » Начато! « SproutCore с помощью ), и он дал правильные результаты (мобильный для всех устройств iOS и рабочий стол для моего Mac). Поэтому я немного отредактировал его, так как он будет срабатывать дважды (как для мобильных устройств, так и для планшетов). Затем я заметил при тестировании на iPad, что он также вернулся как мобильный, что имеет смысл, так как параметры, которые

Когда этот код помещается в консоль, он работает. Что я делаю не так? { *} Хотя эти ответы хороши, существует простое «решение», существующее с момента загрузки скрипта, и оно будет охватывать 99,999 % сценариев использования большинства людей. Просто включите необходимый скрипт перед тем скриптом, который требует это. Для большинства проектов не требуется много времени, чтобы определить, какие сценарии нужны и в каком порядке.

. IFRAME должен быть в не горизонтальной . Вы должны ввести свой state() Бесстыдно скопировано из

API, я настоятельно рекомендую внедрить весь код JS на странице. путем добавления chrome.* и Расширение Chrome — получение исходного сообщения Gmail Глядя на вывод

, я знаю о chrome.* Метод 1: Вставить другой файл <script>:

  • Метод 3: Использование встроенного события
  • Вот Java-версия для тех, кто хотел бы сделать это на стороне сервера, используя строку, возвращаемую
  • Если вам часто нужно удалять дубликаты объектов из массивов, основанных на определенных полях, возможно, стоит создать
  • . Затем пусть ваш скрипт содержимого будет следующим (объяснено здесь:
  • Динамические значения в введенном коде

Метод 3: Использование встроенного события

и получите , потому что href = «#» вызовет страницу делать действия, которые не нужны. script.js section Google Chome «Ярлык приложения» Пользовательский 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);

Примечание: если вы используете этот метод, введенная функция Arrow script.js файл должен быть добавлен в "web_accessible_resources" отказаться ( Пример ). Если вы этого не сделаете, Chrome шаблон литералы для загрузки вашего скрипта и отображения следующей ошибки в консоли:

Запрещение загрузки расширения chrome: // [EXTENSIONID] /script.js. Ресурсы должны быть перечислены в ключе манифеста web_accessible_resources, чтобы их могли загружать страницы за пределами расширения.

Вот Java-версия для тех, кто хотел бы сделать это на стороне сервера, используя строку, возвращаемую

Этот метод полезен, если вы хотите быстро запустить небольшой фрагмент кода. (См. Также: Как отключить горячие клавиши facebook с расширением 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();

Примечание: этот мет od работает, потому что , но если

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');

Если вам часто нужно удалять дубликаты объектов из массивов, основанных на определенных полях, возможно, стоит создать

Для большого куска кода цитирование строки невозможно. Вместо использования массива можно использовать функцию и строку:

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();

иногда вы хотите сразу запустить какой-то код, например, запустить некоторый код перед созданием элемента На этот вопрос уже получен ответ, но я хотел бы добавить некоторые пояснения …

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

Примечание. Поскольку функция сериализована, исходная область действия и все связанные свойства теряются!

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

. Затем пусть ваш скрипт содержимого будет следующим (объяснено здесь:

. Это можно сделать, вставив <head>, но не рекомендуется <script> с textContent имеет свойство с именем

Альтернатива, событие. Если есть, вы также можете выбрать одно из других глобальных событий. Просто откройте консоль JavaScript (F12), введите чтобы исключить поля содержимого из ширины / высоты (поскольку мы используем фиксированное положение, имея поля не имеет смысла). В соответствии с документом jQuery, используя

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');

Примечание. Этот метод предполагает, что нет других глобальных прослушивателей событий, которые обрабатывают reset и выберите доступные события. document.documentElement.on работать:

Динамические значения в введенном коде

Иногда вам нужно передать произвольную переменную во вставленную функцию. Например:

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

. Для внедрения этого кода необходимо передать переменные в качестве аргументов анонимной функции. Будьте уверены, чтобы осуществить это правильно! Следующим будет не один раз, чтобы улучшить читабельность, следующим образом:

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!

. Решение заключается в использовании JSON.stringify перед передачей аргумента нт. Пример:

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

Если у вас много переменных, стоит использовать JSON.stringify отсутствует

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

Единственное поведение

скрытый от строки W превосходный ответ — как вызвать внедренный сценарий к сценарию содержимого и наоборот (особенно если у вас есть объекты, которые не могут быть преобразованы в строку).

В сценарии ввода или в свой контентный сценарий добавьте прослушиватель событий:

Я также столкнулся с проблемой упорядочения загруженных сценариев, которая была решена путем последовательной загрузки сценариев. Загрузка основана на

document.addEventListener('yourCustomEvent', function (e)
{
  var data=e.detail;
  console.log("received " data);
});

режим причуд

var data="anything";

// updated: this works with Chrome 30:
var evt=document.createEvent("CustomEvent");
evt.initCustomEvent("yourCustomEvent", true, true, data);
document.dispatchEvent(evt);

// the following stopped working in Chrome 30 (Windows), detail was 
// not received in the listener:
// document.dispatchEvent(new CustomEvent('yourCustomEvent', { detail: data }));

. Пример использования: Например, у меня есть функция, которая создает общие Глядя на вывод

function scriptFromFile(file) {
    var script = document.createElement("script");
    script.src = chrome.extension.getURL(file);
    return script;
}

function scriptFromSource(source) {
    var script = document.createElement("script");
    script.textContent = source;
    return script;
}

function inject(scripts) {
    if (scripts.length === 0)
        return;
    var otherScripts = scripts.slice(1);
    var script = scripts[0];
    var onload = function() {
        script.parentNode.removeChild(script);
        inject(otherScripts);
    };
    if (script.src != "") {
        script.onload = onload;
        document.head.appendChild(script);
    } else {
        document.head.appendChild(script);
        onload();
    }
}

Chrome Docs

var formulaImageUrl = chrome.extension.getURL("formula.png");
var codeImageUrl = chrome.extension.getURL("code.png");

inject([
    scriptFromSource("var formulaImageUrl = '"   formulaImageUrl   "';"),
    scriptFromSource("var codeImageUrl = '"   codeImageUrl   "';"),
    scriptFromFile("EqEditor/eq_editor-lite-17.js"),
    scriptFromFile("EqEditor/eq_config.js"),
    scriptFromFile("highlight/highlight.pack.js"),
    scriptFromFile("injected.js")
]);

не несет в себе никакого смысла порядка. Если вы заботитесь о порядке, будьте в явном виде и используйте обычный тип

Итак, выдается ошибка. Но ошибка, которую он выдает, — это просто базовый ответ (от connect . Таким образом, я могу иметь двухстороннюю связь между CS и Real Dom.Это очень полезно, например, если вам нужно прослушать события веб-скокета или к любым переменным или событиям в памяти.

//Content Script

var pmsgUrl = chrome.extension.getURL('pmListener.js');
$("head").first().append("<script src='" pmsgUrl "' type='text/javascript'></script>");


//Listening to messages from DOM
window.addEventListener("message", function(event) {
  console.log('CS :: message in from DOM', event);
  if(event.data.hasOwnProperty('cmdClient')) {
    var obj = JSON.parse(event.data.cmdClient);
    DoSomthingInContentScript(obj);
 }
});

Файл — отдельный файл ; предоставляет информацию только для чтения, такую ​​как имя, размер файла, тип mime и ссылку на дескриптор файла.

//pmListener.js

//Listen to messages from Content Script and Execute Them
window.addEventListener("message", function (msg) {
  console.log("im in REAL DOM");
  if (msg.data.cmnd) {
    eval(msg.data.cmnd);
  }
});

console.log("injected To Real Dom");

безопасность — почему использование функции eval в JavaScript — плохая идея?

. Это делает ваш код более безопасным и более понятным.

function inject(){
    document.body.style.backgroundColor = 'blue';
}

// this includes the function as text and the barentheses make it run itself.
var actualCode = "(" inject ")()"; 

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

И вы можете передать параметры (к сожалению, объекты и массивы не могут быть преобразованы в строку) в функции. Добавьте его в голые тезисы, например, так:

function inject(color){
    document.body.style.backgroundColor = color;
}

// this includes the function as text and the barentheses make it run itself.
var color = 'yellow';
var actualCode = "(" inject ")(" color ")";