如何基于Chrome扩展存储数据条件注入CSS文件到页面

要实现基于chrome.storage.sync中的布尔值条件注入CSS文件，你可以通过内容脚本创建link标签引入扩展内的CSS文件来实现，具体步骤如下：

1. 配置manifest.json #

首先确保你的扩展manifest中声明了必要的权限和可访问资源：

{
  "manifest_version": 3,
  // 其他基础配置（name、version等）
  "content_scripts": [
    {
      "matches": ["<你的目标URL匹配规则>"],
      "js": ["page.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["custom-styles.css"], // 替换为你的CSS文件名
      "matches": ["<你的目标URL匹配规则>"]
    }
  ],
  "permissions": ["storage"]
}

• web_accessible_resources用于将扩展内的CSS文件暴露给目标页面，确保内容脚本能通过URL访问到它。
• permissions添加storage以允许读取和监听存储变化。

2. 编写page.js逻辑 #

在内容脚本中读取存储状态，动态插入/移除CSS文件：

// page.js
// 定义样式标签的唯一ID，用于后续判断和操作
const STYLE_TAG_ID = 'extension-custom-styles';

// 检查状态并处理样式注入/移除
async function handleStyleInjection() {
  const { enabled } = await chrome.storage.sync.get('enabled');
  const existingStyleTag = document.getElementById(STYLE_TAG_ID);

  if (enabled) {
    // 未注入则创建link标签引入CSS文件
    if (!existingStyleTag) {
      const linkTag = document.createElement('link');
      linkTag.id = STYLE_TAG_ID;
      linkTag.rel = 'stylesheet';
      linkTag.href = chrome.runtime.getURL('custom-styles.css');
      document.head.appendChild(linkTag);
    }
  } else {
    // 已注入则移除样式标签
    if (existingStyleTag) {
      existingStyleTag.remove();
    }
  }
}

// 页面加载时初始化执行
handleStyleInjection();

// 监听存储变化，实时同步样式状态
chrome.storage.onChanged.addListener((changes, area) => {
  if (area === 'sync' && changes.enabled) {
    handleStyleInjection();
  }
});

关键说明 #

• 为什么不用chrome.scripting.insertCSS？该API属于后台脚本权限，内容脚本无法直接调用；而通过chrome.runtime.getURL获取扩展内CSS的可访问URL，再用link标签插入，是内容脚本中注入CSS文件的标准方式。
• 唯一ID的作用：避免重复注入相同的CSS文件，同时能精准移除已加载的样式。
• 存储监听：确保用户在弹窗修改enabled状态后，页面能实时更新样式，无需刷新。

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