写了几个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:安装扩展，扩展列表显示的icon
commands:如需要快捷键，这里可设置，比如目前插件默认的是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：教练你说这么简单，我看看源码就明白了，给我几个链接吧

A：Markdown Clipboard源码

Q：再给几个官方文档，我就可以自己学着用了

A：嗯，甚好，推荐两个吧。

官方文档

综述--扩展开发文档：360浏览器汉化版，别急，没别的意思，是360，也是chrome

Q：那你再随便讲讲mc做了些什么

A：好，慢慢来.，一句话就是快速将网页文本，链接，图片转为markdown语法，做了一些扩展。

鼠标选择需要拷贝的内容: 文本，链接，图片, 甚至可以什么都不选
使用默认快捷键拷贝内容到剪切板: Alt + C,
拷贝markdown格式到你想要拷贝的地方去

Q：为什么不使用Ctrl + C常规的复制快捷键

A：因为操作更改剪切板内容了，插件原则上不能也不应该影响正常使用习惯，所以单独起了快捷键

Q：不同情况，剪切板返回的内容有区别吗

A：见下

不选择任何内容: [文档标题](页面链接)
选择文本：[文本](页面链接)
选择文本链接: [文本](文本链接)
选择http链接: [默认文本自行替换](文本链接)
选择图片: ![图片alt标记名称](图片链接)

Q：有什么和其他不同的吗？

A：见下

当选择的文本中有链接，则返回的剪切板会以[选中文本](选中文本链接)形式返回
当选择纯http文字链接时，如选择不完整也无需担心，会返回完整url.

Q：不直观

A：上动图

Q：修改剪切板用到哪些JS知识点

A：见下

window.getSelection() - 获取选择的内容
document.execCommand:手动触发拷贝、粘贴

Q：那教练你还写过什么，一块打个广告吧

A：好呀好呀