Merge pull request #56 from harlen1212/feature_manifest_v3

Upgrade manifest v3

Author: raoenhui

README.md

@@ -14,6 +14,10 @@
 在chrome中输入`chrome://extensions`打开扩展程序，打开[插件下载地址](https://github.com/jd-opensource/micro-app-chrome-plugin/releases)，选择最新Release包的`micro-app-chrome-plugin.zip`
 文件下载，无需解压，将已下载的插件拖入。
 
+在仅支持 `Manifest V3` 扩展的 Chrome 139+ 浏览器上，请使用 `Micro-App-DevTools V2+` 版本。
+
+> 注：若仍需使用`Micro-App-DevTools V1+`版本，请在仍支持 `Manifest V2` 拓展的 Chrome 138 或更早版本浏览器的地址栏输入 `chrome://flags/#allow-legacy-mv2-extensions` 并启用允许加载旧版 `Manifest V2` 扩展选项。![扩展程序](https://zeromock.s3.cn-north-1.jdcloud-oss.com/micro-app/mv2.png)
+
 ![扩展程序](https://img12.360buyimg.com/imagetools/jfs/t1/119438/16/38287/53001/646b50e3F9012f2e8/3bba9844bbb1431b.png)
 
 # 功能
@@ -37,7 +41,7 @@
 
 ![路由](https://zeromock.s3.cn-north-1.jdcloud-oss.com/micro-app/communicate.png)
 
-### 4、子应用开发环境模拟
+### 4、子应用开发环境模拟(仅插件 v1 版本支持)
 点击按钮跳转至功能一中子应用开发环境模拟页面，此处模仿内嵌子应用，使用说明如下所示：
 
 在子应用开发环境模拟页面中输入子页面`URL`等信息

package.json

@@ -1,6 +1,6 @@
 {
   "name": "micro-app-chrome-extension",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "description": "A chrome extension for debug micro app project.",
   "license": "MIT",
   "repository": {
@@ -119,4 +119,4 @@
     "webpackbar": "^5.0.2",
     "yargs": "^17.4.1"
   }
-}
+}

src/manifest.json

@@ -1,11 +1,11 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Micro App Developer Tools",
   "short_name": "Sample Extension",
   "description": "A chrome extension for debug micro app project.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",
   "version": "0.0.1",
-  "browser_action": {
+  "action": {
     "default_popup": "popup-app.html",
     "default_icon": {
       "128": "static/icons/icon-128-disable.png"
@@ -15,7 +15,9 @@
     "128": "static/icons/icon-128.png",
     "256": "static/icons/icon-128-disable.png"
   },
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
   "background": { "service_worker": "js/background-script.bundle.js" },
   "options_page": "options-app.html",
   "content_scripts": [
@@ -26,23 +28,22 @@
     }
   ],
   "devtools_page": "devtools-loader.html",
-  "host_permissions": [
-    "*://*.jd.com/"
-  ],
   "permissions": [
     "cookies",
     "webRequest",
-    "webRequestBlocking",
-    "http://*/*",
-    "https://*/*",
     "tabs",
     "contextMenus",
-    "browser_action",
     "storage",
-    "devtools",
     "windows",
     "activeTab",
-    "system.display"
+    "system.display",
+    "scripting"
+  ],
+  "host_permissions": [
+    "*://*.jd.com/"
+  ],
+  "optional_host_permissions": [
+    "*://*/*"
   ],
   "update_url": "https://clients2.google.com/service/update2/crx"
 }

src/pages/devtools/components/communicate/index.tsx

@@ -788,10 +788,11 @@ class Communicate extends React.PureComponent<CommunicateProps, CommunicateState
         children: this.sendDataDOM(),
       });
     }
-    tabItems.push({
-      key: 'openSimulation',
-      label: '此子应用开发环境模拟',
-    });
+    // manifest v3 不支持unsafe-eval,簪无法模拟子应用
+    // tabItems.push({
+    //   key: 'openSimulation',
+    //   label: '此子应用开发环境模拟',
+    // });
     return (
       <Tabs
         size="small"

src/pages/popup/index.tsx

@@ -8,22 +8,25 @@ interface PopupPageProps {
 }
 
 class PopupPage extends React.PureComponent<PopupPageProps, PopupPageProps> {
-  private open() {
-    // https://developer.chrome.com/docs/extensions/reference/tabs/#examples
-    chrome.tabs.create({
-      url: 'simulation.html',
-    });
-  }
+  // private open() {
+  //   // https://developer.chrome.com/docs/extensions/reference/tabs/#examples
+  //   chrome.tabs.create({
+  //     url: 'simulation.html',
+  //   });
+  // }
 
   public render() {
     return (
       <div className={styles.app}>
-        <div className={styles['app-link']} onClick={() => { this.open(); }}>
+        {/* manifest v3 不支持unsafe-eval,簪无法模拟子应用 */}
+        {/* <div className={styles['app-link']} onClick={() => { this.open(); }}>
           <a>
             打开“子应用开发环境模拟”页面
           </a>
+        </div> */}
+        <div className={styles['app-link']}>
+          <a>打开“子应用开发环境模拟”页面(v2版本暂不支持)</a>
         </div>
-
       </div>
     );
   }

src/scripts/background/index.ts

@@ -109,7 +109,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab1) => {
       });
     });
     // 6、according to isMicroApp setting iconPath
-    chrome.browserAction.setIcon({ path: isMicroApp ? blueIconPath : grayIconPath, tabId });
+    chrome.action.setIcon({ path: isMicroApp ? blueIconPath : grayIconPath, tabId });
   });
 });
 /**
@@ -123,9 +123,9 @@ chrome.tabs.onActivated.addListener((changeInfo) => {
       logger.debug(`change tab value currently is ${JSON.stringify(result)}`);
       const data = JSON.parse(JSON.stringify(result));
       logger.debug('isMicroApp', data[`${changeInfo.tabId}`]);
-      chrome.browserAction.setIcon({ path: data[`${changeInfo.tabId}`] ? blueIconPath : grayIconPath, tabId: changeInfo.tabId });
+      chrome.action.setIcon({ path: data[`${changeInfo.tabId}`] ? blueIconPath : grayIconPath, tabId: changeInfo.tabId });
     } else {
-      chrome.browserAction.setIcon({ path: grayIconPath, tabId: changeInfo.tabId });
+      chrome.action.setIcon({ path: grayIconPath, tabId: changeInfo.tabId });
     }
   });
 });

src/scripts/background/open-window.ts

@@ -38,7 +38,7 @@ export default function openDevToolsWindow(position: DevToolsPosition) {
         ...customOptions,
       };
       if (action === 'open') {
-        options.url = chrome.extension.getURL(
+        options.url = chrome.runtime.getURL(
           `${url}#${position.slice(position.indexOf('-') + 1)}`,
         );
         chrome.windows.create(options, (win) => {