Chrome расширение получить CSS значение из DOM

Question

Я знаю, как установить свойство CSS элемента из фрагмента Chrome JavaScript (в данном случае яркость):

chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
    chrome.tabs.executeScript(
      tabs[0].id,
      {code: 'document.getElementById("element-id").style.filter = "brightness(' + brightness_level + ')";'});
  });

Но как мне получить то же значение после того, как что?

Answer 1

executeScript возвращает последний оцененный результат кода в обратный вызов, см. документацию .

Обратите внимание, что при работе на активной вкладке нет необходимости в chrome.tabs.query. Вы можете просто опустить идентификатор вкладки (это то, что означает «необязательный» в документации), и весь код будет:

chrome.tabs.executeScript({
  code: 'document.getElementById("element-id").style.filter',
}, results => {
  if (!chrome.runtime.lastError) {
    const mainPageResult = results[0];
    console.log(mainPageResult);
    // do something with mainPageResult here inside the callback
  }
}

Он не может передавать элементы DOM, Map, Set, ArrayBuffer, классы , функции и т. д. - он может передавать только JSON -совместимые простые объекты и типы. Поэтому вам нужно будет вручную извлечь необходимые данные и передать их в виде простого массива или объекта.

Обратный вызов вызывается асинхронно, поэтому эти темы могут быть полезны:

• Почему моя переменная не изменилась после того, как я изменил ее внутри функции?
• Как вернуть ответ от асинхронного вызова?

Answer 2

Я предполагаю, что вы работаете с background script до сих пор. Для этого вам потребуется скрипт контента для запуска на странице, содержащей DOM, которую вы упомянули. В этом сценарии вы хотите отправить сообщение , передав значение CSS (или что-то еще, что вы действительно хотите) в качестве полезной нагрузки сообщения в фоновый сценарий для дальнейшей обработки.

Это Между прочим, потребуется некоторое время, чтобы привыкнуть к этой концепции (по крайней мере, из моего собственного опыта).