Chrome扩展开发：能否允许用户注入本地CSS文件至网页？

完全可以实现让用户添加本地CSS文件注入网页的功能，并非只能使用扩展自身附带的文件，以下是几种可行方案：

• 文件选择器上传注入
  在扩展的UI（比如popup页面）中添加文件选择控件（<input type="file" accept=".css">），监听用户的文件选择事件，通过FileReader读取选中的本地CSS文件内容，再调用浏览器扩展API（如Chrome的chrome.scripting.insertCSS、Firefox的browser.scripting.insertCSS）将读取到的CSS文本注入到目标网页。
  示例代码片段：

  // 监听文件选择
  document.querySelector('input[type="file"]').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const cssText = await file.text();
    // 注入到当前活跃标签页
    const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
    await chrome.scripting.insertCSS({
      target: {tabId: tab.id},
      css: cssText
    });
  });
  

• 本地文件路径读取注入（需权限）
  若要支持用户输入本地CSS文件路径来读取，需要在扩展的manifest.json中申请file://*的主机权限：

  "host_permissions": ["file:///*"]
  

  之后可以通过fetch或XMLHttpRequest读取对应路径的文件内容再注入，但这种方式受浏览器安全限制较多（比如Chrome需要用户手动开启相关权限），稳定性不如文件选择器方案。

• 持久化用户自定义CSS
  可以使用浏览器扩展的存储API（如chrome.storage.local）保存用户上传的CSS内容，当用户打开目标网页时，自动从存储中取出内容并注入，实现持久化的自定义样式效果。

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