开发一个简单的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文件

原文地址:https://www.cnblogs.com/mlzrq/p/10792495.html

时间: 2024-11-05 19:03:08

开发一个简单的chrome插件-解析本地markdown文件的相关文章

Chrome 插件: 起动本地应用 (Native messaging)

Chrome 插件: 起动本地应用 (Native messaging) www.MyException.Cn  网友分享于:2014-08-01  浏览:3次 Chrome 插件: 启动本地应用 (Native messaging) 最近碰到了一个新问题,需要利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地C#应用,同时给这个应用传值来进行不同的操作. 在这里记录下解决的过程,以便以后查找 首先我们需要新建一个google的插件 这个插件包含了三个文件 manifest.jso

作业1开发一个简单的python计算器

开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - (-4*3)/ (16-3*2) )等类似公式后,必须自己解析里面的(),+,-,*,/符号和公式(不能调用eval等类似功能偷懒实现),运算后得出结果,结果必须与真实的计算器所得出的结果一致 hint: re.search(r'\([^()]+\)',s).group() '(-

【Nginx】开发一个简单的HTTP模块

首先来分析一下HTTP模块是如何介入Nginx的. 当master进程fork出若干个workr子进程后,每个worker子进程都会在自己的for死循环中不断调用事件模块: for ( ;; ) { .... ngx_process_events_and_timers(cycle); /* 调用事件模块 */ .... } 事件模块检测是否有TCP连接请求,当收到一个SYN包后,由事件模块建立一条TCP连接.连接建立成功后,交由HTTP框架处理,HTTP框架负责接收HTTP头部,并根据头部信息将

Python开发一个简单的BBS论坛

项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被置顶 可进行多级评论 就先这些吧... 知识必备: Django HTML\CSS\JS BootStrap Jquery 设计表结构 1 # -*- coding:utf-8 -*- 2 from django.db import models 3 from django.contrib.aut

如何做一个简单的Chrome Extension用于网页截屏

Chrome extension是一个文件包,里面包含了一个配置文件manifest.json,以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等). Chrome Extension开发指南 Chrome Extension Overview Chrome Extension Debugging Chrome Extension Samples 如何实现网页截屏功能 看一下manifest文件: {       "name": "Scree

图片延迟加载并等比缩放,一个简单的JQuery插件

使用方法: $(".viewArea img").zoom({height:74,width:103}); (function($){    $.fn.zoom = function(settings){                //一些默认配置:                settings = $.extend({                    height:0,                    width:0,                    load

开发一个简单实用的android紧急求助软件

之前女朋友一个人住,不怎么放心,想找一个紧急求助的软件,万一有什么突发情况,可以立即知道.用金山手机卫士的手机定位功能可以知道对方的位置状态,但不能主动发送求助信息,在网上了很多的APK,都是鸡肋功能,都需要解锁.并打开软件,真正的紧急情况可能没有时间来完成这一系列操作. 于是我自己做了一个这样的软件,在紧急情况下,连续按电源键5次即可发送求救短信和位置信息给事先指定的用户,这个操作在裤兜里就能完成.原理很简单,就是设置监听器捕获屏幕的开关,在较短的时间内屏幕开关达到一定次数后,触发手机定位,定

编写一个简单的Jquery插件

1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var methods = { //Object showName: function (name) { alert('Name:' + name); }, showAge: function (age) { alert('Age' + age); } }; //method方法名 $.fn.showplugi

一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子

页面代码:   <html>     <!-- 引入相关的js文件,相对路径  -->     <script type="text/javascript" src="js/jquery.js"></script>       <script type="text/javascript" src="js/ajaxfileupload.js"></script&g