{"id":20629735,"url":"https://github.com/pb2204/google-image-fetcher","last_synced_at":"2025-07-17T10:34:38.092Z","repository":{"id":196155283,"uuid":"694808933","full_name":"PB2204/google-image-fetcher","owner":"PB2204","description":"Google Image Fetcher is a JavaScript library that simplifies the process of fetching and saving images from Google Search using the Custom Search JSON API.","archived":false,"fork":false,"pushed_at":"2023-09-23T11:22:45.000Z","size":114,"stargazers_count":20,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-04T13:27:00.767Z","etag":null,"topics":["angular","collaborate","ghdesktop","github","github-campus-experts","github-codespaces","github-pages","gitkraken","gitlens","hacktoberfest","jetbrains","learn","replit","student-vscode"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/google-image-fetcher","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/PB2204.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2023-09-21T18:30:14.000Z","updated_at":"2024-10-09T06:02:21.000Z","dependencies_parsed_at":"2025-04-15T18:19:17.528Z","dependency_job_id":"7ffd4c45-5259-4473-8b85-97a0f165defd","html_url":"https://github.com/PB2204/google-image-fetcher","commit_stats":null,"previous_names":["pb2204/google-image-fetcher"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/PB2204/google-image-fetcher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PB2204%2Fgoogle-image-fetcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PB2204%2Fgoogle-image-fetcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PB2204%2Fgoogle-image-fetcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PB2204%2Fgoogle-image-fetcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PB2204","download_url":"https://codeload.github.com/PB2204/google-image-fetcher/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PB2204%2Fgoogle-image-fetcher/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265595622,"owners_count":23794758,"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":["angular","collaborate","ghdesktop","github","github-campus-experts","github-codespaces","github-pages","gitkraken","gitlens","hacktoberfest","jetbrains","learn","replit","student-vscode"],"created_at":"2024-11-16T14:05:50.516Z","updated_at":"2025-07-17T10:34:38.052Z","avatar_url":"https://github.com/PB2204.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**Google Image Fetcher** is a JavaScript library that simplifies the process of fetching and saving images from Google Search using the **Custom Search JSON API**.\n\n## Motive Of The Project\n\nFrontend developers often face the challenge of sourcing images for their websites when there is no graphic designer available on the team. This JavaScript library aims to solve that problem by providing an easy-to-use solution for fetching and downloading images from Google.\n\nYou can use this library without any prior knowledge of JavaScript programming, making it accessible to both developers and non-developers.\n\nAfter following the steps outlined below, you'll be able to download images based on your query and view the image URLs in the terminal.\n\n## Structure Of The Project\n\n```bash\ngoogle-image-fetcher/\n│   │\n│   ├── node_modules/\n│   │   │   │\n│   │   │   ├── node-fetch/\n│   │   │   │   │\n│   │   │   │   ├── lib/\n│   │   │   │   │   │\n│   │   │   │   │   ├── index.es.js\n│   │   │   │   │   ├── index.js\n│   │   │   │   │   └── index.mjs\n│   │   │   │   │\n│   │   │   │   ├── browser.js\n│   │   │   │   ├── LICENSE.md\n│   │   │   │   ├── package.json\n│   │   │   │   └── README.md\n│   │   │   │\n│   │   │   ├── tr46/\n│   │   │   │   │\n│   │   │   │   ├── lib/\n│   │   │   │   │   │\n│   │   │   │   │   ├── .gitkeep\n│   │   │   │   │   └── mappingTable.json\n│   │   │   │   │\n│   │   │   │   ├── .npmignore\n│   │   │   │   ├── index.js\n│   │   │   │   └── package.json\n│   │   │   │\n│   │   │   ├── webidl-conversations/\n│   │   │   │   │\n│   │   │   │   ├── lib/\n│   │   │   │   │   │\n│   │   │   │   │   └── index.js\n│   │   │   │   │\n│   │   │   │   ├── LICENSE.md\n│   │   │   │   ├── package.json\n│   │   │   │   └── README.md\n│   │   │   └── whatwg-url/\n│   │   │       │\n│   │   │       ├── lib/\n│   │   │       │   │\n│   │   │       │   ├── public-api.js\n│   │   │       │   ├── URL-impl.js\n│   │   │       │   ├── url-state-machine.js\n│   │   │       │   ├── URL.js\n│   │   │       │   └── utils.js\n│   │   │       │\n│   │   │       ├── LICENSE.txt\n│   │   │       ├── package.json\n│   │   │       └── README.md\n│   │   └── .package-lock.js\n│   │\n│   ├── google-image-fetcher.js\n│   ├── package-lock.json\n│   ├── package.json\n│   └── README.md\n│\n├── CONTRIUTING.md\n├── LEARN.md\n├── LICENSE\n└── README.md\n```\n\n## Installation\n\nYou can install the library using npm:\n\n```bash\nnpm install google-image-fetcher\n```\n\n## Getting Started\n\n1. Create a new JavaScript (.js) file in your project folder.\n\n2. Copy and paste the following code into your .js file:\n\n   ```javascript\n    const GoogleImageFetcher = require('google-image-fetcher');\n\n    // Create an instance of GoogleImageFetcher (no need to pass API Key and CX ID here)\n    const imageFetcher = new GoogleImageFetcher();\n\n    // Define the query and the save folder (optional)\n    const query = 'YOUR_QUERY';\n    const saveFolder = 'YOUR_FOLDER_NAME';\n\n    // Call the fetchImages method to fetch and save images\n    imageFetcher.fetchImages(query, saveFolder);\n   ```\n\n3. Replace `YOUR_QUERY` with the desired image search query and `YOUR_FOLDER_NAME` with the name of the folder where you want to save the downloaded images. This folder will be created in your project's current directory.\n\nNow you're ready to use the library to fetch and save images.\n\n## Getting Started With React\n\nIn a React application, you would typically use JavaScript modules and ES6 imports instead of `require`. Here's the equivalent code for your example using ES6 imports in a React component:\n\n```javascript\nimport React, { useEffect } from 'react';\nimport GoogleImageFetcher from 'google-image-fetcher';\n\nconst YourComponent = () =\u003e {\n  useEffect(() =\u003e {\n    // Create an instance of GoogleImageFetcher (no need to pass API Key and CX ID here)\n    const imageFetcher = new GoogleImageFetcher();\n\n    // Define the query and the save folder (optional)\n    const query = 'YOUR_QUERY';\n    const saveFolder = 'YOUR_FOLDER_NAME';\n\n    // Call the fetchImages method to fetch and save images\n    imageFetcher.fetchImages(query, saveFolder);\n\n    // Make sure to include any necessary dependencies in the dependency array\n  }, []);\n\n  return (\n    \u003cdiv\u003e\n      {/* Your React component content */}\n    \u003c/div\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\nIn this code:\n\n- We're using the `import` statement to import `GoogleImageFetcher` from the 'google-image-fetcher' package.\n- Inside a functional component (`YourComponent`), we use the `useEffect` hook to run code when the component mounts. This is similar to the code you provided that runs when the module is imported.\n- We create an instance of `GoogleImageFetcher` and then call `fetchImages` with your desired `query` and `saveFolder`. This code will execute when the component is mounted due to the empty dependency array `[]`.\n- You can replace `\u003cdiv\u003e{/* Your React component content */}\u003c/div\u003e` with your actual component content.\n\nRemember to include any necessary dependencies in the dependency array of the `useEffect` hook to ensure the code runs only when those dependencies change. If you need to execute the code in response to specific events or user actions, you can adjust the `useEffect` accordingly.\n\n## Getting Started With Angular A TypeScript Based Framework\n\nIn an Angular application, you would follow a different structure and syntax compared to React. Here's how you can integrate the code for fetching images using `google-image-fetcher` into an Angular component:\n\nAssuming you have an Angular project set up, follow these steps:\n\n1. **Import and Use in an Angular Component:**\n\n   Create an Angular component where you want to use `google-image-fetcher`. Import the library and use it in your component's TypeScript file. Below is an example of how to do this:\n\n   ```typescript\n   // Import statements\n   import { Component, OnInit } from '@angular/core';\n   import { GoogleImageFetcher } from 'google-image-fetcher';\n\n   @Component({\n     selector: 'app-image-fetcher',\n     template: `\n       \u003cdiv\u003e\n         \u003c!-- Your Angular component content --\u003e\n       \u003c/div\u003e\n     `,\n   })\n   export class ImageFetcherComponent implements OnInit {\n     constructor() {}\n\n     ngOnInit() {\n       // Create an instance of GoogleImageFetcher (no need to pass API Key and CX ID here)\n       const imageFetcher = new GoogleImageFetcher();\n\n       // Define the query and the save folder (optional)\n       const query = 'YOUR_QUERY';\n       const saveFolder = 'YOUR_FOLDER_NAME';\n\n       // Call the fetchImages method to fetch and save images\n       imageFetcher.fetchImages(query, saveFolder);\n     }\n   }\n   ```\n\n   In this code:\n\n   - We import the `GoogleImageFetcher` class from the 'google-image-fetcher' package.\n   - We create an Angular component (`ImageFetcherComponent`) where we use `GoogleImageFetcher` inside the `ngOnInit` lifecycle hook, which runs when the component initializes.\n   - We define the `query` and `saveFolder` variables with your desired values.\n   - We create an instance of `GoogleImageFetcher` and call the `fetchImages` method to fetch and save images.\n   - You can replace the template content with your actual Angular component content.\n\n2. **Add the Component to Your Angular Module:**\n\n   Make sure to add your `ImageFetcherComponent` to the declarations array of your Angular module (e.g., `app.module.ts`) to make it available for use in your application.\n\n   ```typescript\n   import { NgModule } from '@angular/core';\n   import { BrowserModule } from '@angular/platform-browser';\n\n   import { AppComponent } from './app.component';\n   import { ImageFetcherComponent } from './image-fetcher.component'; // Import your component\n\n   @NgModule({\n     declarations: [AppComponent, ImageFetcherComponent], // Add your component here\n     imports: [BrowserModule],\n     bootstrap: [AppComponent],\n   })\n   export class AppModule {}\n   ```\n\n3. **Include in Template:**\n\n   Include your `ImageFetcherComponent` in the template of another Angular component or in your Angular routing configuration as needed.\n\nNow, your Angular component is set up to use `google-image-fetcher`. When you navigate to the component or use it in your application, the code inside `ngOnInit` will be executed to fetch and save images.\n\n## Configuration\n\nBefore using the library, make sure to obtain an API Key and CX ID from the Google Custom Search JSON API. Replace the values in the code with your actual credentials.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](https://github.com/PB2204/google-image-fetcher/blob/main/LICENSE) file for details.\n\n## Contributing\n\nContributions are welcome! Please read our [Contributing Guidelines](https://github.com/PB2204/google-image-fetcher/blob/main/CONTRIBUTING.md) for more details.\n\n## Acknowledgments\n\n- Thanks to [Google](https://www.google.com/) for providing the Custom Search API.\n\n## Contact\n\nFor any questions or feedback, feel free to contact [Pabitra Banerjee](mailto:rockstarpabitra2204@gmail.com).\n\n# Happy Coding 🚀","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpb2204%2Fgoogle-image-fetcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpb2204%2Fgoogle-image-fetcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpb2204%2Fgoogle-image-fetcher/lists"}