前言
项目开发中碰到一个棘手的问题，采用qiankun2.0为前端框架开发，因子项目直接是编译完的项目加载进来，vue develop已无法定位并打开文件了。 上一文章已经解决了chrome如何打开vocode，现在解决如何根据页面路由地址打开文件
自定义chrome插件 文件目录 quickOpen -images hello_extensions.png -scripts content-script.js hello.html manifest.json popup.js
demo.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<button id="quickOpen">quickOpen</button>
</body>
</html>
popup.js 由于浏览器的沙箱环境，插件拿不到页面的window对象，但dom对象是共享的，所以可以借助消息通知的形式拿到对应的信息。乾坤子项目或一般项目的path匹配可自行修改。
/**
* @Description: chrome根据地址快速打开项目文件
* @Author: sige.gao
* @Date: 2023-04-04 09:15:48
*/
(function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, { action: "copy" }, function (response) {
chrome.tabs.sendMessage(tabs[0].id, { action: "over" })
//MAC
// let URL = 'vscode://file';
// let dir = '\/Users\/sige.sige\/Documents\/code\/'
//windows
let URL = 'openupload:';//这个和注册表关联，可自己修改协议
let dir = 'D\:\/workspace\/';//工作空间
//项目文件，url中截取逻辑自行修改
//以下是qiankun逻辑判断
let proArr = {
network: "network"
}
let project = '\/' + response.replace(/\//g, '\/');
for (let key in proArr) {
if (tabs[0].url.match(key)) {
window.open(URL + dir + proArr[key] + project);
break;;
}
}
});
});
})();
manifest.json 增加content-script.js,用于接收消息
{
"manifest_version": 2,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"browser_action": {
"default_icon": "images/hello_extensions.png",
"default_title": "Copy Data",
"default_popup": "hello.html"
},
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js": [ "scripts/content-script.js" ]
}
],
"permissions": ["scripting","activeTab"]
}
content-script.js 用于接收消息，手动添加script获取window对象的相应数据，查看项目信息
/**
* @Description: chrome根据地址快速打开项目文件
* @Author: sige。gao
* @Date: 2023-04-04 09:15:48
*/
chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
let script;
let ctrl;
if (request.action === "copy") {
script = document.createElement('script');
script.id = 'quickOpen';
script.type = 'text/javascript';
script.innerHTML = `(function(){
var el = document.createElement('input');
el.id = 'quickOpenInsetData';
el.setAttribute('style','display:none;')
let router = window.routerList['network']
let coms = router.getMatchedComponents();
let path = coms[0].__file
console.log(path)
el.value = path;
document.body.appendChild(el);
})()`;
document.body.appendChild(script);
ctrl = document.querySelector("#quickOpenInsetData");
if (ctrl.value.length > 0) {
if (sendResponse) sendResponse(ctrl.value);
}
}
if (request.action === "over") {
console.log('over==============')
document.body.removeChild(document.querySelector("#quickOpen"));
document.body.removeChild(document.querySelector("#quickOpenInsetData"));
}
}
);
安装chrome插件后如上图所示
由于windows上vscode打开过再次打开就没反应，采用注册表的形式打开xxx:// 而不用vscode://来解决此问题 桌面新增txt文件，内容如下，修改完路径后更改后缀名.reg quickOpen.reg（自行修改文件路径）
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\openupload]
@="URL:openupload Protocol"
[HKEY_CLASSES_ROOT\openupload\DefaultIcon]
@="cmd.exe,1"
[HKEY_CLASSES_ROOT\openupload\shell]
[HKEY_CLASSES_ROOT\openupload\shell\open]
[HKEY_CLASSES_ROOT\openupload\shell\open\command]
//可修改你的cmd命令，运行之前删除所有注释
@="\"C:\\Users\\sige.gao\\Desktop\\quickOpen.bat\" \"%1\""
双击执行文件
桌面新增txt文件，内容如下，修改完路径后更改后缀名.bat quickOpen.bat（自行修改文件路径）
@echo off
set m=%1%
set m=%m:openupload:=%
start "" "D:\\VSCode\\Code.exe" %m%
exit
运行项目，进入某个页面后点击插件，就可以打开具体文件啦。
