Chrome插件修改HTTP Header处理图片跨域：background-image失效求更优方案

First off, nice work getting the <img> tag case working with the CORS header modification in your extension! The issue with background-image is that the browser doesn't treat those resources the same way as explicit <img> elements—even with the right CORS headers, the "image object" you get from computedStyleMap() doesn't carry the cross-origin permissions needed for getImageData().

Your current approach of extracting the URL and creating a new <img> is the right fundamental path, but we can streamline it to be cleaner and more reliable. Here's a refined approach:

Fetch + Blob: A More Robust Workflow #

Instead of directly creating an <img> with the remote URL, use the Fetch API to grab the image as a Blob first. This gives you explicit control over CORS mode and avoids edge cases like cached images not respecting the crossOrigin attribute.

async function extractBackgroundImagePixels(element) {
  // Extract the background image URL from computed styles
  const bgImageStr = element.computedStyleMap().get('background-image').toString();
  const urlMatch = bgImageStr.match(/url\("?([^")]+)"?/);
  
  if (!urlMatch) {
    console.warn('No valid background image URL found');
    return null;
  }

  let imageUrl = urlMatch[1];
  // Normalize protocol (adjust based on your extension's config)
  if (luoism.config.ishttps) {
    imageUrl = imageUrl.replace(/^http:/, 'https:');
  }

  try {
    // Fetch the image with explicit CORS mode
    const response = await fetch(imageUrl, { mode: 'cors' });
    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
    
    // Convert response to Blob and create a local object URL
    const blob = await response.blob();
    const img = new Image();
    img.src = URL.createObjectURL(blob);

    // Wait for the image to load
    await new Promise((resolve, reject) => {
      img.onload = () => resolve(img);
      img.onerror = () => reject(new Error('Failed to load image from Blob'));
    });

    // Draw to Canvas and get pixel data
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    const pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;

    // Clean up the object URL to free memory
    URL.revokeObjectURL(img.src);
    return pixelData;
  } catch (err) {
    console.error('Error processing background image:', err);
    return null;
  }
}

// Usage example
const targetDiv = document.getElementById('imgwiki');
extractBackgroundImagePixels(targetDiv).then(pixels => {
  if (pixels) {
    // Do something with your pixel data here
    console.log('Extracted pixel data:', pixels);
  }
});

Why This Is Better Than Your Current Code #

• Explicit CORS Control: The fetch call uses mode: 'cors' to ensure we're adhering to CORS rules, which avoids unexpected issues with cached resources.
• Cleaner Async Flow: Uses top-level async/await (no need for the IIFE wrapper) and simplifies the image loading promise.
• Memory Management: Cleans up the Blob object URL with URL.revokeObjectURL() to prevent memory leaks.
• Error Handling: Centralized error catching makes it easier to debug issues with fetching or loading the image.

Is There a Way to Avoid Creating an <img> Entirely? #

Unfortunately, no. The browser's security model requires that cross-origin images are explicitly loaded with CORS permissions (either via a crossOrigin attribute on an <img> or via a CORS-enabled fetch) before they can be used in Canvas for pixel-level operations like getImageData(). Background images loaded via CSS don't get this permission automatically, so converting them to a properly permissioned image object is mandatory.

Your existing extension header modification is still doing the heavy lifting by ensuring the server allows cross-origin requests—this streamlined method just makes the client-side handling cleaner.

内容的提问来源于stack exchange，提问作者defend orca