{"id":18689684,"url":"https://github.com/mrseanryan/style-scraper","last_synced_at":"2025-11-08T07:30:29.674Z","repository":{"id":221718657,"uuid":"755026281","full_name":"mrseanryan/style-scraper","owner":"mrseanryan","description":"Scrape styles from a website using reliable computed styling via a headless browser [fonts, colors, border styles ...]","archived":false,"fork":false,"pushed_at":"2024-02-13T15:26:17.000Z","size":442,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-28T01:49:21.495Z","etag":null,"topics":["puppeteer","scraping","scraping-styling","scraping-websites","styling-css"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrseanryan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-09T09:29:00.000Z","updated_at":"2024-03-30T21:38:25.000Z","dependencies_parsed_at":"2024-02-13T16:53:27.429Z","dependency_job_id":null,"html_url":"https://github.com/mrseanryan/style-scraper","commit_stats":null,"previous_names":["mrseanryan/style-scraper"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrseanryan%2Fstyle-scraper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrseanryan%2Fstyle-scraper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrseanryan%2Fstyle-scraper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrseanryan%2Fstyle-scraper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrseanryan","download_url":"https://codeload.github.com/mrseanryan/style-scraper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239550286,"owners_count":19657541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["puppeteer","scraping","scraping-styling","scraping-websites","styling-css"],"created_at":"2024-11-07T10:44:40.523Z","updated_at":"2025-11-08T07:30:29.627Z","avatar_url":"https://github.com/mrseanryan.png","language":"JavaScript","readme":"# style-scraper\nScrape styles from a website using reliable computed styling via a headless browser [fonts, colors, border styles ...]\n\n- programatically inspect elements of the website, without a visible browser\n- extract correct *actual* computed styles for elements on the webpage\n- elements found by co-ordinates (offset from top-left of page)\n- screenshot of the full vertical length of the webpage (automatic scrolling)\n\n## Example execution\n\nCOMMAND:\n\n```\n./go.sh https://everydayphotos.net 180 300\n```\n\nOUTPUT:\n\n```\n\u003e style-scraper@1.0.0 start\n\u003e node src/scrape-via-puppeteer/index.js https://everydayphotos.net 180 300\n\nSaving screenshot to: ./temp/screenshot.jpg\nGet element by co-ordinates (180, 300)\nA\nHTML \u003e IMG \u003e BODY \u003e DIV \u003e DIV \u003e DIV \u003e A\n{\n  backgroundColors: [ 'rgba(0, 0, 0, 0.6)', 'rgb(0, 0, 0)' ],\n  borderColors: [ 'rgb(255, 255, 255)', 'rgb(0, 0, 238)' ],\n  colors: [ 'rgb(255, 255, 255)', 'rgb(0, 0, 238)' ],\n  fontFamilies: [\n    'Frutiger, \"Frutiger Linotype\", Univers, Calibri, \"Gill Sans\", \"Gill Sans MT\", \"Myriad Pro\", Myriad, \"DejaVu Sans Condensed\", \"Liberation Sans\", \"Nimbus Sans L\", Tahoma, Geneva, \"Helvetica Neue\", Helvetica, Arial, sans-serif'\n  ],\n  fontSizes: [ '20px' ]\n}\n```\n\nSCREENSHOT (cropped):\n\n![everydayphotos.net screenshot](./images/screenshot-edp-truncated.jpg)\n\n- the screenshot includes the full vertical length of the website, by automatically scrolling\n\n## Setup\n\n### Pre-requisites\n\n- OS: Ubuntu\n\n- nodejs\n  - node version 18\n\n```\ncurl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash \nsource ~/.bashrc\nsource ~/.profile\n\nnvm install 18\nnvm use 18\n\nnode --version\n```\n\n- C++ libraries\n\n```\nsudo apt-get update\nsudo apt-get install -yq --no-install-recommends libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 libnss3\n```\n\n### Install\n\n```\nchmod +x ./install.sh\n./install.sh\n```\n\n```\nnpm test\n```\n\n## Usage\n\n```\n./go.sh \u003cURL to website\u003e \u003cx\u003e \u003cy\u003e\n```\n\n- where x and y are the co-ordinates at which to inspect the webpage for style details.\n\n## Trouble-shooting\n\n1. Error on Ubuntu: \"error while loading shared libraries: libgbm.so.1: cannot open shared object file: Puppeteer in Nodejs on AWS EC2 instance\"\n    - solution: `sudo apt-get install -y libgbm-dev`\n\n## References\n\n- https://pptr.dev/\n- https://www.toptal.com/puppeteer/headless-browser-puppeteer-tutorial\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrseanryan%2Fstyle-scraper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrseanryan%2Fstyle-scraper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrseanryan%2Fstyle-scraper/lists"}