地址插件github地址说明有时候浏览github看别人的项目，想看看他们的包里引用了哪些包，而且您不知道这些包裹的用途。复制再搜索有点麻烦。我想实现一个chrome插件，点击包名可以跳转到对应的github地址，npm地址或者google搜索。可能已经有插件实现了，懒得找了。简单实现起来并不难，以后自己添加功能也方便。实现并配置manifest.jsoncontent_scripts的matches属性，设置遇到任意url时执行的js脚本。content-script.js是需要执行的脚本。popup.html为点击插件后的弹窗，配置插件名称和描述，添加插件图标。ok，其他暂时不用了。{"name":"PKG-URL","description":"获取github项目包的url。","version":"1.0","manifest_version":3,"content_scripts":[{"matches":["https://github.com/*/*"],"js":["content-script.js"]}],"action":{"default_popup":"popup.html"},"icons":{"16":"/imgs/logo.png","32":"/imgs/logo.png","48":"/imgs/logo.png","128":"/imgs/logo.png"}}从逻辑上讲，这些类不应更改。获取package.json中所有包名的dom，为其添加点击事件，点击时弹窗会显示npm/github/google选项，并转到对应的地址。consthighlight=document.querySelector(".highlight");constallBlobCode=highlight.querySelectorAll("trtd.blob-code");constallPkg=handle([...allBlobCode]);constToolDom=createToolDom();letsearchKey="";allPkg.forEach((item)=>{item.style.cursor="指针";item.title="点击跳转";item.addEventListener("点击",()=>{searchKey=item.innerText.replace(/\"/g,"");item.parentElement.appendChild(ToolDom);});});处理dom，因为它的package.json中的每一行都是trtd封装的。这里只在dependencies和devDependencies下的dom中添加click事件，其他暂时忽略。functionhandle(allBlobCode){functionfilterPkg(allPkg,key){constindex=allPkg.findIndex((item)=>{constent=item.querySelector("span.pl-ent");returnent&&ent.innerText===键；});常量pkgs=索引!==-1？allPkg.slice(index+1):[];constend=pkgs.findIndex((v)=>v.innerText.includes("}"));返回结束！==1？包。切片（0，结束）：pkgs；}constdepPkg=filterPkg(allBlobCode,'"dependencies"');constdevPkg=filterPkg(allBlobCode,'"devDependencies"');return[...depPkg,...devPkg].map((el)=>el.querySelector("span.pl-ent")||el);}createToolDom函数是创建我们的弹窗dom，不知道能不能以html和css的形式引入。这里懒得看文档了，以后再研究。一、直接在js中创建，反正代码也不多；都是dom样式的傻代码，这里就不贴了。具体可以去github地址看源码。先去搜索就行了，官方跳转有点麻烦。本来是想直接上搜索结果的第一个的，但是第一个可能不是官方的，先这样吧。也比较方便，不用复制再打开网页搜索。btn.addEventListener("click",()=>{if(!searchKey)return;consturl={npm:`https://www.npmjs.com/search?q=${searchKey}`,github:`https://github.com/search?q=${searchKey}`,谷歌:`https://www.google.com/search?q=${searchKey}`,};window.open(url[value]);});?效果OK，至此完成，在popup.html中写一点介绍。当你移动到包名时，会提示你点击，指针会变成一个小手指。点击后会弹出弹窗选择对应的地址。总结一下，做一些简单的功能还是挺简单的（好像是废话哈哈哈），好像发插件要花钱，懒得做，本地用就算了。想用的朋友可以去github地址自行下载导入。
