開發一個簡單的chrome插件-解析本地markdown文件

准備軟件環境

1. 軟件環境

首先，需要使用到的軟件和工具環境如下：

• 一個最新的chrome瀏覽器
• 編輯器vscode

2. 使用的js庫

代碼高亮庫：prismjs

https://prismjs.com/download.html

markdown解析庫：marked.min.js

https://github.com/markedjs/marked

搭建工程

創建一個md-reader目錄，進入md-reader目錄

1. 目錄結構

然后，創建需要的文件

md-reader
|----src
|     |--- manifest.json
|	  |--- images
|	  |     |--- dog_128.png
|	  |     |--- dog_48.png
|	  |     └--- dog_16.png
|	  |  
|     |--- prism.css
|	  |--- prism.js
|	  |--- marked.min.js
|     └--- main.js
|
|---- package.json

2. 配置文件說明

manifest.json
Chrome插件的配置文件，里面的配置項不做具體說明了。

{
    // 清單文件的版本，這個必須寫，而且必須是2
	"manifest_version": 2,
    // 插件的名稱
	"name": "Markdown plugin",
    // 插件的版本
	"version": "1.0.0",
    // 插件描述
	"description": "Converts and previews markdown to HTML right inside Chrome.",
    // 插件圖標
	"icons": {
		"128": "images/dog_128.png",
		"48": "images/dog_48.png",
		"16": "images/dog_16.png"
	},
    // 插件需要獲取的權限
	"permissions": ["tabs", "<all_urls>"],
	"content_scripts": [{
		"js": ["marked.min.js","prism.js", "main.js"],
		"matches": ["*://*/*.md", "file://*/*.md", "*://*/*.markdown", "file://*/*.markdown"],
		"run_at": "document_end"
	}],
	"web_accessible_resources": [
		"prism.css"
	]
}

prism.css 和 prism.js是代碼高亮插件的css和js文件

marked.min.js 是markdown解析插件的js文件

main.js 主要執行文件，用來獲取頁面上的文本，並解析markdown內容后展示

main.js內容如下

(function(document) {

	//引入css
	let link = document.createElement('link');
	link.rel = 'stylesheet';
	link.href = chrome.extension.getURL('prism.css');
	document.head.appendChild(link);

	
	//marked基本設置
	var renderer = new marked.Renderer();	
    marked.setOptions({
      renderer: renderer,
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
	  highlight: function (code,lang, callback) {
		return Prism.highlight(code, Prism.languages.javascript, lang);
	  }
    });


		
	//解析markdown
	let markdowntext =  document.body.innerText;
	document.body.innerHTML  =  marked(markdowntext);
	let pres = Array.from(document.getElementsByTagName("pre"));
    pres && pres.forEach(pre=>{  pre.classList.add("language-all"); })	

}(document));

加載使用插件

打開chrome設置 -> 更多工具 -> 擴展程序 -> 加載已解壓的擴展程序

選擇剛才的插件工程目錄並加載

啟用插件后，在本地隨便建一個xxx.md文件，輸入markdown文本。使用瀏覽器可以解析查看。

示例效果如下：

測試通過后，打包擴展程序，導出為plugin.crx文件