https://github.com/serima/ogp-image-copier
A Chrome extension that allows you to preview and copy OGP (Open Graph Protocol) images from the current page
https://github.com/serima/ogp-image-copier
Last synced: 4 months ago
JSON representation
A Chrome extension that allows you to preview and copy OGP (Open Graph Protocol) images from the current page
- Host: GitHub
- URL: https://github.com/serima/ogp-image-copier
- Owner: serima
- Created: 2025-06-01T06:15:57.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-01T06:16:24.000Z (about 1 year ago)
- Last Synced: 2025-10-13T16:37:00.788Z (8 months ago)
- Language: HTML
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# OGP Image Copier
A Chrome extension that allows you to preview and copy OGP (Open Graph Protocol) images from the current page.
## Features
- 📸 **Automatic OGP Detection**: Automatically finds and displays OGP images from web pages
- 🖼️ **Image Preview**: View images directly in the popup
- 📋 **URL Copying**: Copy image URLs to clipboard
- 🎨 **Image Copying**: Copy image data directly to clipboard
- ✨ **Beautiful UI**: Modern and user-friendly design
## Supported Image Sources
The extension searches for images in the following meta tags (in priority order):
1. `meta[property="og:image"]`
2. `meta[property="og:image:url"]`
3. `meta[name="og:image"]`
4. `meta[name="twitter:image"]`
5. `meta[property="twitter:image"]`
6. `meta[name="twitter:image:src"]`
## Installation
### From Chrome Web Store (Not Published Yet)
Currently in development - manual installation required.
### Manual Installation
1. Download or clone this repository
2. Open Chrome and navigate to `chrome://extensions/`
3. Enable "Developer mode" in the top right
4. Click "Load unpacked"
5. Select the downloaded folder
## Usage
1. Navigate to a webpage with OGP images
2. Click the extension icon in the browser toolbar
3. Preview the detected image
4. Use the available buttons:
- **📋 Copy Image URL**: Copy the image URL to clipboard
- **🖼️ Copy Image**: Copy the image data to clipboard
## File Structure
```
ogp-image-copier/
├── manifest.json # Extension configuration
├── content.js # Script to extract OGP info from pages
├── popup.html # Popup interface HTML
├── popup.js # Popup functionality and interactions
└── README.md # This file
```
## Technical Specifications
- **Manifest Version**: 3
- **Required Permissions**:
- `activeTab`: Access to active tab information
- `clipboardWrite`: Write access to clipboard
- **Supported Browsers**: Chrome (Manifest V3 compatible)
## Development
### Setup Development Environment
1. Clone the repository:
```bash
git clone https://github.com/serima/ogp-image-copier.git
cd ogp-image-copier
```
2. Load as unpacked extension in Chrome (same as manual installation steps above)
### Architecture
- `manifest.json`: Extension metadata and permissions configuration
- `content.js`: Injected script that extracts OGP information from web pages
- `popup.html`: User interface displayed when extension icon is clicked
- `popup.js`: Controls popup behavior and user interactions
## License
MIT License
## Contributing
Pull requests and issues are welcome.
## Known Issues
- Some sites may fail to load images due to CORS restrictions
- Relative URL resolution may not handle all edge cases correctly
## Changelog
### v1.0
- Initial release
- OGP image detection and display
- Image URL and image data copying functionality
- Responsive popup UI design