{"id":24835456,"url":"https://github.com/lufzle/chromda","last_synced_at":"2025-04-05T20:09:02.234Z","repository":{"id":36901741,"uuid":"230700276","full_name":"lufzle/chromda","owner":"lufzle","description":"λ 🖼️ Chromda is an AWS Lambda function for capturing screenshots of websites.","archived":false,"fork":false,"pushed_at":"2023-01-24T01:02:44.000Z","size":1084,"stargazers_count":510,"open_issues_count":27,"forks_count":22,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T19:06:39.826Z","etag":null,"topics":["aws","aws-lambda","chrome-headless","puppeteer","screenshot","serverless"],"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/lufzle.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}},"created_at":"2019-12-29T04:02:18.000Z","updated_at":"2025-03-22T10:32:53.000Z","dependencies_parsed_at":"2023-02-13T07:25:18.477Z","dependency_job_id":null,"html_url":"https://github.com/lufzle/chromda","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lufzle%2Fchromda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lufzle%2Fchromda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lufzle%2Fchromda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lufzle%2Fchromda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lufzle","download_url":"https://codeload.github.com/lufzle/chromda/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393572,"owners_count":20931813,"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":["aws","aws-lambda","chrome-headless","puppeteer","screenshot","serverless"],"created_at":"2025-01-31T04:01:27.176Z","updated_at":"2025-04-05T20:09:02.211Z","avatar_url":"https://github.com/lufzle.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cimg src=\"/chromda.png\" height=\"220\" /\u003e\n\n# Chromda – Serverless screenshots\n\nChromda is an AWS Lambda function for serverless capturing screenshots of websites.\n\n### Multiple sources\n\n- SNS topics\n- SQS queues\n- CloudWatch scheduled events\n- API Gateway proxy\n\n### Configurable\n\n- Capture full page, viewport or specific DOM element\n- Exclude DOM elements (useful for ads or other unwanted content)\n- Override styles\n\n## Quick start\n\nProvided you already have AWS credentials for Serverless, do:\n\n```bash\ngit clone https://github.com/luisfarzati/chromda\ncd chromda\ngit submodule update --init\nnpm install\n```\n\nEdit the `serverless.yml` file and change the example bucket name with one of your own:\n\n```yaml\n# serverless.yml\ncustom:\n  s3Bucket: \u003cyour bucket name\u003e\n```\n\nDeploy the function into your AWS account:\n\n```bash\nnpm run deploy\n```\n\nOpen the [AWS Lambda Console](https://console.aws.amazon.com/lambda/home?region=us-east-1#/functions/chromda-dev-captureScreenshot) and create the following test event:\n\n```jsonc\n{\n  \"source\": \"aws.events\",\n  \"time\": \"1970-01-01T00:00:00Z\",\n  \"detail\": {\n    \"url\": \"https://www.nytimes.com\"\n  }\n}\n```\n\nClick **Test**, wait a few seconds (it might take around 8-10 secs), then you should see a response like:\n\n```json\n{\n  \"url\": \"https://\u003cyour bucket name\u003e.s3.amazonaws.com/\u003cuuid\u003e.png\"\n}\n```\n\n## Usage\n\n### Invocation\n\nThe function accepts different kind of events, extracting the data from the proper body attribute as follows:\n\n| Event                                                                                                      | Body is extracted from    |\n| ---------------------------------------------------------------------------------------------------------- | ------------------------- |\n| [SNS Message Event](https://docs.aws.amazon.com/lambda/latest/dg/with-sns.html)                            | `.Records[0].Sns.Message` |\n| [SQS Message Event](https://docs.aws.amazon.com/lambda/latest/dg/with-sqs.html)                            | `.Records[0].body`        |\n| [API Gateway Message Event](https://docs.aws.amazon.com/lambda/latest/dg/with-on-demand-https.html)        | `.body`                   |\n| [CloudWatch Events Message Event](https://docs.aws.amazon.com/lambda/latest/dg/with-scheduled-events.html) | `.detail`                 |\n\n### Options\n\n```jsonc\n{\n  // required\n  \"url\": \"https://google.com\",\n\n  // optional - valid options: page, viewport, element\n  // default: viewport\n  \"capture\": \"page\",\n\n  // selector of element to capture\n  // required if capture: element\n  \"selector\": \".container\",\n\n  // optional - S3 key for the image file\n  // default: uuid()\n  \"s3key\": \"test.png\",\n\n  // optional - selectors of elements to exclude\n  \"exclude\": [\".ad\", \"video\"],\n\n  // optional - styles to override\n  // see Puppeteer.addStyleTag\n  \"styles\": [\n    {\n      \"content\": \"body { color: #f00; }\"\n    }\n  ],\n\n  // optional - puppeteer options\n  \"puppeteer\": {\n    // see Puppeteer.goto options\n    \"navigation\": {\n      \"timeout\": 30000,\n      \"waitUntil\": [\"domcontentloaded\", \"networkidle2\"]\n    },\n    // see Puppeteer.screenshot options\n    \"screenshot\": {\n      \"type\": \"jpeg\",\n      \"quality\": 50,\n      \"omitBackground\": false\n    },\n    // viewport size, overrides env defaults\n    \"viewport\": {\n      \"width\": 1200,\n      \"height\": 2000\n    }\n  }\n}\n```\n\n### Environment Variables\n\n| Name                | Default         |\n| ------------------- | --------------- |\n| S3_BUCKET\\*         |                 |\n| S3_REGION\\*         |                 |\n| S3_ACL              | `\"public-read\"` |\n| CHROMIUM_ARGS       | `\"[]\"`          |\n| TIMEOUT             | `\"30000\"`       |\n| IGNORE_HTTPS_ERRORS | `\"false\"`       |\n| VIEWPORT_WIDTH      | `\"1920\"`        |\n| VIEWPORT_HEIGHT     | `\"1200\"`        |\n| DEVICE_SCALE_FACTOR | `\"1\"`           |\n| IS_MOBILE           | `\"false\"`       |\n| IS_LANDSCAPE        | `\"false\"`       |\n\n## Deploy\n\n```yaml\n# serverless.yml\n\n# ...\ncustom:\n  s3Bucket: \u003cyour bucket name\u003e\n\nprovider:\n  # ...\n  layers:\n    # Replace \u003cversion\u003e with the latest version of chrome-aws-lambda-layer\n    # It depends on the region you are deploying.\n    # https://github.com/shelfio/chrome-aws-lambda-layer#available-regions\n    - arn:aws:lambda:${self:provider.region}:764866452798:layer:chrome-aws-lambda:\u003cversion\u003e\n\nfunctions:\n  captureScreenshot:\n    # ...\n    environment:\n      # configure the environment variables\n      VIEWPORT_WIDTH: \"1920\"\n      VIEWPORT_HEIGHT: \"1200\"\n      # ...\n    events:\n      # add any of the supported event source(s) you want to use\n      # the provided example uses SNS\n      - sns:\n          arn: !Ref chromdaTopic\n          topicName: ${self:custom.snsTopic}\n\nresources:\n  # following the example, we provision an SNS topic\n  chromdaTopic:\n    Type: AWS::SNS::Topic\n    Properties:\n      TopicName: ${self:custom.snsTopic}\n```\n\n## X-Ray\n\nAWS X-Ray support is provided and there are segments for Puppeteer navigation and screenshot:\n\n![AWS X-Ray screenshot](https://i.imgur.com/uYw5PhL.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flufzle%2Fchromda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flufzle%2Fchromda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flufzle%2Fchromda/lists"}