!85 [inula-dev-tools]<feat> 调试工具主函数合入

Merge pull request !85 from 涂旭辉/master

packages/inula-dev-tools/src/contentScript/index.ts

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { injectSrc, injectCode } from '../utils/injectUtils';
+import { checkMessage } from '../utils/transferUtils';
+import { DevToolContentScript, DevToolHook, DevToolBackground } from '../utils/constants';
+import { changeSource } from '../utils/transferUtils';
+
+// 页面的 window 对象不能直接通过 contentScript 代码修改，只能通过添加 js 代码往页面 window 注入 hook
+const rendererURL = chrome.runtime.getURL('/injector.js');
+if (window.performance.getEntriesByType('navigation')) {
+  const entryType = (window.performance.getEntriesByType('navigation')[0] as any).type;
+  if (entryType === 'navigate') {
+    injectSrc(rendererURL);
+  } else if (entryType === 'reload' && !(window as any).__INULA_DEV_HOOK__) {
+    let rendererCode;
+    const request = new XMLHttpRequest();
+    request.addEventListener('load', function () {
+      rendererCode = this.responseText;
+    });
+    request.open('GET', rendererURL, false);
+    request.send();
+    injectCode(rendererCode);
+  }
+}
+
+// 监听来自页面的信息
+window.addEventListener(
+  'message',
+  event => {
+    // 只监听来自本页面的消息
+    if (event.source !== window) {
+      return;
+    }
+
+    const data = event.data;
+    if (checkMessage(data, DevToolHook)) {
+      changeSource(data, DevToolContentScript);
+      // 传递给 background
+      chrome.runtime.sendMessage(data);
+    }
+  },
+  false
+);
+
+// 监听来自 background 的消息
+chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
+  // 该方法可以监听页面 contentScript 和插件的消息
+  // 没有 tab 信息说明消息来自插件
+  if (!sender.tab && checkMessage(message, DevToolBackground)) {
+    changeSource(message, DevToolContentScript);
+    // 传递消息给页面
+    window.postMessage(message, '*');
+  }
+  sendResponse({ status: 'ok' });
+});

packages/inula-dev-tools/src/main/index.ts

@@ -0,0 +1,101 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { render, createElement } from 'openinula';
+import Panel from '../panel/Panel';
+import PanelX from '../panelX/PanelX';
+
+let panelCreated = false;
+
+const viewSource = () => {
+  setTimeout(() => {
+    chrome.devtools.inspectedWindow.eval(`
+      if (window.$type != null) {
+        if (
+          window.$type &&
+          window.$type.prototype &&
+          window.$type.prototype.render
+        ) {
+          // 类组件
+          inspect(window.$type.prototype.render);
+        } else {
+          // 函数组件
+          inspect(window.$type);
+        }
+      }
+    `);
+  }, 100);
+};
+
+const inspectVNode = () => {
+  chrome.devtools.inspectedWindow.eval(
+    `
+      window.__INULA_DEV_HOOK__ && window.__INULA_DEV_HOOK__.$0 !== $0
+      ? (inspect(window.__INULA_DEV_HOOK__.$0.realNode), true)
+      : false
+    `,
+    (_, error) => {
+      if (error) {
+        console.error(error);
+      }
+    }
+  );
+};
+
+let currentPanel = null;
+
+chrome.devtools.inspectedWindow.eval(
+  'window.__INULA_DEV_HOOK__',
+  function (isInula, error) {
+    if (!isInula || panelCreated) {
+      return;
+    }
+
+    panelCreated = true;
+    chrome.devtools.panels.create(
+      'Inula',
+      '',
+      'panel.html',
+      (extensionPanel) => {
+        extensionPanel.onShown.addListener((panel) => {
+          if (currentPanel === panel) {
+            return;
+          }
+          currentPanel = panel;
+          const container = panel.document.getElementById('root');
+          const element = createElement(Panel, { viewSource, inspectVNode });
+          render(element, container);
+        });
+      }
+    );
+
+    chrome.devtools.panels.create(
+      'InulaX',
+      '',
+      'panelX.html',
+      (extensionPanel) => {
+        extensionPanel.onShown.addListener((panel) => {
+          if (currentPanel === panel) {
+            return;
+          }
+          currentPanel = panel;
+          const container = panel.document.getElementById('root');
+          const element = createElement(PanelX, {});
+          render(element, container);
+        });
+      }
+    );
+  }
+);

packages/inula-dev-tools/src/main/main.html

@@ -0,0 +1,30 @@
+<!--
+  ~ Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+  ~
+  ~ openInula is licensed under Mulan PSL v2.
+  ~ You can use this software according to the terms and conditions of the Mulan PSL v2.
+  ~ You may obtain a copy of Mulan PSL v2 at:
+  ~
+  ~          http://license.coscl.org.cn/MulanPSL2
+  ~
+  ~ THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+  ~ EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+  ~ MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+  ~ See the Mulan PSL v2 for more details.
+  -->
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Security-Policy"
+        content="default-src *; style-src 'self' 'unsafe-inline'; srcipt-src 'self' 'unsafe-inline' 'unsafe-eval' ">
+  <script src="inula.development.js"></script>
+</head>
+
+<body>
+  <div>
+    <p>Inula dev tools!</p>
+  </div>
+</body>
+<script> src="main.js"</script>
+</html>