!85 [inula-dev-tools]<feat> 调试工具主函数合入
Merge pull request !85 from 涂旭辉/master
This commit is contained in:
openInula-robot
Gitee
commit
bb12fe6eea
|
|
@ -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' });
|
||||||
|
});
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue