mdjs-viewer

mdjs-viewer插件简介

mdjs-viewer插件描述

# Markdown JavaScript Viewer (mdjsviewer)

[mdjs (Markdown JavaScript)](https://www.npmjs.com/package/@mdjs/ce) allows to execute code  show interactive demos within your markdown documentation.

This extension takes this functionality  enables it directly on github.com.

You can see live demos in

 Github Markdown files (like README.md)
 Github Issues (incl. edit preview, new comment preview, new issue preview)
 ... me is planned but not yet implemented

## Security

Executing user code especially in github issues can be dangerous.
This extension isolates code executing as much as possible.
It can be considered as secure as any page that executes user code like codepen  jsfiddle.

The Security Measures are:

 not executing any code without user action (e.g. requires a click of a button first)
 shows demos/executes code within an iframe
   that uses [sbox](https://www.w3schools.com/tags/att_iframe_sbox.asp) with the following settings `sbox="allowscripts"`
   populates the iframe with a data uri
   does not allow any requests (except unpkg) to got outside of the iframe

This prevents [all known attack vects](https://github.com/openwc/mdjsviewer/issues/2). If you come up with new once please [rept them](https://github.com/openwc/mdjsviewer/issues/new).

### Warning

In der to function this extension modifies the CSP (Content Security Policy) f github.com with the following rules:

 adds to scriptsrc
   `unsafeinline` to execute code blocks within the mdjs iframe
   `unpkg.com` to load user dependencies from within the mdjs iframe

## Demos

Enable the extension  visit the following pages

1. [Readme of demowccard](https://github.com/daKmoR/demowccard)
2. [Issues of demowccard](https://github.com/daKmoR/demowccard/issues/1)

## How does it wk?

It adds a button `show demo ▹` to markdown pages  issues. Once you press it will get the raw md text which then gets pass though [mdjs](https://www.npmjs.com/package/@mdjs/ce)  an extra plugin which replaces all impts (relative  bare impts) with [unpkg.com](https://unpkg.com/) urls with the `?module` flag. This way all dependencies can be directly loaded in the browser without the need of any service.

Finally we create an iframe with the content of the mdjs html  js output.

## Limits

In der to get the raw md content of an issues (only the first message not following comments) a request to api.github.com is required.
This request is only needed if you actually click on the `show demo ▹` button.
There is a hard limit of 60 anonymous api calls to github per hour.
F me an API key is needed. (You can not yet provide it to the extension ????  feel free to open a feature request)
                                

mdjs-viewer插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 mdjs-viewerChrome插件v0.0.4版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决