浏览器扩展开发全指南：从零到 Chrome 商店上架

md-reader/
├── manifest.json
├── background.js       # Service Worker
├── content.js          # Content Script
├── content.css         # 注入的样式
├── popup.html          # 弹窗界面
├── popup.js
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

{
  "manifest_version": 3,
  "name": "Markdown Reader",
  "version": "1.0.0",
  "description": "自动渲染 .md 文件为漂亮的 HTML",
  
  "permissions": ["storage", "activeTab"],
  "host_permissions": ["*://*.github.com/*", "*://*.gitlab.com/*"],
  
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  
  "content_scripts": [{
    "matches": ["*://*/*.md", "*://*/*.md?*"],
    "js": ["marked.min.js", "content.js"],
    "css": ["content.css"],
    "run_at": "document_end"
  }],
  
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

// background.js
// 监听安装事件
chrome.runtime.onInstalled.addListener(({ reason }) => {
  if (reason === 'install') {
    chrome.storage.local.set({
      theme: 'github',
      fontSize: '14px'
    });
  }
});

// 监听来自 content script 的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'getSettings') {
    chrome.storage.local.get(['theme', 'fontSize'], sendResponse);
    return true; // 异步响应
  }
});

// content.js
(async () => {
  // 获取设置
  const settings = await chrome.runtime.sendMessage({ type: 'getSettings' });
  
  // 获取页面原始 Markdown
  const md = document.body.innerText;
  
  // 用 marked 渲染
  const html = marked.parse(md);
  
  // 替换页面内容
  document.body.innerHTML = html;
  
  // 注入样式
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = chrome.runtime.getURL('content.css');
  document.head.appendChild(link);
  
  // 注入代码高亮
  document.querySelectorAll('pre code').forEach(block => {
    hljs.highlightElement(block);
  });
})();

# 1. 打包成 .zip
zip -r md-reader.zip md-reader/

# 2. 去 Chrome 开发者控制台
# https://chrome.google.com/webstore/devconsole

# 3. 注册（需 $5 一次性费用）
# 4. 上传 .zip
# 5. 填写商店信息：
#    - 名称、描述、分类
#    - 至少 1 张 1280x800 截图
#    - 隐私政策 URL
# 6. 提交审核（通常 1-3 个工作日）