# treedoc-chrome-ext

## Overview
A chrome extension of [treedoc-viewer](https://www.npmjs.com/package/treedoc-viewer) which is also available online: http://treedoc.org. With this extension, you can conveniently view the treedocs (JSON, YAML, XML, etc) within the pages directly on this extension. 

This extension is published in [chrome web store](https://chrome.google.com/webstore/detail/treedoc-viewer/gioaiaipmfbhaadfohpbehckgmpcgchj). 

## Features
1. Auto detect JSON file and open in the viewer
2. Integrated contextual menu of `Open in Treedoc View` to open a snippet or a link on the page in the extension in a new tag. 
3. Provide a feature rich table view with sorting, filtering functions etc. 
4. For local files with chrome browser can also enable this extension to show the file in a nice viewer.
  - To enable that, you need to enable `Allow access to file URLs` in `chrome://extension` settings for this extension)
  - To enable this in vscode, recommand to install vs-code extension [vscode-open](https://marketplace.visualstudio.com/items?itemName=sandcastle.vscode-open), and set `Google Chrome` as default app for those files (JSON, YAML, XML, etc)

## Screen shots

## Developer notes
### Local test
- `yarn build` or `yarn server`
- In chrome: goto: `chrome://extensions/`, turn on `developer mode`
- On the extension window, click `Load unpacked`
### publish to chrome web store
- Goto: https://chrome.google.com/webstore/devconsole/
- Upload the package under folder `artifacts`

### Troubleshootng
- **Don't use `yarn link treedoc-viewer`**.  <br>
  That won't work. The Datatable won't been shown (complain about Datatabe is not registered). Not sure why. 



## Reference
https://medium.com/javascript-in-plain-english/how-to-make-a-chrome-extension-with-vue-js-56e50bd97972
https://www.npmjs.com/package/vue-cli-plugin-browser-extension