关于chrome-extension:一个可以跳转GitHub项目package引入包地址的插件

37次阅读

共计 2313 个字符,预计需要花费 6 分钟才能阅读完成。

地址

插件 github 地址

形容

有时候逛 github 看他人我的项目的时候,想看看他们的 package 外面援用了什么包,不晓得这些包是干什么的。复制再去搜寻感觉有点麻烦,就想实现一个 chrome 插件点击包名的时候能跳转到对应的 github 地址、npm 地址或者 google 搜寻。兴许曾经有插件实现了,懒得去找了,简略的实现一下并不难,也不便当前本人加性能。

实现

  • 配置 manifest.json

content_scripts 的 matches 属性设置在遇到什么 url 的时候去执行 js 脚本,content-script.js 既是须要执行的脚本。

popup.html 是插件点击后的弹窗,配置一下插件名和形容,增加插件 icon。ok,其余的临时不须要。

{
  "name": "PKG-URL",
  "description": "Get url of the github project's package.","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"
  }
}

实现逻辑

按情理这些 class 应该不会变的,获取 package.json 外面的所有包名的 dom,给他们增加点击事件,点击时候弹窗显示 npm/github/google 选项,到对应的地址。

const highlight = document.querySelector(".highlight");
const allBlobCode = highlight.querySelectorAll("tr td.blob-code");
const allPkg = handle([...allBlobCode]);
const ToolDom = createToolDom();
let searchKey = "";

allPkg.forEach((item) => {
  item.style.cursor = "pointer";
  item.title = "点击可跳转";
  item.addEventListener("click", () => {searchKey = item.innerText.replace(/\"/g,"");
    item.parentElement.appendChild(ToolDom);
  });
});

解决一下 dom,因为它 package.json 外面的每一行都是 tr td 包裹的。这里筛选一下,只对 dependenciesdevDependencies 上面的 dom 增加点击事件,其它的临时不论。

function handle(allBlobCode) {function filterPkg(allPkg, key) {const index = allPkg.findIndex((item) => {const ent = item.querySelector("span.pl-ent");
      return ent && ent.innerText === key;
    });
    const pkgs = index !== -1 ? allPkg.slice(index + 1) : [];
    const end = pkgs.findIndex((v) => v.innerText.includes("}"));
    return end !== 1 ? pkgs.slice(0, end) : pkgs;
  }
  const depPkg = filterPkg(allBlobCode, '"dependencies"');
  const devPkg = 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;
      const url = {npm: `https://www.npmjs.com/search?q=${searchKey}`,
        github: `https://github.com/search?q=${searchKey}`,
        google: `https://www.google.com/search?q=${searchKey}`,
      };
      window.open(url[value]);
    });Ï

成果

OK,这样就实现了,略微在 popup.html 外面写点介绍。

挪动到包名下面会提醒能够点击,指针也会变成小手指,点击就会弹窗抉择到对应的地址去。

总结

简略的做一些性能还是挺简略的(如同是句废话哈哈哈),公布插件如同要花钱,懒得搞了,本地用用算了。想用的小伙伴能够去 github 地址下载自行引入。

正文完
 0