我应该如何从网站获取CSS变量？[副本]

u59ebvdq 于 2023-08-09 发布在其他

关注(0)|答案(1)|浏览(82)

此问题在此处已有答案：

Accessing window/DOM/HTML of the webpage from the extension（2个答案）
3天前关闭。
我正在做一个chrome扩展，模仿谷歌的材料你的配色方案，但在谷歌的网站上，从youtube开始。每当我尝试在：root上使用querySelector时，它只会获取我的popup.html文件的根目录。我试着做了一个web request，但没有工作。这是我在学校java课之外的第一个真实的的编码项目，所以我仍然在学习js，html和css。
我不知道还有什么可以尝试的，因为我找到的任何论坛都只是告诉我使用querySelector，所以它们没有多大帮助。如果任何人有一个解决方案，我将非常感谢的帮助！

css

来源：https://stackoverflow.com/questions/76837871/how-should-i-go-about-getting-css-variables-from-websites

1条答案

按热度按时间

6kkfgxo01#

好吧，看看这个：
定义内容脚本：在manifest.json文件中，指定要注入到网页中的内容脚本。内容脚本应该包含一个JavaScript文件（我们称之为contentScript.js），您可以在其中对网页执行操作。

{
  "manifest_version": 2,
  "name": "Your Extension Name",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/*"], // Match the websites where you want to access CSS variables
      "js": ["contentScript.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

字符串
contentScript.js:此脚本将在匹配的网站上运行。在这个脚本中，您可以使用window.getComputedStyle（）函数来访问CSS变量。您需要使用后台脚本中的executeScript方法将此脚本注入到网页中。

// contentScript.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.message === "getCSSVariables") {
    const rootStyles = window.getComputedStyle(document.documentElement);
    const cssVariableValue = rootStyles.getPropertyValue('--your-css-variable-name');
    sendResponse({ cssVariableValue });
  }
});

型
html：在popup.html中，您可以使用chrome.tabs与内容脚本通信并获取CSS变量值。

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Your Extension Popup</title>
</head>
<body>
  <button id="getVariableButton">Get CSS Variable Value</button>
  <div id="result"></div>

  <script src="popup.js"></script>
</body>
</html>

型
js：在这个脚本中，可以为按钮添加一个click事件监听器，并使用chrome. tables.sendMessage与内容脚本通信，获取CSS变量值

// popup.js
document.getElementById("getVariableButton").addEventListener("click", function () {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, { message: "getCSSVariables" }, function (response) {
      document.getElementById("result").textContent = response.cssVariableValue;
    });
  });
});

型
给予它看一看;）

赞(0）回复(0）举报 2023-08-09

我来回答

我应该如何从网站获取CSS变量？[副本]

1条答案

相关问题

热门标签

最新问答