Как получить доступ к переменным или функциям кода сайта из расширения браузера

#javascript #jquery

                    
Есть некий сайт: example.com на нем определенный скрипт:

var a = 99;
function site_func () {
console.log ( 'a');
}


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

Ответы

Ответ 1

Из соображений безопасности код расширения браузера работает в специальной "песочнице",
из которой он имеет полный доступ к DOM сайта, но не имеет доступа к переменным и функциям
JS-кода на сайте.

Это ограничение можно обойти, внедрив свой код непосредственно в страницу сайта,
используя функции DOM. (Но не удивляйтесь, если приложение использующее подобные механизмы
не будет опубликовано на Web Store).

Пример использования (пишется в content-скрипте расширения) (на примере расширения
chrome, в других браузерах возможно использование примерно такой же техники):

  // Создаем на странице невидимый элемент div, через который мы сможем обмениваться
данными
  var div=document.createElement("div");
  div.id="xgp_msg";
  div.style.display='none';
  document.body.appendChild(div);

  // Создаем обработчик собственного события
  // (событие будет исполняться в контексте расширения !)
  div.addEventListener("xgpEvent", function(event) {
    var msg;
    // Пробуем получить и распарсить данные, содержащиеся в нашем div
    try {msg=JSON.parse(event.target.innerText);} catch(e) {
      // Тут хорошо бы ошибки куда нибудь вывести
    };
    if(!msg) return;
    console.log(msg);
    // Тут можем использовать данные, полученные со страницы
  });

  // Создаем на странице (в контексте сайта) новый скрипт:    
  var script = document.createElement('script');
  // Задаем его текст
  script.textContent = "var xgp_event=document.createEvent('Event');"+
                       "xgp_event.initEvent('xgpEvent',true,true);"+
                       "function xgp_send(msg) {"+
                       " var d=document.getElementById('xgp_msg');"+
                       " d.innerText=JSON.stringify(msg);"+
                       " d.dispatchEvent(xgp_event);"+
                       "}"+
                       // Далее мы можем создавать на странице другие сприпты
                       // которые могут в контексте сайта вызывать передачу сообщения
                       // в расширение. Например можно дописать прямо тут:
                       "xgp_send({ var_a: a,"+
                       "           func_result: site_func()"+
                       "});";
  // Включаем созданный скрипт в DOM документа
  (document.head||document.documentElement).appendChild(script);
  // В этот момент созданный скрипт исполняется в контексте сайта
  // Сразу после этого он уже не нужен в DOM и его можно удалить
  // (при этом функция xgp_send() останется и её можно будет вызывать из контекста сайта)
  script.remove();


Внимание: некоторые сайты могут запретить политикой безопасности даже включение произвольного
кода в страницу и тогда данный метод может не сработать.

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