✨ Support content scripts #12

src/components/TreeItem.vue

@@ -7,6 +7,8 @@
           span(v-if="isFolder" class="icon is-small")
             i(class="fa fa-folder-o")
           span {{ model.name }}
+          span(v-if="model.autoRun" class="icon is-small")
+            i(class="fa fa-check-circle")
           span(v-if="isFolder")
             | [{{ open ? '-' : '+' }}]
       ul(class="menu-list", v-show="open", v-if="isFolder")
@@ -53,6 +55,8 @@ export default {
     click: function () {
       if (this.isFolder) {
         this.toggle()
+      } else if (this.model.autoRun){
+        this.$emit('result', { component: 'message', type: 'warning', message: `${message.WARNING_AUTO_RUN_SNIPPET}: ${this.model.domain}`})
       } else {
         this.run()
       }

src/config/message.js

@@ -1,4 +1,5 @@
 export const message = {
+  WARNING_AUTO_RUN_SNIPPET: 'Snippet runs automatically.Allowed domain',
   ERROR_NOT_MATCHED_DOMAIN: 'Not matched the domain.Allowed domain',
   ERROR_NOT_DEFINED_SNIPPET: 'Not defined a snippet',
   ERROR_NOT_ENOUGH_PARAMETER: 'Not enough parameter(s)'

src/content.js

@@ -0,0 +1,29 @@
+import { treeData } from './config/tree.js'
+
+function autoRun (items) {
+  if (isFolder(items)) autoRun(items.children)
+  if (!Array.isArray(items)) return
+
+  for (let item of items) {
+    if (isFolder(item)) {
+      autoRun(item.children)
+    } else if (item.autoRun && checkDomain(item)) {
+      executeScript(item)
+    }
+  }
+}
+
+function isFolder (item) {
+  return item.children && item.children.length
+}
+
+function checkDomain (item) {
+  if (!item.domain) return true
+  return (new RegExp(item.domain, 'i')).test(location.href)
+}
+
+function executeScript (item) {
+  require(`./snippets/${item.snippet}.js`)
+}
+
+autoRun(treeData)

src/manifest.json

@@ -1,9 +1,15 @@
 {
   "browser_action": {
-  "default_icon": "icon-128.png",
-  "default_popup": "index.html",
-  "default_title": "run-snippets"
+    "default_icon": "icon-128.png",
+    "default_popup": "index.html",
+    "default_title": "run-snippets"
   },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"]
+    }
+  ],
   "name": "run-snippets",
   "description": "Chrome and Firefox exetension to run snippets with utilizing npm packages",
   "homepage_url": "https://github.com/re-fort/run-snippets",

webpack.config.babel.js

@@ -5,7 +5,8 @@ const extractTextPlugin = require('extract-text-webpack-plugin')
 module.exports = {
   entry: {
     app: './src/main.js',
-    vendor: ['vue', 'bulma', 'font-awesome/scss/font-awesome.scss']
+    vendor: ['vue', 'bulma', 'font-awesome/scss/font-awesome.scss'],
+    content: './src/content.js'
   },
   output: {
     path: path.resolve(__dirname, './dist'),
@@ -82,7 +83,8 @@ module.exports = {
   plugins: [
     new extractTextPlugin('[name].css'),
     new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor'
+      name: 'vendor',
+      chunks: ['app']
     })
   ],
   performance: {