Chrome 扩展程序：如何获取网站资产/资源（CSS、图像等）

Question

我想开发一个 Chrome 扩展程序，它读取 CSS 和网站图像。 我想要实现的将具有类似CSS Peeper https://csspeeper.com/之类的功能。 是否可以使用内容脚本或后台脚本？ 我曾尝试寻找解决方案，但找不到我要找的东西。

manifest.json

{
"manifest_version": 2,
"name": "Get all css rules in stylesheets",
"background": {
  "scripts": ["background.js"],
  "persistent": true
 },
"permissions": ["activeTab", "tabs", "webRequest", "storage", "<all_urls>"],
"version": "1.0",
"page_action": {
"default_icon": {
  "16": "images/get_started16.png",
  "32": "images/get_started32.png",
  "48": "images/get_started48.png",
  "128": "images/get_started128.png"
 }
},
"icons": {
  "16": "images/get_started16.png",
  "32": "images/get_started32.png",
  "48": "images/get_started48.png",
  "128": "images/get_started128.png"
 }
}

我还尝试挖掘CSS Peeper代码，但我只找到了background.js文件：

/* CSS Peeper background.js file */
chrome.browserAction.onClicked.addListener(function () {
   chrome.tabs.executeScript({
       file: 'scripts/index.js'
   });
   chrome.tabs.insertCSS({
       file: 'styles/page.css'
   });
});

Answer 1

尽管上述答案在技术上是正确的，并且会返回页面使用的样式表列表，但我建议采用不同的方法来获取 colors 和页面图像。

获取样式表只是解决方案的一部分，因为您随后需要阅读、解析、从中查询 colors 等等，这很快就会变得非常复杂。

幸运的是，有一个这样的 API 可以为您完成这一切： window.getComputedStyle() 。

这是一个如何使用它从页面获取 colors 的示例。

使用 javascript 从页面获取每个 colors

// Get all elements from page
const elements = document.querySelectorAll('*');
// Get computedStyles for each elements
const computedStyles = Array.from(elements).map(el => window.getComputedStyle(el));

const colors = computedStyles.map(styles => {
const keys = Object.values(styles);
const values = keys.map(key => styles.getPropertyValue(key));

// Get rgb & rgba colors from style values
const colors = values.map(value => {
    // Thanks to https://stackoverflow.com/questions/7543818/regex-javascript-to-match-both-rgb-and-rgba
    const rgbColorRegEx = /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/ig;
    const rgbColors = value.match(rgbColorRegEx);

        return rgbColors || [];
    }).flat();

    return colors;
})
   .filter(colors => colors.length !== 0) // Remove empty results
   .flat() // Flatten resulting array
   .filter((el, index, arr) => arr.indexOf(el) === index); // Only keep unique results

此示例的方法相当幼稚，但可以轻松扩展以满足您的需求。 您可以使用相同的技术来获得任何其他样式的页面。

使用 javascript 从页面获取每个图像

如上所述，您可以使用document.querySelector('img, svg')简单地查询页面上的图像，这将返回页面上svg和img元素的 NodeList。 如果您还想获取背景图像，您可以使用与上述相同的技术，但匹配background-image而不是 rgb/rgba 值。

Answer 2

我认为您需要将content_script添加到manifest.json然后使用document.styleSheets阅读样式表

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js" : ["myscript.js"],
    "run_at": "document_end"
  }
],

在您的 myscript.js 文件中，使用document.styleSheets来获取样式表。

阅读本文了解更多详情： https://developer.chrome.com/extensions/content_scripts

内容脚本是在 web 页面的上下文中运行的文件。 通过使用标准文档 Object Model (DOM)，他们能够读取浏览器访问的 web 页面的详细信息，对其进行更改并将信息传递给其父级扩展。