1

I want to develop a Chrome Extension that reads CSS and Images of a website. What I am trying to achieve will have the functionality of something like CSS Peeper https://csspeeper.com/. Is it possible with content script or background script? I have tried looking for a solution but could not find what I am looking for.

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"
 }
}

I also tried to dig through CSS Peeper code but I only found background.js file:

/* CSS Peeper background.js file */
chrome.browserAction.onClicked.addListener(function () {
   chrome.tabs.executeScript({
       file: 'scripts/index.js'
   });
   chrome.tabs.insertCSS({
       file: 'styles/page.css'
   });
});
Saad Zafar
  • 41
  • 11
  • The only reliable method is to use chrome.debugger API with [Page.getResourceTree](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-getResourceTree) command. The less reliable approach is to use a content script with document.styleSheets + fetch the cross-origin stylesheets in the background script. – wOxxOm Apr 07 '20 at 08:02
  • thank you for your answer, what do you suggest I should do to get the images? – Saad Zafar Apr 07 '20 at 08:24
  • Depends on your definition of "get" and what you will do with the images afterwards. – wOxxOm Apr 07 '20 at 08:27
  • I want to allow the user to download all the images in a zip file. – Saad Zafar Apr 07 '20 at 08:41
  • Page.getResourceTree will report them as well. To get the contents you'll use Page.getResourceContent. – wOxxOm Apr 07 '20 at 08:46

2 Answers2

1

Although the above answer is technically correct and will return a list of stylesheets used by the page, I would suggest a different approach to getting colors and images of a page.

Getting a stylesheet is only part of the solution because you will then need to read it, parse it, query colors from it etc., which quickly becomes extremely complex.

Fortunately, there is one such API that does it all for you: window.getComputedStyle().

Here's an example of how to use it to get colors from a page.

Get every colors from a page using javascript

// 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

This example is rather naive in its approach but can easily be extended to meet your needs. You can use the same technique to get any other style of the page.

Get every images from a page using javascript

As suggested above, you can simply query for images on a page using document.querySelector('img, svg') which will return a NodeList of the svg and img elements on the page. If you wanted to get background-images as well, you can use the same technique as above but matching for background-image instead of rgb/rgba values.

Julien Verneaut
  • 338
  • 1
  • 9
  • I tried your solution but it returns a lot of colors like 100+ colors. I tried to inspect on the same site with CSS Peeper but it gave me only 30-40 colors and those were the only colors used in that website. – Saad Zafar Apr 08 '20 at 12:05
0

I think you would need to add content_script to manifest.json and then read the stylesheets using document.styleSheets

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

In your myscript.js file use document.styleSheets to get stylesheets.

Read this for more details: https://developer.chrome.com/extensions/content_scripts

Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them and pass information to their parent extension.

SpiritOfDragon
  • 1,404
  • 2
  • 15
  • 27