【干货】Chrome插件(扩展)开发全攻略
内容提要
本文系统讲解Chrome扩展开发，涵盖manifest.json配置、content-scripts、background、popup、injected-script等核心概念，以及browserAction、右键菜单、devtools、options、omnibox、桌面通知等展示形式，并说明五类JS的权限差异、消息通信、动态注入、本地存储、webRequest、国际化和打包发布等实用技巧。
延伸解读
五类JS的权限与调试差异
文章将插件JS分为injected script、content-script、popup、background和devtools五类，并对比了API访问、DOM操作、跨域能力。其中background权限最高，几乎可调用所有扩展API且能跨域；content-script只能访问部分API且不能访问页面JS；popup生命周期短，不适合长任务。调试时，background错误隐蔽，需主动打开其控制台查看。
消息通信机制的选择
插件各JS间通信方式不同：popup与background可直接通过getBackgroundPage互访；content-script与background用runtime.sendMessage或tabs.sendMessage；injected script与content-script只能通过window.postMessage或自定义DOM事件。短连接适合简单请求响应，长连接（connect）适合持续双向通信。注意content-script向popup发消息时popup必须打开。
开发中的常见陷阱
文章提醒几个易错点：content-scripts注入的CSS优先级极高，可能意外影响网站样式；插件不支持内联JavaScript，需用JS绑定事件；background报错不会主动提示，需手动查看控制台；popup中不宜写长时间运行的代码。此外，动态注入JS需在web_accessible_resources中声明资源，否则页面无法加载。
存储与国际化实践
本地存储推荐使用chrome.storage而非localStorage，因为它是插件全局的，且sync模式可随用户账号自动同步。国际化需在_locales下按语言建立messages.json，并在manifest中设置default_locale，通过__MSG_xxx__或chrome.i18n.getMessage引用。打包发布需注册开发者账号并支付5美元费用。
Q&A
Chrome插件开发中，manifest.json文件必须包含哪些字段？
manifest.json是Chrome插件最重要的配置文件，必须放在根目录。其中manifest_version、name、version这3个字段是必不可少的，description和icons是推荐的。
content-scripts和injected-script有什么区别？
content-scripts是通过配置方式向页面注入JS和CSS，与原始页面共享DOM但不共享JS，不能访问绝大部分chrome.xxx.api（除了extension、i18n、runtime、storage）。injected-script是通过DOM操作动态注入的JS，可以访问页面JS，但需要通过window.postMessage或自定义DOM事件与content-script通信。
Chrome插件中background和popup的生命周期有什么不同？
background是常驻页面，生命周期最长，随浏览器打开而打开，关闭而关闭。popup是点击图标时打开的小窗口，焦点离开立即关闭，生命周期很短，因此需要长时间运行的代码不要写在popup中。
Chrome插件如何实现国际化？
在插件根目录新建_locales文件夹，下面创建语言文件夹（如en、zh_CN），每个文件夹放入messages.json，并在manifest中设置default_locale。在manifest和CSS中通过__MSG_messagename__引入，JS中通过chrome.i18n.getMessage("helloWorld")获取。
Chrome插件中如何动态注入JS或CSS？
可以通过chrome.tabs.executeScript动态执行JS代码或文件，通过chrome.tabs.insertCSS动态注入CSS代码或文件。需要在manifest中申请tabs、http://*/*、https://*/*等权限。
Chrome插件开发中，5种JS类型分别是什么？它们的权限有何不同？
5种JS类型：injected script、content-script、popup js、background js、devtools js。权限对比：injected script不能访问任何扩展API；content script只能访问extension、runtime等部分API；popup js和background js可访问绝大部分API（除了devtools系列）；devtools js只能访问devtools、extension、runtime等部分API。
Chrome插件中如何实现消息通信？
通信方式包括：popup和background之间可直接调用方法或通过chrome.extension.getBackgroundPage()；popup/background向content-script发送消息用chrome.tabs.sendMessage，content-script用chrome.runtime.onMessage监听；content-script主动发消息给后台用chrome.runtime.sendMessage；injected-script和content-script之间通过window.postMessage或自定义DOM事件通信。还支持长连接（chrome.tabs.connect和chrome.runtime.connect）。
Chrome插件中如何覆盖浏览器默认的新标签页？
在manifest.json中配置chrome_url_overrides字段，例如"newtab": "newtab.html"，即可用自定义页面替换默认的新标签页。注意一个扩展只能替代一个页面，且不能替代隐身窗口的新标签页。
