chrome插件根据页面地址用vscode打开文件解决大项目如何在页面开发、生产问题排查时快速定位具体文件。包含 ch

前言

为了解决大项目如何在页面生产问题排查时快速定位具体文件。和vue develop插件稍稍有点区别。此demo项目是vue类型项目，其他框架类型的可以适当修改配置。

自定义chrome插件

文件夹目录

quickOpenFile
- images
  - hello_extensions.png
- demo.html
- manifest.json
- popup.js

demo.html

<html>
  <body>
    <button id="a">quickOpenFile</button>
    <script src="popup.js"></script>
  </body>
</html>

manifest.json

{
    "manifest_version": 3,
    "name": "Hello Extensions",
    "description": "Base Level Extension",
    "version": "1.0",
    "action": {
      "default_popup": "demo.html",
      "default_icon": "images/hello_extensions.png"
    },
    "permissions": ["scripting","activeTab"]
  }

popup.js

async function getCurrentTab() {
    let queryOptions = { active: true, lastFocusedWindow: true };
    // `tab` will either be a `tabs.Tab` instance or `undefined`.
    let [tab] = await chrome.tabs.query(queryOptions);
    console.log(tab.url)
    //MAC
    // let URL = 'vscode://file';
    // let dir = '\/Users\/sige.sige\/Documents\/code\/'
    // let pro = ''
    //windows
    let URL = 'quickOpenFile:';//这个和注册表关联，可自己修改协议
    let dir = 'D\:\/workspace\/';//工作空间，需要\转义
     
    //项目文件，url中截取逻辑自行修改
    let str = '';
    let patt1 = /demo/;//根据url匹配项目demo，非此类型的不做跳转
    let mc = tab.url.match(patt1) //http://demo.com.cn/routePath路由的逻辑自行编写
    if(mc){
      str+=`\/${mc[0]}`
      let project = '\/src\/views/';
      let routePath = routePath;
      str = str + project + routePath + '\/Index.vue';
      }
      window.open(URL+dir+str);
    }
  }
  getCurrentTab();

自行安装chrome插件，打开开发者选项

企业微信截图_16801688558591.png

此处完成通过插件跳转至quickOpenFile:XXX自定义协议路径

新增自定义注册表（注意需子那个更改bat的路径，"%1"是取参数）

quickOpenFile.reg

    [HKEY_CLASSES_ROOT\quickOpenFile]
    @="URL:quickOpenFile Protocol"
    
    [HKEY_CLASSES_ROOT\quickOpenFile\DefaultIcon]
    @="cmd.exe,1"
    
    [HKEY_CLASSES_ROOT\quickOpenFile\shell]
    
    [HKEY_CLASSES_ROOT\quickOpenFile\shell\open]
    
    [HKEY_CLASSES_ROOT\quickOpenFile\shell\open\command]
    //可修改你的cmd命令，运行之前删除所有注释
    @="\"C:\\Users\\sige\\Desktop\\quickOpenFile.bat\" \"%1\""

新增指令集（注意vscode的安装目录）

quickOpenFile.bat

@echo off
set m=%1%
set m=%m:quickOpenFile:=%
start "" "D:\\VSCode\\Code.exe" %m%
exit

文件配置好后双击quickOpenFile.reg，完成注册表

至此，完成点击

直接打开vscode，并打开具体文件了。。