Fix not working on pages inline style blocked by CSP

package-lock.json

@@ -1147,6 +1147,12 @@
         "uri-js": "^4.2.1"
       }
     },
+    "ajv-errors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
+      "dev": true
+    },
     "ajv-keywords": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz",
@@ -5694,6 +5700,30 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "mini-css-extract-plugin": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
+      "integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "schema-utils": "^1.0.0",
+        "webpack-sources": "^1.1.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.11",
     "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.9.0",
     "opener": "^1.5.1",
     "react-svg-loader": "^2.1.0",

src/manifest-chrome.json

@@ -43,7 +43,8 @@
     {
       "all_frames": true,
       "matches": ["http://*/*", "https://*/*", "<all_urls>"],
-      "js": ["content/content.js"]
+      "js": ["content/content.js"],
+      "css": ["content/content.css"]
     }
   ],
 

src/manifest-firefox.json

@@ -49,7 +49,8 @@
     {
       "all_frames": true,
       "matches": ["http://*/*", "https://*/*", "<all_urls>"],
-      "js": ["content/content.js"]
+      "js": ["content/content.js"],
+      "css": ["content/content.css"]
     }
   ],
 

webpack.config.dev.js

@@ -12,6 +12,7 @@ const {
 } = require("./webpack.utils");
 const path = require("path");
 const config = require("./config.json");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const generalConfig = {
   mode: "development",
@@ -48,6 +49,7 @@ const generalConfig = {
       },
       {
         test: /\.scss$/,
+        exclude: [path.resolve(__dirname, "src", "content")],
         use: [
           {
             loader: "style-loader"
@@ -60,6 +62,19 @@ const generalConfig = {
           }
         ]
       },
+      {
+        test: /\.scss$/,
+        include: [path.resolve(__dirname, "src", "content")],
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader"
+          },
+          {
+            loader: "sass-loader"
+          }
+        ]
+      },
       {
         test: /\.svg$/,
         use: [
@@ -85,6 +100,9 @@ module.exports = [
     entry: getEntry(config.chromePath),
     output: getOutput("chrome", config.devDirectory),
     plugins: [
+      new MiniCssExtractPlugin({
+        filename: "[name]/[name].css"
+      }),
       ...getHTMLPlugins("chrome", config.devDirectory, config.chromePath),
       ...getCopyPlugins("chrome", config.devDirectory, config.chromePath)
     ]
@@ -94,6 +112,9 @@ module.exports = [
     entry: getEntry(config.firefoxPath),
     output: getOutput("firefox", config.devDirectory),
     plugins: [
+      new MiniCssExtractPlugin({
+        filename: "[name]/[name].css"
+      }),
       ...getFirefoxCopyPlugins("firefox", config.devDirectory, config.firefoxPath),
       ...getHTMLPlugins("firefox", config.devDirectory, config.firefoxPath),
       new BundleAnalyzerPlugin({

webpack.config.dist.js

@@ -16,6 +16,7 @@ const {
 const path = require("path");
 const config = require("./config.json");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const extVersion = require("./src/manifest-chrome.json").version;
 const ffExtVersion = require("./src/manifest-firefox.json").version;
@@ -54,6 +55,7 @@ const generalConfig = {
       },
       {
         test: /\.scss$/,
+        exclude: [path.resolve(__dirname, "src", "content")],
         use: [
           {
             loader: "style-loader"
@@ -66,6 +68,19 @@ const generalConfig = {
           }
         ]
       },
+      {
+        test: /\.scss$/,
+        include: [path.resolve(__dirname, "src", "content")],
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader"
+          },
+          {
+            loader: "sass-loader"
+          }
+        ]
+      },
       {
         test: /\.svg$/,
         use: [
@@ -93,6 +108,9 @@ module.exports = [
     plugins: [
       new CleanWebpackPlugin(["dist", "temp"]),
       new UglifyJsPlugin(),
+      new MiniCssExtractPlugin({
+        filename: "[name]/[name].css"
+      }),
       ...getHTMLPlugins("chrome", config.tempDirectory, config.chromePath),
       ...getCopyPlugins("chrome", config.tempDirectory, config.chromePath),
       getZipPlugin(`${config.extName}-for-chrome-${extVersion}`, config.distDirectory)
@@ -105,6 +123,9 @@ module.exports = [
     plugins: [
       new CleanWebpackPlugin(["dist", "temp"]),
       new UglifyJsPlugin(),
+      new MiniCssExtractPlugin({
+        filename: "[name]/[name].css"
+      }),
       ...getHTMLPlugins("firefox", config.tempDirectory, config.firefoxPath),
       ...getFirefoxCopyPlugins("firefox", config.tempDirectory, config.firefoxPath),
       getZipPlugin(`${config.extName}-for-firefox-${ffExtVersion}`, config.distDirectory)