How to Build a Google Chrome Full-Page Screenshot Extension with Python and Selenium

Google Chrome is a popular browser with extensibility; this guide shows how to develop a Chrome extension using Python and Selenium to capture full-page screenshots.

Project Overview – The extension consists of a Chrome extension part (manifest.json, content_script.js, background_script.js) and a Python script (screenshot.py) that performs the actual screenshot using Selenium.

Preparation – Ensure Python, Chrome, and the Selenium library with ChromeDriver are installed.

Project Structure – The directory includes:

- chrome_extension/
  - manifest.json
  - content_script.js
  - background_script.js
- screenshot.py

Chrome Extension Implementation

manifest.json defines the extension name, version, permissions, and links the background and content scripts:

{
  "manifest_version": 2,
  "name": "截长图插件",
  "version": "1.0",
  "permissions": ["tabs", "activeTab"],
  "background": {
    "scripts": ["background_script.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content_script.js"],
      "run_at": "document_end"
    }
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon_16.png",
      "48": "icon_48.png",
      "128": "icon_128.png"
    }
  },
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  }
}

content_script.js listens for a capture request and uses chrome.tabs.captureVisibleTab to obtain a data URL:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'capture') {
    chrome.tabs.captureVisibleTab(function(dataUrl) {
      sendResponse({ dataUrl: dataUrl });
    });
  }
});

background_script.js triggers the capture when the extension icon is clicked and downloads the resulting image:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id, { action: 'capture' }, function(response) {
    if (response && response.dataUrl) {
      chrome.downloads.download({ url: response.dataUrl });
    }
  });
});

Python Script Implementation – screenshot.py uses Selenium to launch a headless Chrome instance, navigate to a URL, and save a full-page screenshot:

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

def capture_full_page_screenshot(url, output_path):
    chrome_options = Options()
    chrome_options.add_argument('--headless')
    chrome_options.add_argument('--disable-gpu')
    chrome_options.add_argument('--no-sandbox')
    driver = webdriver.Chrome(options=chrome_options)
    driver.get(url)
    driver.save_screenshot(output_path)
    driver.quit()
    return True

if __name__ == '__main__':
    url = 'https://www.example.com'
    output_path = 'screenshot.png'
    capture_full_page_screenshot(url, output_path)
    print(f'Screenshot saved to {output_path}')

Installation and Usage – Load the unpacked extension in Chrome’s extensions page with developer mode enabled, then click the extension icon on any page to capture and download the full-page screenshot.

Conclusion – By combining a Chrome extension with a Python Selenium script, you can automate full-page screenshot capture and save the images locally, providing a useful tool for web archiving and testing.