Merge pull request #24 from kintone/update-to-manifest-v3

Update to manifest v3
kintone · Feb 27, 2023 · e35a4ad · e35a4ad
2 parents 2d6bb84 + a582025
commit e35a4ad
Show file tree

Hide file tree

Showing 15 changed files with 8,403 additions and 6,543 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,24 +9,19 @@
     "@types/react-dom": "^16.8.4",
     "@types/sanitize-filename": "^1.1.28",
     "axios": "^0.19.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^2.0.0",
     "extract-text-webpack-plugin": "^3.0.2",
-    "mini-css-extract-plugin": "^0.5.0",
-    "monaco-editor": "^0.17.0",
-    "monaco-editor-webpack-plugin": "^1.7.0",
-    "node-sass": "^4.14.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "file-loader": "^6.2.0",
+    "monaco-editor": "^0.35.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "sanitize-filename": "^1.6.1",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
+    "style-loader": "^3.3.1",
+    "styled-components": "^5.3.6",
+    "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "^6.0.0",
     "typescript": "^3.4.5",
-    "webpack": "^4.44.2",
-    "webpack-fix-style-only-entries": "^0.2.1",
     "webpack-merge": "^4.2.1"
   },
   "devDependencies": {
@@ -35,18 +30,25 @@
     "@types/enzyme": "^3.9.1",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/mocha": "^5.2.6",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^1.8.0",
     "@typescript-eslint/parser": "^1.8.0",
     "chai": "^4.2.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.3",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "eslint": "^5.16.0",
+    "mini-css-extract-plugin": "^2.7.2",
     "mocha": "^8.2.1",
     "prettier": "^1.17.0",
+    "sass": "^1.58.3",
+    "sass-loader": "^13.2.0",
     "sinon": "^7.3.2",
-    "terser-webpack-plugin": "^1.3.0",
     "ts-node": "^8.1.0",
-    "webpack-cli": "^4.2.0"
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-fix-style-only-entries": "^0.6.1"
   },
   "scripts": {
     "build": "webpack --config webpack.prod.js && zip -r extension.zip dist/",

diff --git a/src/css/index.css b/src/css/index.css
@@ -0,0 +1,16 @@
+.customize-portal {
+    background-image: url(chrome-extension://__MSG_@@extension_id__/img/kintone-icon.svg);
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 0;
+    height: 48px;
+    padding: 0;
+    width: 48px;
+  }
+
+body:not(.kintone-portal-customizer-ready) :is(.gaia-header-header, .gaia-header-toolbar, .ocean-portal-body, .ocean-portal-index-header) {
+    visibility: hidden;
+}
diff --git a/src/js/boilerplates/desktop-unofficial.js → ...ilerplates/desktop-unofficial.boilerplate b/src/js/boilerplates/desktop-unofficial.js → ...ilerplates/desktop-unofficial.boilerplate
diff --git a/src/js/boilerplates/desktop.js → src/js/boilerplates/desktop.boilerplate b/src/js/boilerplates/desktop.js → src/js/boilerplates/desktop.boilerplate
diff --git a/src/js/boilerplates/mobile-unofficial.js → ...oilerplates/mobile-unofficial.boilerplate b/src/js/boilerplates/mobile-unofficial.js → ...oilerplates/mobile-unofficial.boilerplate
diff --git a/src/js/boilerplates/mobile.js → src/js/boilerplates/mobile.boilerplate b/src/js/boilerplates/mobile.js → src/js/boilerplates/mobile.boilerplate
diff --git a/src/js/components/TextArea.tsx b/src/js/components/TextArea.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 // import * as monaco from "monaco-editor";
-import * as monaco from "../../../node_modules/monaco-editor/esm/vs/editor/editor.api";
+import * as monaco from "monaco-editor";
 
 class TextArea extends React.Component<TextAreaProps> {
   containerRef: React.RefObject<HTMLDivElement>;

diff --git a/src/js/domain/FileExporter.ts b/src/js/domain/FileExporter.ts
@@ -45,14 +45,14 @@ const loadBoilerplate = async (path: string) => {
 
 const getPathOfDesktop = (state: EditorState) => {
   return isOfficialCustomization(state)
-    ? "js/boilerplates/desktop.js"
-    : "js/boilerplates/desktop-unofficial.js";
+    ? "js/boilerplates/desktop.boilerplate"
+    : "js/boilerplates/desktop-unofficial.boilerplate";
 };
 
 const getPathOfMobile = (state: EditorState) => {
   return isOfficialCustomization(state)
-    ? "js/boilerplates/mobile.js"
-    : "js/boilerplates/mobile-unofficial.js";
+    ? "js/boilerplates/mobile.boilerplate"
+    : "js/boilerplates/mobile-unofficial.boilerplate";
 };
 
 const isOfficialCustomization = (state: EditorState) => {

diff --git a/src/js/domain/FileExporter_spec.ts b/src/js/domain/FileExporter_spec.ts
@@ -36,7 +36,7 @@ describe("FileExporter", () => {
       // Exercise
       const path = FileExporter.getPathOfDesktop(editorState);
       // Verify
-      chai.expect(path).eql("js/boilerplates/desktop.js");
+      chai.expect(path).eql("js/boilerplates/desktop.boilerplate");
     });
 
     it("非公式のBoilderplateが返る", () => {
@@ -46,7 +46,7 @@ describe("FileExporter", () => {
       // Exercise
       const path = FileExporter.getPathOfDesktop(editorState);
       // Verify
-      chai.expect(path).eql("js/boilerplates/desktop-unofficial.js");
+      chai.expect(path).eql("js/boilerplates/desktop-unofficial.boilerplate");
     });
   });
 
@@ -57,7 +57,7 @@ describe("FileExporter", () => {
       // Exercise
       const path = FileExporter.getPathOfMobile(editorState);
       // Verify
-      chai.expect(path).eql("js/boilerplates/mobile.js");
+      chai.expect(path).eql("js/boilerplates/mobile.boilerplate");
     });
 
     it("非公式のBoilderplateが返る", () => {
@@ -67,7 +67,7 @@ describe("FileExporter", () => {
       // Exercise
       const path = FileExporter.getPathOfMobile(editorState);
       // Verify
-      chai.expect(path).eql("js/boilerplates/mobile-unofficial.js");
+      chai.expect(path).eql("js/boilerplates/mobile-unofficial.boilerplate");
     });
   });
 });
diff --git a/src/js/domain/renderToolbarLink.ts b/src/js/domain/renderToolbarLink.ts
@@ -1,7 +1,7 @@
 const renderToolbarLink = () => {
   const anchorEl = document.createElement("a");
   anchorEl.className = "customize-portal";
-  anchorEl.setAttribute("href", chrome.extension.getURL("editor.html"));
+  anchorEl.setAttribute("href", chrome.runtime.getURL("editor.html"));
   anchorEl.setAttribute("target", "_blank");
   anchorEl.setAttribute("aria-label", "Kintone Portal Designer");
   anchorEl.setAttribute("title", "Kintone Portal Designer");

diff --git a/src/manifest.json b/src/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Kintone Portal Designer",
-  "version": "1.8.5",
+  "version": "1.9.0",
   "default_locale": "en",
   "description": "Kintone Portal Designer",
   "content_scripts": [
@@ -22,7 +22,7 @@
     "48": "img/chrome_extension_icon_64x64.png",
     "128": "img/chrome_extension_icon_128x128.png"
   },
-  "browser_action": {
+  "action": {
     "default_icon": {
       "16": "img/chrome_extension_icon_16x16.png",
       "48": "img/chrome_extension_icon_64x64.png",
@@ -32,14 +32,19 @@
     "default_popup": "html/popup.html"
   },
   "permissions": [
-    "storage",
+    "storage"
+  ],
+  "host_permissions": [
     "https://*.cybozu.com/k/*",
     "https://*.cybozu-dev.com/k/*",
     "https://*.kintone.com/k/*",
     "https://*.kintone-dev.com/k/*",
     "https://*.cybozu.cn/k/*",
     "https://*.cybozu-dev.cn/k/*"
   ],
-  "web_accessible_resources": ["img/*", "html/*", "css/*", "js/templates/*", "editor.html"],
-  "manifest_version": 2
+  "web_accessible_resources": [{
+    "resources": ["img/*", "html/*", "js/templates/*", "editor.html"],
+    "matches": ["<all_urls>"]
+  }],
+  "manifest_version": 3
 }
diff --git a/webpack.common.js b/webpack.common.js
@@ -3,7 +3,6 @@
 const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
 const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
 
 module.exports = {
@@ -20,41 +19,43 @@ module.exports = {
   },
   plugins: [
     new MonacoWebpackPlugin(),
-    new FixStyleOnlyEntriesPlugin(),
-    new MiniCssExtractPlugin({
-      filename: "[name].css",
-      chunkFilename: "[id].css"
-    }),
-    new CopyWebpackPlugin([
-      {
-        from: "src/img",
-        to: "img"
-      },
-      {
-        from: "src/html",
-        to: "html"
-      },
-      {
-        from: "src/_locales/en",
-        to: "_locales/en"
-      },
-      {
-        from: "src/_locales/en",
-        to: "_locales/ja"
-      },
-      {
-        from: "src/js/boilerplates",
-        to: "js/boilerplates"
-      },
-      {
-        from: "src/manifest.json",
-        to: "manifest.json"
-      },
-      {
-        from: "src/editor.html",
-        to: "editor.html"
-      }
-    ])
+    new MiniCssExtractPlugin(),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: "src/img",
+          to: "img"
+        },
+        {
+          from: "src/html",
+          to: "html"
+        },
+        {
+          from: "src/css",
+          to: "css"
+        },
+        {
+          from: "src/_locales/en",
+          to: "_locales/en"
+        },
+        {
+          from: "src/_locales/en",
+          to: "_locales/ja"
+        },
+        {
+          from: "src/js/boilerplates",
+          to: "js/boilerplates"
+        },
+        {
+          from: "src/manifest.json",
+          to: "manifest.json"
+        },
+        {
+          from: "src/editor.html",
+          to: "editor.html"
+        }
+      ]
+    })
   ],
   resolve: {
     extensions: [".ts", ".tsx", ".js"]
@@ -69,6 +70,10 @@ module.exports = {
         test: /\.scss$/,
         use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
       },
+      {
+        test: /\.ttf$/,
+        use: ["file-loader"]
+      },
       {
         test: /\.(ts|tsx)$/,
         use: [

diff --git a/webpack.dev.js b/webpack.dev.js
@@ -1,11 +1,7 @@
 const merge = require("webpack-merge");
 const common = require("./webpack.common.js");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 
 module.exports = merge(common, {
   mode: "development",
-  devtool: "inline-source-map",
-  optimization: {
-    minimizer: [new OptimizeCSSAssetsPlugin({})]
-  }
+  devtool: "inline-source-map"
 });
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,7 +1,6 @@
 const merge = require("webpack-merge");
 const common = require("./webpack.common.js");
 const TerserPlugin = require("terser-webpack-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 
 module.exports = merge(common, {
   mode: "production",
@@ -17,8 +16,7 @@ module.exports = merge(common, {
             beautify: false
           }
         }
-      }),
-      new OptimizeCSSAssetsPlugin({})
+      })
     ]
   }
 });