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

写了几个chrome扩展,也算顺手了。正好上周收集文档写md时,觉得页面拷贝转成md格式保存太啰嗦,就顺手写了个。梳理下需求和插件如何实现的过程,采用问答式来写此文。

以下markdown clipboard插件简称为mc

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:好呀好呀

@2018-06-16 14:31