Sublime开发Chrome浏览器扩展程序_manifest.json配置与内容脚本编写-sublime-PHP中文网

Sublime开发Chrome浏览器扩展程序_manifest.json配置与内容脚本编写

尼克

发布： 2025-12-15 13:37:03

原创

866人浏览过

Sublime Text 可高效开发 Chrome 扩展，关键在于掌握 manifest.json（V3 必含 manifest_version、name、version、content_scripts）和内容脚本的沙箱机制；content.js 运行于网页 DOM 环境但隔离扩展上下文，需通过 chrome.runtime 通信，调试依赖 Chrome DevTools 的 Content Scripts 面板与 console.log 定位。

sublime开发chrome浏览器扩展程序_manifest.json配置与内容脚本编写

用 Sublime Text 开发 Chrome 扩展并不需要特殊插件，关键是理解 manifest.json 结构和内容脚本（content script）的加载逻辑。Sublime 只是高效编辑器，真正起作用的是 Chrome 的扩展机制。

manifest.json 必须字段与常见配置

manifest.json 是每个 Chrome 扩展的“身份证”，Chrome 加载扩展前会严格校验它。最低可用版本（Manifest V3）需包含以下字段：

manifest_version：必须为 3（V2 已废弃）
name：扩展名称，显示在 chrome://extensions 页面
version：语义化版本号，如 "1.0.0"，每次更新必须升级
content_scripts：定义哪些 JS/CSS 在哪些页面注入，核心配置项

一个典型示例：

{
  "manifest_version": 3,
  "name": "我的高亮助手",
  "version": "1.0.0",
  "description": "自动高亮页面中的关键词",
  "permissions": ["activeTab"],
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_idle"
  }]
}

登录后复制

注意："<all_urls>"</all_urls> 表示匹配所有网页，生产环境建议精确到域名（如 "https://example.com/*"），更安全也更易调试。

内容脚本（content.js）编写要点

内容脚本运行在网页上下文中，能直接操作 DOM，但无法访问扩展后台页变量或直接调用 chrome.* API（除少数如 chrome.runtime）。常见误区：

Docky AI

多合一AI浏览器助手，解答问题、绘制图片、阅读文档、强化搜索结果、辅助创作

100

查看详情

不能直接使用 console.log 查看输出？错——它会出现在目标网页的 DevTools Console 中（选中对应 tab）
不能访问页面已有的全局变量？对——内容脚本有独立执行环境，但可通过 document.createElement('script') 注入内联脚本间接通信
DOM 尚未加载就执行？用 run_at: "document_idle"（推荐）或监听 DOMContentLoaded

简单示例（content.js）：高亮当前页所有 “Sublime” 文本

const highlights = document.body.innerHTML.match(/Sublime/gi);
if (highlights) {
  const re = /Sublime/gi;
  document.body.innerHTML = document.body.innerHTML.replace(re, '<mark style="background: #ff9e44">Sublime</mark>');
}

登录后复制

Sublime 中提升开发效率的小技巧

虽无官方 Chrome 扩展插件，但可借助 Sublime 原生能力加速流程：

安装 JSON Schema 插件 + Chrome Manifest V3 Schema，实现 manifest.json 字段自动补全与校验
用 SideBarEnhancements 右键快速刷新已加载的扩展（先在 chrome://extensions 开启开发者模式，再点击「重新加载」）
设置自定义构建系统（Tools → Build System → New Build System），一键打开 Chrome 并加载扩展目录（需命令行参数 --load-extension=/path/to/your/ext）