0

Есть некий сайт. Назовем его mysite.ru

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

var node = document.createElement('div');
node.innerHTML = '\
<button onclick="start()" id="playBut" style="margin: 5px">play</button>\
';

document.getElementsByTagName('body')[0].appendChild(node);

function start(){
    // My code here
};

и все замечательно работает. Вот только мне надоело постоянно запускать код при обновлении страницы, поэтому я решил создать расширение для браузера. Полазил по хабру и собрал вот что

 {
   "manifest_version": 2,
   "name": "MyExt",
   "version": "1.0.0.16",
   "permissions": [
    "tabs",
    "activeTab",
    "https://mysite.ru/*" // Разрешить расширению обращаться к указанному адресу
 ],
  "content_scripts": [
    {
      "matches": [ "https://mysite.ru/*" ],
      "js": [ "MyScript.js" ]
    }
  ],

      "browser_action": {
        "default_title": "MyExt"
    }
}

В файле MyScript.js как раз тот скрипт, что я описал в начале.

Но проблема в том, что когда расширение запускается на нужном мне сайте, кнопочка появляется, а вот функция start() не выполняется. В консоли вижу

Uncaught ReferenceError: start is not defined at HTMLButtonElement.onclick

5
  • Ну так функция start у вас находится не в документе, а в расширении. Используйте нормальные обработчики с использованием .addEventListener
    – etki
    16 дек 2016 в 9:54
  • @Etki, немного не понял. Функция не в расширении, а в файле, который расширение подключает к сайтам, которые совпадают с matches. По крайней мере я так думал. Можете подробнее рассказать про этот EventListener?
    – iRumba
    16 дек 2016 в 9:58
  • @Etki, там на самом деле не просто обработка клика... там чуть сложнее. Функция start() запускает функцию F(), которая запускает сама себя рекурсивно. То есть если даже я привяжу через этот листенер свою функцию, то таким же образом потеряется функция F. поэтому мне надо именно инъекцию сделать
    – iRumba
    16 дек 2016 в 10:05
  • не потеряется. start будет видеть весь свой контекст
    – etki
    16 дек 2016 в 10:06
  • @Etki, ну хорошо если так... так что сделать то надо?
    – iRumba
    16 дек 2016 в 10:10

1 ответ 1

3

Сейчас вы предлагаете браузеру примерно такой сценарий:

"При нажатии на кнопку найти функцию, содержащуюся в переменной start и выполнить ее"

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

Выход из этого довольно простой - вместо того, чтобы заставлять браузер обращаться к функции по имени, просто повесить ее обработчиком, передав целиком и избавившись от этих проблем.

var button = document.getElementById('playBut');
button.addEventListener('click', start, false);

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

3
  • Извините за тупость, но в функции F() есть вот такая строка var obj = $.parseJSON(http.responseText); которая не работает. полагаю, это потому, что в контексте функции нет jQuery. Но на самом сайте то она подключена. Как быть в этом случае?
    – iRumba
    16 дек 2016 в 10:25
  • а нельзя ли просто встроить все мои скрипты на сайт, как я это делал используя javascript:(MY CODE) в адресной строке или через консоль отладчика? Почему с расширениями так сложно это сделать?
    – iRumba
    16 дек 2016 в 10:30
  • как jquery подключать, не знаю, но вопрос должен быть распространенный. вы можете попробовать инжектнуть свой скрипт новым тегом <script> на страницу
    – etki
    16 дек 2016 в 11:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.