写了几个chrome扩展，也算顺手了。正好上周收集文档写md时，觉得页面拷贝转成md格式保存太啰嗦，就顺手写了个。梳理下需求和插件如何实现的过程，采用问答式来写此文。
以下markdown clipboard插件简称为mc
-
github仓库地址： markdown clipboard github
-
Chrome商店下载地址 ： markdown clipboard extension
Q：如何写个Chrome插件
A：很简单，一个基本目录如下：
.
├── background.js
└── manifest.json
Q：为什么这么简单？
A：是的，这是最小扩展所需要的
Q：manifest.json是什么
A：一个清单文件，chrome扩展必备的
Q：那文件包含哪些内容
A：我们看一个真实的，看下markdown-clipboard的清单配置：
{
"manifest_version": 2,
"name": "markdown clipboard",
"short_name": "md",
"description": "copy content with md url format",
"version": "1.2.0",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "markdown clipboard",
"default_icon": "markdown.png"
},
"icons": {
"128": "markdown.png",
"16": "markdown.png",
"48": "markdown.png"
},
"commands": {
"base": {
"description": "ClipBoard Copy",
"suggested_key": {
"default": "Alt+C",
"mac": "Alt+C"
}
}
},
"permissions": [
"activeTab",
"tabs",
"http://*/*",
"https://*/*"
]
}
只要简单介绍下你就会明白。
manifest_version这是chrome-extension扩展官方推荐的版本，不需要也不要更改name,short_name,version,description发布插件的基本信息呀：名称，简称，版本，描述background:指定background文件browser_action:这里就是插件安装后，你的导航栏显示的插件图标等信息icons:安装扩展，扩展列表显示的iconcommands:如需要快捷键，这里可设置，比如目前插件默认的是Alt + C快捷操作permissions:你的插件权限范围，需要在这里设置，比如在http,https及当前激活activeTab生效，就写入，具体有哪些可以参考官方文档
Q：background是做什么用的
A：故名思议，background，有背景。你的扩展实现功能，他是最大的后台。全程参与，可以认为这个是扩展的入口文件。background可以是一个html页面包含脚本和样式，也可以直接就是一个脚本文件，本例就只用到一个background.js即可。但是 background不能直接操作打开的tab页的dom.
Q：教练我听说content_script可以嵌入页面，直接操作浏览页面的dom，为什么你前边不说？
A：没错，但是不是所有的牛奶都叫特仑苏，也不是所有的扩展都需要用到它。content_script是无毒无害，他能操作页面dom，同时和每一个页面自己的js不冲突，都是隔离开的，所以可以为所欲为。但是...
Q：但是什么？这么好怎么会有问题，你是不是想骗我
A：呃，有一个问题：因为content_script会嵌入到页面中。所以有一种情况，当页面已经打开的情况下，此时你安装一个扩展。这时候已经打开的tab页面就默认不会嵌入content_script,所以会让用户误以为插件不管用，然后各种心里怒骂：插件作者骗人，插件垃圾。这种情况其实需要刷新页面后，才能嵌入content_script.
Q：那我理解为什么mc不使用content_script,为了更好的交互？
A：是的，为了省去不必要的刷新页面，mc使用了动态插入脚本
Q：听起来很高级，怎么用
A：请看代码：
chrome.commands.onCommand.addListener(function(command) {
chrome.tabs.executeScript(null, {file: "markdown_insert.js"}, ()=>{});
});
Q：怎么又是这么简单？
A：是的，技术本身就是一件简单的事情，只是我们需要根据需求，把各种简单的事情组合在一起，适用于最合适的场景
Q： 教练你说这么简单，我看看源码就明白了，给我几个链接吧
Q：再给几个官方文档，我就可以自己学着用了
A：嗯，甚好，推荐两个吧。
综述--扩展开发文档：360浏览器汉化版，别急，没别的意思，是360，也是chrome
Q：那你再随便讲讲mc做了些什么
A：好，慢慢来.，一句话就是快速将网页文本，链接，图片转为markdown语法，做了一些扩展。
- 鼠标选择需要拷贝的内容: 文本，链接，图片, 甚至可以什么都不选
- 使用默认快捷键拷贝内容到剪切板:
Alt + C, - 拷贝markdown格式到你想要拷贝的地方去
Q：为什么不使用Ctrl + C常规的复制快捷键
A：因为操作更改剪切板内容了，插件原则上不能也不应该影响正常使用习惯，所以单独起了快捷键
Q：不同情况，剪切板返回的内容有区别吗
A：见下
- 不选择任何内容:
[文档标题](页面链接) - 选择文本：
[文本](页面链接) - 选择文本链接:
[文本](文本链接) - 选择http链接:
[默认文本自行替换](文本链接) - 选择图片:
Q：有什么和其他不同的吗？
A：见下
- 当选择的文本中有链接，则返回的剪切板会以
[选中文本](选中文本链接)形式返回 - 当选择纯http文字链接时，如选择不完整也无需担心，会返回完整url.
Q：不直观
A：上动图
Q：修改剪切板用到哪些JS知识点
A：见下
window.getSelection()- 获取选择的内容document.execCommand:手动触发拷贝、粘贴
Q：那教练你还写过什么，一块打个广告吧
A：好呀好呀
- SPS 音乐插件功能稳定版:Chrome音乐扩展
- Dropzone 图床插件 resizeup ( 图片解决方案 for markdown )：md图片解决方案
- EasyPack - 可视化 Webpack 构建工具 1.0.3 更新:electron桌面工具
- code-rhythm：写了个vscode扩展，让代码更有快感:vscode扩展
