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

我认为您需要将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
内容脚本是在网页上下文中运行的文件。通过使用标准的文档对象模型（DOM），他们能够读取浏览器访问的网页的详细信息，对其进行更改以及将信息传递到其父扩展。