寫個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擴展