Chrome扩展从DOM获取CSS值

Question

我知道如何从Chrome JavaScript片段中设置元素的CSS属性(本例中为亮度(：

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。您可以简单地省略选项卡id(这就是文档中"可选"的含义(，整个代码将是：

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值(或者您想要的任何其他值(作为消息负载传递给后台脚本以进行进一步处理。

顺便说一句，要习惯这个概念还需要一些时间(至少根据我自己的经验(。