🌱 Initial commit

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["latest", {
+      "es2015": { "modules": false }
+    }]
+  ]
+}

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+dist/
+*.xpi
+npm-debug.log
+yarn-error.log

README.md

@@ -0,0 +1,75 @@
+![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)
+
+run-snippets
+======================
+
+Chrome and Firefox extension to run arbitrarily snippets.  
+To use this extension, you have to add snippets manually and load builded package.  
+Since bundle with `webpack`, you can import npm packages and use ES2015 syntax in your snippets.
+
+[日本語](https://github.com/re-fort/run-snippets/blob/master/README_ja.md)
+
+## demo
+![screenshot](https://raw.githubusercontent.com/re-fort/run-snippets/master/demo/run-snippets.gif)
+
+## Setup
+```
+git clone https://github.com/re-fort/run-snippets
+cd run-snippets
+npm install or yarn install
+```
+
+## Usage
+- `vim src/config/tree.js`
+- `touch src/snippets/your_snippet.js`
+- `vim src/config/your_snippet.js`
+- `npm run dev`
+- `npm run build`
+
+## npm scripts
+- `npm run dev` start waching files with webpack
+- `npm run build` minify and build with source map
+- `npm run zip:firefox` create an xpi file for Firefox
+
+## Config
+### tree.js
+|property|description|required|type|
+|:-|:-|:-|:-|
+|name|snippet name|yes|string|
+|description|snippet description|no|string|
+|open|open/close status of a folder|no|boolean|
+|snippet|snippet's name to execute|yes(if it is not a folder)|string|
+|domain|domain permitted to execute snippet|no|string(Regex)
+|children|children element|no|array|
+
+### your_snippet.js
+To display snippet's result in Chrome(Firefox) extension, you have to send a message as below.
+```js
+chrome.runtime.sendMessage({ result: {
+  component: 'notification',
+  message: date.toString(),
+  type: 'info'
+}})
+```
+
+Here's result strucuture.
+
+|property|description|required|type|
+|:-|:-|:-|:-|
+|component|component to display result|yes|string(notification or message)|
+|message|message to display in result|yes|string|
+|type|notification style to display in result|yes|string(info, success, warning, danger)|
+
+## Load your builded extension
+### Chrome
+1. access `chrome://extensions/`
+1. click `Load unpacked extension`
+1. select the `dist` folder
+1. ready to use your custom extension :)
+
+### Firefox
+1. `npm run zip:firefox` after `npm run build`
+1. access `https://addons.mozilla.org/en-US/developers/addon/submit/distribution`
+1. sign your `run-snippets.xpi` and download it
+1. drag-and-drop `run-snippets.xpi` in your browser
+1. ready to use your custom extension :)

README_ja.md

@@ -0,0 +1,73 @@
+![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)
+
+run-snippets
+======================
+
+任意のスニペットを実行するChrome & Firefox拡張機能です。  
+この拡張機能を使用するには、手動でスニペットを作成し、ビルドしたパッケージを読み込む必要があります。  
+`webpack`でバンドルしているので、スニペット内でnpmパッケージをインポートしたり、ES2015構文を使用可能です。
+
+## demo
+![screenshot](https://raw.githubusercontent.com/re-fort/run-snippets/master/demo/run-snippets.gif)
+
+## セットアップ
+```
+git clone https://github.com/re-fort/run-snippets
+cd run-snippets
+npm install or yarn install
+```
+
+## 使用方法
+1. `vim src/config/tree.js`
+1. `touch src/snippets/your_snippet.js`
+1. `npm run dev`
+1. `vim src/snippets/your_snippet.js`
+1. `npm run build`
+
+## npm scripts
+- `npm run dev` webpackでのファイル監視を開始します。 
+- `npm run build` 圧縮しソースマップ付きでビルドを行います。
+- `npm run zip:firefox` Firefox用にxpiファイルを作成します。
+
+## 設定
+### tree.js
+|プロパティ|説明|必須|型|
+|:-|:-|:-|:-|
+|name|スニペット名|はい|string|
+|description|スニペットの説明|いいえ|string|
+|open|フォルダの開閉状態|いいえ|boolean|
+|snippet|実行するスニペット名|はい(フォルダでない場合)|string|
+|domain|スニペットの実行を許可するドメイン|いいえ|string(Regex)
+|children|子要素|いいえ|array|
+
+### your_snippet.js
+Chrome(Firefox)拡張機能でスニペットの実行結果を表示するには、次のようにメッセージを送信する必要があります。
+```js
+chrome.runtime.sendMessage({ result: {
+  component: 'notification',
+  message: date.toString(),
+  type: 'info'
+}})
+```
+
+実行結果の構造はこちらです。
+
+|プロパティ|説明|必須|型|
+|:-|:-|:-|:-|
+|component|結果に表示するコンポーネント|はい|string(notification or message)|
+|message|結果に表示するメッセージ|はい|string|
+|type|結果に表示する通知スタイル|はい|string(info, success, warning, danger)|
+
+## ビルドしたパッケージの読み込み
+### Chrome
+1. `chrome://extensions/`にアクセスします。
+1. `パッケージ化されていない拡張機能を読み込む`をクリックします。
+1. `dist `フォルダを選択します。
+1. カスタム拡張機能を使用する準備ができました :)
+
+### Firefox
+1. `npm run build`を実行した後に`npm run zip:firefox`を実行します
+1. `https://addons.mozilla.org/ja/developers/addon/submit/upload-unlisted`にアクセスします
+1. `run-snippets.xpi`に署名を行い、ダウンロードします
+1. `run-snippets.xpi`をブラウザにドラッグ&ドロップします
+1. カスタム拡張機能を使用する準備ができました :)

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "run-snippets",
+  "description": "Chrome and Firefox exetension to run snippets with utilizing npm packages",
+  "version": "0.0.1",
+  "author": "re-fort",
+  "license": "MIT",
+  "scripts": {
+    "dev": "webpack --watch & webpack --watch --config webpack.snippets.config.babel.js",
+    "build": "npm run clean && npm run build:app && npm run build:snippet",
+    "build:app": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "build:snippet": "cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.snippets.config.babel.js",
+    "clean": "rimraf ./dist",
+    "zip:firefox": "cd dist && cross-zip ./ ../run-snippets.xpi"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-preset-latest": "^6.0.0",
+    "bulma": "^0.4.0",
+    "cross-env": "^3.0.0",
+    "cross-zip-cli": "^1.0.0",
+    "css-loader": "^0.25.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.9.0",
+    "font-awesome": "^4.7.0",
+    "node-sass": "^4.5.0",
+    "pug": "^2.0.0-beta11",
+    "pug-html-loader": "^1.1.4",
+    "rimraf": "^2.6.1",
+    "sass-loader": "^5.0.1",
+    "vue": "^2.2.6",
+    "vue-bulma-message": "^1.1.1",
+    "vue-bulma-notification": "^1.1.1",
+    "vue-bulma-tooltip": "^1.0.3",
+    "vue-loader": "^11.1.4",
+    "vue-template-compiler": "^2.2.1",
+    "webpack": "^2.2.0"
+  },
+  "dependencies": {
+    "jquery": "^3.2.1",
+    "moment": "^2.18.1"
+  }
+}

src/App.vue

@@ -0,0 +1,55 @@
+<template lang="pug">
+  div(id="app")
+    aside(class="menu")
+      ul
+        tree-item(:model="treeData", @result="displayResult")
+</template>
+
+<script>
+import Vue from 'vue'
+import TreeItem from './components/TreeItem.vue'
+import { treeData } from './config/tree.js'
+import { openNotification } from './components/Notification.vue'
+import { openMessage } from './components/Message.vue'
+
+export default {
+  name: 'app',
+  components: {
+    'tree-item': TreeItem
+  },
+  data () {
+    return {
+      treeData: treeData
+    }
+  },
+  methods: {
+    displayResult: function (result) {
+      if (result.component === 'notification') {
+        openNotification({
+          title: result.title,
+          message: result.message,
+          type: result.type
+        })
+      }
+      if (result.component === 'message') {
+        openMessage({
+          title: result.title,
+          message: result.message,
+          type: result.type,
+          duration: 0,
+          showCloseButton: true
+        })
+      }
+    },
+
+  }
+}
+</script>
+
+<style lang="scss">
+body {
+  margin-top: 20px;
+  min-width: 600px;
+  min-height: 400px;
+}
+</style>

src/components/Message.vue

@@ -0,0 +1,30 @@
+<script>
+import Vue from 'vue'
+import Message from 'vue-bulma-message'
+
+const MessageComponent = Vue.extend(Message)
+
+export const openMessage = (propsData = {
+  title: '',
+  message: '',
+  type: '',
+  direction: '',
+  duration: 0,
+  container: '.messages'
+}) => {
+  return new MessageComponent({
+    el: document.createElement('div'),
+    propsData
+  })
+}
+</script>
+
+<style lang="scss">
+.messages {
+  top: 0px !important;
+}
+
+.messages .message {
+  right: 0% !important;
+}
+</style>

src/components/Notification.vue

@@ -0,0 +1,26 @@
+<script>
+import Vue from 'vue'
+import Notification from 'vue-bulma-notification'
+
+const NotificationComponent = Vue.extend(Notification)
+
+export const openNotification = (propsData = {
+  title: '',
+  message: '',
+  type: '',
+  direction: '',
+  duration: 4500,
+  container: '.notifications'
+}) => {
+  return new NotificationComponent({
+    el: document.createElement('div'),
+    propsData
+  })
+}
+</script>
+
+<style lang="scss">
+.notifications {
+  top: 0px !important;
+}
+</style>