写个Markdown插件,讲讲Chrome扩展开发

写了几个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：好呀好呀

• SPS 音乐插件功能稳定版:Chrome音乐扩展
• Dropzone 图床插件 resizeup ( 图片解决方案 for markdown )：md图片解决方案
• EasyPack - 可视化 Webpack 构建工具 1.0.3 更新:electron桌面工具
• code-rhythm：写了个vscode扩展，让代码更有快感:vscode扩展