基于template做代码结构调整

2026-06-10 03:26:47 +00:00 · 2019-03-15 19:10:02 +08:00
parent 4e808384fe
commit 9579ed24d2
42 changed files with 68714 additions and 2085 deletions
@@ -10,7 +10,9 @@
    "dev-index": "cross-env NODE_ENV=development webpack-dev-server --open http://localhost:8082/index.html --inline  --progress --hot --port 8082",
    "dev-popup": "cross-env NODE_ENV=development webpack-dev-server --open http://localhost:8083/popup.html --inline  --progress --hot --port 8083",
    "dev-inspector": "cross-env NODE_ENV=development webpack-dev-server --open http://localhost:8084/devInspector.html --inline --progress --hot --port 8084",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+
+    "build2": "webpack --config ./src/webpack.config.js --progress"
  },
  "dependencies": {
    "fs": "0.0.1-security",
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>popup</title>
+</head>
+<body>
+  <div id="app"></div>
+<script type="text/javascript" src="/js/popup.js?bda05936787919286d9e"></script></body>
+</html>
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
@@ -0,0 +1,17 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  htmlPage(title, filename, chunks, template) {
+    return new HtmlWebpackPlugin({
+      title: title,
+      hash: true,
+      cache: true,
+      inject: 'body',
+      filename: './pages/' + filename + '.html',
+      template: template || path.resolve(__dirname, './page.ejs'),
+      appMountId: 'app',
+      chunks: chunks
+    });
+  }
+}
@@ -1,21 +0,0 @@
-<template>
-  <div id="app">
-    <h1>{{label}}</h1>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "app",
-    data() {
-      return {
-        label: "indexPage",
-      }
-    }
-  }
-</script>
-
-
-<style scoped>
-
-</style>
@@ -0,0 +1,47 @@
+module.exports = {
+    "name": "Cocos Creator Inspector",
+    "version": "1.0.1",
+    "description": "Cocos Creator Inspector",
+    "browser_action": {
+      "default_title": "Cocos Creator Inspector",
+      "default_icon": "static/images/icon48.png",
+      "default_popup": "popup.html"
+    },
+    "icons": {
+      "48": "static/images/icon48.png"
+    },
+    "devtools_page": "dev.html",
+    "content_scripts": [
+      {
+        "matches": [
+          "<all_urls>"
+        ],
+        "js": [
+          "contentScripts.main.js"
+        ],
+        "run_at": "document_end"
+      }
+    ],
+    "background": {
+      "scripts": [
+        "backgroundScripts.main.js"
+      ]
+    },
+    "options_page": "index.html",
+    "manifest_version": 2,
+    "permissions": [
+      "tabs",
+      "http://*/*",
+      "https://*/*",
+      "*://*/*",
+      "system.cpu",
+      "tabs",
+      "storage",
+      "nativeMessaging"
+    ],
+    "web_accessible_resources": [
+      "*/*",
+      "*"
+    ],
+    "content_security_policy": "script-src 'self' 'unsafe-eval';  object-src 'self'"
+  }
@@ -1,10 +1,11 @@
 import Vue from 'vue';
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import App from './App.vue';
+import index from './index.vue';
+
 Vue.use(ElementUI);

 new Vue({
  el: '#app',
-  render: h => h(App)
+  render: h => h(index)
 });
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>vue</title>
-</head>
-<body>
-<div id="app">
-</div>
-</body>
-</html>
@@ -0,0 +1,162 @@
+let path = require('path');
+let webpack = require('webpack');
+let HtmlWebpackPlugin = require('html-webpack-plugin');
+let CleanWebpackPlugin = require('clean-webpack-plugin');
+let CopyWebpackPlugin = require('copy-webpack-plugin');
+if (process.env.NODE_ENV === 'production') {
+
+}
+
+let resolve = function (dir) {
+  return path.join(__dirname, dir);
+}
+
+let htmlPage = function (title, filename, chunks, template) {
+  return new HtmlWebpackPlugin({
+    title: title,
+    hash: true,
+    cache: true,
+    inject: 'body',
+    filename: './pages/' + filename + '.html',
+    template: template || path.resolve(__dirname, 'core/page.ejs'),
+    appMountId: 'app',
+    chunks
+  });
+}
+
+module.exports = {
+  entry: {
+    popup: resolve("popup"),
+    devtools:resolve("devtools"),
+    // devInspector: path.resolve(__dirname, './src/dev/devInspector/main.js'),
+    // dev: path.resolve(__dirname, './src/dev/dev.js'),
+    // index: path.resolve(__dirname, './src/index/main.js'),
+    // backgroundScripts: path.resolve(__dirname, './src/dev/backgroundScripts.js'),
+    // contentScripts: path.resolve(__dirname, './src/dev/contentScripts.js'),
+    // util: path.resolve(__dirname, './src/dev/util.js'),
+    // injectScript: path.resolve(__dirname, './src/dev/injectScript.js'),
+  },
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    publicPath: '/',
+    filename: 'js/[name].js'
+  },
+  plugins: [
+    // new webpack.HotModuleReplacementPlugin(),
+    // webpack 执行之前删除dist下的文件
+    new CleanWebpackPlugin(['./build/*'], {
+      root: __dirname,//根目录
+      verbose: true,//开启在控制台输出信息
+      dry: false,//启用删除文件
+    }),
+
+    htmlPage("popup", 'popup', ['popup']),
+    htmlPage("devtools", 'devtools', ['devtools']),
+
+    //index.html
+    // new HtmlWebpackPlugin({
+    //   template: __dirname + "/src/index/index.html",
+    //   filename: 'index.html',
+    //   inject: 'body',
+    //   chunks: ['index']
+    // }),
+
+
+    //dev.html
+    // new HtmlWebpackPlugin({
+    //   template: __dirname + "/src/dev/dev.html",
+    //   filename: 'dev.html',
+    //   inject: 'body',
+    //   chunks: ['dev']
+    // }),
+
+    //devInspector.html
+    // new HtmlWebpackPlugin({
+    //   template: __dirname + "/src/dev/devInspector/devInspector.html",
+    //   filename: 'devInspector.html',
+    //   inject: 'body',
+    //   chunks: ['devInspector']
+    // }),
+
+    // // 拷贝静态资源(manifest.json)
+    // new CopyWebpackPlugin([
+    //   {
+    //     from: path.resolve(__dirname, 'src/assets/'),
+    //     to: 'static',
+    //     force: true,
+    //     // ignore: ['.*']
+    //   },
+    //   {
+    //     from: path.resolve(__dirname, 'src/manifest.json'),
+    //     to: path.resolve(__dirname, 'dist/')
+    //   }]),
+    // new webpack.DefinePlugin({
+    //   'process.env': {
+    //     NODE_ENV: '"production"'
+    //   }
+    // }),
+    // new webpack.optimize.UglifyJsPlugin({
+    //   sourceMap: true,
+    //   compress: {
+    //     warnings: false
+    //   }
+    // }),
+    // new webpack.LoaderOptionsPlugin({
+    //   minimize: true
+    // })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(less|css)$/,
+        use: [
+          'vue-style-loader',
+          'css-loader'
+        ],
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            scss: 'style-loader!css-loader!sass-loader',
+            sass: 'style-loader!css-loader!sass-loader?indentedSyntax',
+          }
+          // other vue-loader options go here
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|svg|ttf|woff|woff2|eot)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    },
+    extensions: ['*', '.js', '.vue', '.json']
+  },
+  devServer: {
+    contentBase: "./dist",//本地服务器所加载的页面所在的目录
+    historyApiFallback: true,//不跳转
+    noInfo: true,
+    inline: true,//实时刷新
+    overlay: true
+  },
+
+  performance: {
+    hints: false
+  },
+  devtool: '#source-map'
+};
+
+
@@ -1,147 +0,0 @@
-let path = require('path');
-let webpack = require('webpack');
-let HtmlWebpackPlugin = require('html-webpack-plugin');
-let CleanWebpackPlugin = require('clean-webpack-plugin');
-let CopyWebpackPlugin = require('copy-webpack-plugin');
-if (process.env.NODE_ENV === 'production') {
-
-}
-
-module.exports = {
-  entry: {
-    popup: path.resolve(__dirname, "./src/popup/main.js"),
-    devInspector: path.resolve(__dirname, './src/dev/devInspector/main.js'),
-    dev: path.resolve(__dirname, './src/dev/dev.js'),
-    index: path.resolve(__dirname, './src/index/main.js'),
-    backgroundScripts: path.resolve(__dirname, './src/dev/backgroundScripts.js'),
-    contentScripts: path.resolve(__dirname, './src/dev/contentScripts.js'),
-    util: path.resolve(__dirname, './src/dev/util.js'),
-    injectScript: path.resolve(__dirname, './src/dev/injectScript.js'),
-  },
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/',
-    filename: '[name].main.js'
-  },
-  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    // webpack 执行之前删除dist下的文件
-    new CleanWebpackPlugin(
-      ['dist/*'],
-      {
-        root: __dirname,//根目录
-        verbose: true,//开启在控制台输出信息
-        dry: false,//启用删除文件
-      }),
-    //index.html
-    new HtmlWebpackPlugin({
-      template: __dirname + "/src/index/index.html",
-      filename: 'index.html',
-      inject: 'body',
-      chunks: ['index']
-    }),
-    //popup.html
-    new HtmlWebpackPlugin({
-      template: __dirname + "/src/popup/popup.html",
-      filename: 'popup.html',
-      inject: 'body',
-      chunks: ['popup']
-    }),
-    //dev.html
-    new HtmlWebpackPlugin({
-      template: __dirname + "/src/dev/dev.html",
-      filename: 'dev.html',
-      inject: 'body',
-      chunks: ['dev']
-    }),
-
-    //devInspector.html
-    new HtmlWebpackPlugin({
-      template: __dirname + "/src/dev/devInspector/devInspector.html",
-      filename: 'devInspector.html',
-      inject: 'body',
-      chunks: ['devInspector']
-    }),
-
-    // 拷贝静态资源(manifest.json)
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, 'src/assets/'),
-        to: 'static',
-        force: true,
-        // ignore: ['.*']
-      },
-      {
-        from: path.resolve(__dirname, 'src/manifest.json'),
-        to: path.resolve(__dirname, 'dist/')
-      }]),
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    // new webpack.optimize.UglifyJsPlugin({
-    //   sourceMap: true,
-    //   compress: {
-    //     warnings: false
-    //   }
-    // }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.(less|css)$/,
-        use: [
-          'vue-style-loader',
-          'css-loader'
-        ],
-      },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          loaders: {
-            scss: 'style-loader!css-loader!sass-loader',
-            sass: 'style-loader!css-loader!sass-loader?indentedSyntax',
-          }
-          // other vue-loader options go here
-        }
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.(png|jpg|gif|svg|ttf|woff|woff2|eot)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]?[hash]'
-        }
-      }
-    ]
-  },
-  resolve: {
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js'
-    },
-    extensions: ['*', '.js', '.vue', '.json']
-  },
-  devServer: {
-    contentBase: "./dist",//本地服务器所加载的页面所在的目录
-    historyApiFallback: true,//不跳转
-    noInfo: true,
-    inline: true,//实时刷新
-    overlay: true
-  },
-
-  performance: {
-    hints: false
-  },
-  devtool: '#source-map'
-};
-
-
@@ -96,6 +96,7 @@ module.exports = {
    htmlPage('devtools', 'devtools', ['devtools']),
    htmlPage('options', 'options', ['options']),
    htmlPage('background', 'background', ['background']),
+
    new CopyWebpackPlugin([{ from: path.join(__dirname, '..', 'static') }]),
    new ChromeReloadPlugin({
      port: 9090,
@@ -0,0 +1,108 @@
+const path = require('path')
+const webpack = require('webpack')
+const CleanWebpackPlugin = require("clean-webpack-plugin")
+const {cssLoaders, htmlPage} = require('./tools')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+
+let resolve = dir => path.join(__dirname, '..', 'src', dir)
+module.exports = {
+    entry: {
+        tab: resolve('./tab'),
+        popup: resolve('./popup'),
+        options: resolve('./options'),
+        content: resolve('./content'),
+        devtools: resolve('./devtools'),
+        background: resolve('./backend'),
+        panel: resolve('./devtools/panel'),
+        inject: resolve('./content/inject'),
+    },
+    output: {
+        path: path.join(__dirname, '..', 'build'),
+        publicPath: '/',
+        filename: 'js/[name].js',
+        chunkFilename: 'js/[id].[name].js?[hash]',
+        library: '[name]'
+    },
+    resolve: {
+        extensions: ['.js', '.vue', '.json'],
+        alias: {
+            'vue$': 'vue/dist/vue.esm.js',
+            '@': resolve('src')
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|vue)$/,
+                loader: 'eslint-loader',
+                enforce: 'pre',
+                include: [path.join(__dirname, '..', 'src'), path.join(__dirname, '..', 'test')],
+                options: {
+                    formatter: require('eslint-friendly-formatter')
+                }
+            },
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+                options: {
+                    extractCSS: true,
+                    loaders: {
+                        ...cssLoaders(),
+                        js: { loader: 'babel-loader' }
+                    },
+                    transformToRequire: {
+                        video: 'src',
+                        source: 'src',
+                        img: 'src',
+                        image: 'xlink:href'
+                    }
+                }
+            },
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                include:  [path.join(__dirname, '..', 'src'), path.join(__dirname, '..', 'test')],
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: 'img/[name].[hash:7].[ext]'
+                }
+            },
+            {
+                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: 'media/[name].[hash:7].[ext]'
+                }
+            },
+            {
+                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: 'fonts/[name].[hash:7].[ext]'
+                }
+            }
+        ]
+    },
+    plugins: [
+        new CleanWebpackPlugin(['../build/*.*']),
+        htmlPage('home', 'tap', ['tab']),
+        htmlPage('popup', 'popup', ['popup']),
+        htmlPage('panel', 'panel', ['panel']),
+        htmlPage('devtools', 'devtools', ['devtools']),
+        htmlPage('options', 'options', ['options']),
+        htmlPage('background', 'background', ['background']),
+
+        new CopyWebpackPlugin([{ from: path.join(__dirname, '..', 'static') }]),
+
+    ],
+    devServer: {
+        contentBase: "./build",
+    },
+    performance: { hints: false },
+}
@@ -19,7 +19,8 @@
    "lint": "eslint --ext .js,.vue src",
    "dev": "webpack --config ./core/webpack.dev.js --hide-modules",
    "dev-info": "webpack --config ./core/webpack.dev.js",
-    "build": "webpack --config ./core/webpack.prod.js -p --progress  --hide-modules --colors"
+    "build": "webpack --config ./core/webpack.prod.js -p --progress  --hide-modules --colors",
+    "webpack": "webpack --config ./core/webpack.config.js --watch"
  },
  "devDependencies": {
    "archiver": "^2.1.0",
@@ -1 +1,4 @@
-console.log('background !')
+chrome.runtime.onMessage.addEventListener(function (req, sender, callback) {
+    callback("hi ,i am background!")
+})
+console.log("background inited!");
@@ -1 +1,4 @@
 console.log('content-script!')
+// chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
+// })
+chrome.runtime.sendMessage({msg: "content msg"})
@@ -2,4 +2,8 @@ var content = chrome.extension.getURL('js/content.js')
 var script = document.createElement('script')
 script.setAttribute('type', 'text/javascript')
 script.setAttribute('src', content)
+script.onload = function () {
+    // 注入脚本执行完后移除掉
+    this.parentNode.removeChild(this);
+}
 document.body.appendChild(script)
@@ -1,3 +1,12 @@
-chrome.devtools.panels.create('panel', 'img/logo.png', 'pages/panel.html', function (panel) {
-    console.log('hello from callback')
+chrome.devtools.panels.create('cc-inspector', 'img/logo.png', 'pages/panel.html', function (panel) {
+    panel.onShown.addListener(function (window) {
+        console.log("panel show");
+    });
+    panel.onHidden.addListener(function (window) {
+        console.log("panel hide");
+    });
+    panel.onSearch.addListener(function (action, query) {
+        console.log("panel search!");
+        return false;
+    });
 })
@@ -1,12 +1,15 @@
 <template lang="html">
    <div>
+        <span>{{tips}}</span>
        <el-button size="mini" @click="onClickTest"> 检测</el-button>

    </div>
 </template>
 <script>
    export default {
-        data: () => ({}),
+        data: () => ({
+            tips: "",
+        }),
        computed: {},
        created() {
        },
@@ -14,7 +17,16 @@
        },
        methods: {
            onClickTest() {
+                this.tips = "";
                console.log("onClickTest")
+                let views = chrome.extension.getViews({type: 'popup'});
+                if (views.length > 0) {
+                    this.tips = "找到popup";
+                    console.log(views[0].location.href);
+                } else {
+                    this.tips = "未找到popup";
+
+                }
            }
        }
    }
@@ -5,19 +5,25 @@ module.exports = {
    author: 'xu_yanfeng',
    manifest_version: 2,
    icons: {'16': 'icons/16.png', '128': 'icons/128.png'},
+    // 权限申请
    permissions: [
        '<all_urls>',
        '*://*/*',
        'activeTab',
-        'tabs',
+        'tabs',// 标签
        'cookies',
        'background',
-        'contextMenus',
+        'contextMenus',// 右键菜单
        'unlimitedStorage',
-        'storage',
-        'notifications',
+        'storage',// 本地存储
+        'notifications',// 通知
        'identity',
-        'identity.email'
+        'identity.email',
+        "http://*/*",
+        "https://*/*",
+        "*://*/*",
+        "system.cpu",
+        "nativeMessaging"
    ],
    browser_action: {
        default_title: 'title',
@@ -29,12 +35,13 @@ module.exports = {
    },
    devtools_page: 'pages/devtools.html',
    options_page: 'pages/options.html',
+    // 需要直接注入页面的js
    content_scripts: [{
        js: ['js/inject.js'],
-        run_at: 'document_end',
-        matches: ['<all_urls>'],
+        run_at: 'document_end',// 代码注入时间: "document_start", "document_end", or "document_idle"，
+        matches: ['<all_urls>'],// 匹配所有地址
        all_frames: true
    }],
-    content_security_policy: "script-src 'self' 'unsafe-eval'; object-src 'self'",
+    content_security_policy: "script-src 'self' 'unsafe-eval'; object-src 'self' allow-modals ",
    web_accessible_resources: ['panel.html', 'js/content.js']
 }
@@ -4,6 +4,7 @@
            <h3>{{title}}</h3>
            <div style="flex: 1"></div>
            <el-button size="mini" @click="tab">设置</el-button>
+            <el-button size="mini" @click="onMsgToBg">To-Bg</el-button>
        </div>
        <div style="text-align: center;width: 100%; color: #6d6d6d;">
            <span>支持作者</span>
@@ -50,6 +51,13 @@
        methods: {
            tab() {
                chrome.tabs.create({url: 'pages/tap.html'})
+            },
+            onMsgToBg(){
+                debugger
+                let bg = chrome.extension.getBackgroundPage();
+                if(bg){
+                    bg.test();
+                }
            }
        }
    }