寫個Markdown外掛,講講Chrome擴充套件開發

onvno_發表於2018-06-16
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：上動圖

寫個Markdown外掛,講講Chrome擴充套件開發


Q：修改剪下板用到哪些JS知識點

A：見下

  • window.getSelection() - 獲取選擇的內容
  • document.execCommand:手動觸發拷貝、貼上

Q：那教練你還寫過什麼，一塊打個廣告吧

A：好呀好呀

相關文章