Поместить xpath в выбранный элемент в расширении боковой панели html - PullRequest
Новая
       4

Поместить xpath в выбранный элемент в расширении боковой панели html

1 голос
/ 08 апреля 2020

Поэтому я пытаюсь разработать расширение chrome, которое будет экспортировать список xpaths выбранных элементов со страницы. Однако я не могу вычислить xpath текущего выбранного элемента на панели devtools.

Я попытался использовать getPathTo из этого ответа, но функция не может получить доступ ссылка на элемент $ 0.

С этим кодом я могу напечатать тег нового выбранного элемента: 

chrome.devtools.panels.elements.onSelectionChanged.addListener(function () {
    var expression = "(function(){console.log($0);})()"
    chrome.devtools.inspectedWindow.eval(expression)
});

Но если я попытаюсь: 

chrome.devtools.panels.elements.onSelectionChanged.addListener(function () {
    var expression = "(function(){console.log(getPathTo($0));})()"
    chrome.devtools.inspectedWindow.eval(expression)
});

Это жалуется на неопределенную ссылку на $ 0.

В коде также есть эта функция для установки боковой панели HTML: 

chrome.devtools.panels.elements.createSidebarPane(
    "Chrome Extension",
    function (sidebar) {
        sidebar.setPage("sidebar/sidebar.html");
    }
);

И боковой панели / боковой панели. html является простой HTML страница со списком элементов внутри, где я хочу добавить путь ко всем выбранным элементам, и кнопку, чтобы скопировать список в буфер обмена. Как я могу использовать ссылку на выбранный элемент внутри функции? Кроме того, как я могу передать результаты на страницу HTML?

1 Ответ

0 голосов
/ 10 апреля 2020

chrome .devtools.inspectedWindow.eval запускается в среде вкладки, а не в среде расширения. Веб-страница представляет собой совершенно другой контекст с собственными document, DOM, window, глобальными переменными и так далее. Чтобы иметь возможность вызывать getPathTo там, вам нужно поместить его туда. 

chrome.devtools.inspectedWindow.eval(`(${() => {
  console.log(getPathTo($0));
  function getPathTo(element) {
    // ...................
    // ..... code
    // ...................
  }
}})()`);

Безопасный подход

По умолчанию eval () запускается в контексте страницы, поэтому на некоторых страницах ваш код может завершиться ошибкой, если они переопределять или искажать стандартные объекты и прототипы. Вы можете запустить код в изолированном мире скриптов контента вместо: 

chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
  chrome.tabs.executeScript({
    code: `function getPathTo(element) {
      // ...................
      // ..... code
      // ...................
    }`,
    runAt: 'document_start',
  }, () => {
    chrome.devtools.inspectedWindow.eval(`(${() => {
      console.log(getPathTo($0));
    }})()`, {
      useContentScriptContext: true,
    });
  });
});
...