🚀 扩展程序初始化构建

构建扩展程序

dist/index.html

@@ -112,7 +112,7 @@ <h4>使用</h4>
   </main>
   <script src="./easyshare.js"></script>
   <script>
-    var easyshare = new EasyShare()
+    var easyshare = new EasyShare("easyshare-demo")
   </script>
 </body>
 </html>

extenstion/_locales/zh_CN/messages.json

@@ -0,0 +1,11 @@
+{
+    "extensionName": {
+      "message": "web-note"
+    },
+    "extensionDescription": {
+      "message": "note something on you visiting page, anywhere."
+    },
+    "browserActionTitle": {
+      "message": "web-note"
+    }
+  }

extenstion/manifest.json

@@ -0,0 +1,52 @@
+{
+    "manifest_version": 2,
+    "name": "__MSG_extensionName__",
+    "short_name": "__MSG_extensionName__",
+    "version": "0.1.5",
+    "description": "__MSG_extensionDescription__",
+    "default_locale": "zh_CN",
+    "icons": {
+      "16": "images/icon-16.png",
+      "32": "images/icon-32.png",
+      "48": "images/icon-48.png",
+      "64": "images/icon-64.png",
+      "96": "images/icon-96.png",
+      "128": "images/icon-128.png"
+    },
+    "permissions": [
+      "contextMenus",
+      "activeTab",
+      "tabs"
+    ],
+    "browser_action": {
+      "default_icon": {
+        "16": "images/icon-16.png",
+        "32": "images/icon-32.png",
+        "48": "images/icon-48.png",
+        "64": "images/icon-64.png",
+        "96": "images/icon-96.png",
+        "128": "images/icon-128.png"
+      },
+      "default_title": "__MSG_browserActionTitle__"
+    },
+    "commands": {
+      "whats_element": {
+        "description": "compute element",
+        "suggested_key": {
+          "default": "Ctrl+Shift+E"
+        }
+      }
+    },
+    "background": {
+      "scripts": ["scripts/background.js"],
+      "persistent": false
+    },
+    "content_scripts": [
+      {
+        "matches": [ "<all_urls>" ],
+        "js": ["scripts/easyshare.js","scripts/content_script.js"],
+        "css":["css/easyshare.css"],
+        "all_frames": true
+      }
+    ]
+  }

extenstion/scripts/content_script.js

@@ -0,0 +1 @@
+var easyshare = new EasyShare("yes-container")

package.json

@@ -20,6 +20,7 @@
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-env": "^1.7.0",
+    "copy-webpack-plugin": "^4.5.3",
     "css-loader": "^1.0.0",
     "mini-css-extract-plugin": "^0.4.4",
     "optimize-css-assets-webpack-plugin": "^5.0.1",

webpack.common.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 module.exports = {
   entry: './src/index.js',
   output: {
@@ -50,5 +51,12 @@ module.exports = {
       filename: "easyshare.css",
       chunkFilename: "[id].css"
     }),
+    new CopyWebpackPlugin([{
+      from:"dist/easyshare.js",
+      to :path.resolve(__dirname, 'extenstion/scripts/')
+    },{
+      from:"dist/easyshare.css",
+      to :path.resolve(__dirname, 'extenstion/css/')
+    }])
   ]
 };