Hey there! Let's tackle your Chrome extension challenges one by one—persisting user changes, cleaning up redundant code, and injecting dynamic CSS instead of tweaking DOM styles directly. Here's a step-by-step solution:

The core issue here is that your current setup doesn't store user preferences. Use Chrome's chrome.storage.local API to save selections—this storage persists across browser sessions and page reloads.

Example Implementation: #

In your popup/settings UI script:

When a user selects a color or font, save the value to storage before applying it:

// For background color picker
colorPicker.onchange = function() {
  const selectedColor = this.value;
  // Save to persistent storage
  chrome.storage.local.set({ backgroundColor: selectedColor }, () => {
    // Apply style to active tab
    applyDynamicCSS(`body { background-color: ${selectedColor}; }`);
  });
};

// For font selector (similar pattern)
fontSelector.onchange = function() {
  const selectedFont = this.value;
  chrome.storage.local.set({ fontFamily: selectedFont }, () => {
    applyDynamicCSS(`* { font-family: "${selectedFont}" !important; }`);
  });
};

In your content script (content.js):

On page load, fetch saved preferences and apply them automatically:

// Load saved styles when the page initializes
chrome.storage.local.get(['backgroundColor', 'fontFamily'], (result) => {
  let dynamicCSS = '';
  
  if (result.backgroundColor) {
    dynamicCSS += `body { background-color: ${result.backgroundColor}; }`;
  }
  if (result.fontFamily) {
    dynamicCSS += `* { font-family: "${result.fontFamily}" !important; }`;
  }

  if (dynamicCSS) {
    // Inject the compiled CSS into the page
    const styleTag = document.createElement('style');
    styleTag.textContent = dynamicCSS;
    document.head.appendChild(styleTag);
  }
});

Your original code repeats chrome.tabs.query and script execution logic for every element. Wrap this logic into a single reusable function to clean up redundancy:

// Reusable function to inject CSS into the active tab
function applyDynamicCSS(cssString) {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    // Use chrome.tabs.insertCSS for efficient style injection
    chrome.tabs.insertCSS(tabs[0].id, { code: cssString });
  });
}

Now you can call this function for any style change—no more duplicate tab querying or script execution code.

You don't need to create a physical .css file to inject styles. Chrome's chrome.tabs.insertCSS API accepts raw CSS strings directly, which is perfect for dynamic styles. If you want to let users download their custom styles as a file (a nice extra), you can generate a Blob on demand:

Example: Generate a downloadable CSS file #

function generateCustomCSSFile() {
  chrome.storage.local.get(['backgroundColor', 'fontFamily'], (result) => {
    let cssContent = '';
    
    if (result.backgroundColor) {
      cssContent += `body { background-color: ${result.backgroundColor}; }\n`;
    }
    if (result.fontFamily) {
      cssContent += `* { font-family: "${result.fontFamily}" !important; }\n`;
    }

    // Create a Blob from the CSS content
    const cssBlob = new Blob([cssContent], { type: 'text/css' });
    const blobUrl = URL.createObjectURL(cssBlob);

    // Trigger download
    const downloadLink = document.createElement('a');
    downloadLink.href = blobUrl;
    downloadLink.download = 'custom-page-styles.css';
    downloadLink.click();

    // Clean up the Blob URL
    URL.revokeObjectURL(blobUrl);
  });
}

// Attach to a download button in your UI
downloadButton.addEventListener('click', generateCustomCSSFile);

For regular in-page injection, sticking with insertCSS or the content script's style tag approach is simpler and more efficient than generating files.

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