Chrome插件 - SwaggerApi-Docs增强
最近开发的过程中,发现Swagger的Api页面很难用,复制API地址,总是会多复制了,所以想着就改造下,加入一键复制的按钮吧。
这里讲下具体的思路 manifest.json
内容如下
{
"manifest_version":2,
"name":"Swagger ui Tools",
"version": "1.0.0",
"description": "Simple to dev...For TaoZi",
"icons":
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
"background":
{
"page": "background.html",
"persistent": true
},
"content_scripts":
[
{
"run_at": "document_end",
"matches": ["http://*/swagger-ui.html*", "https://*/swagger-ui.html*","https://*/swagger-ui/*","http://*/swagger-ui/*"],
"js": ["js/swagger-ui-script.js"]
}
],
"permissions":
[
"contextMenus",
"tabs",
"notifications",
"webRequest",
"webRequestBlocking",
"storage",
"http://*/*",
"https://*/*"
],
"web_accessible_resources": ["js/swagger-ui-script-inject.js"],
"homepage_url": "https://www.djc8.cn",
"options_ui":
{
"page": "options.html",
"chrome_style": true
}
}
Swagger Api页面,是通过异步请求Api 信息的方式来获取的,这就要求必须要在页面加载结束才能进行嵌入按钮,这一步,Chrome的插件提供了网络访问方面的接口,可以通过该接口访问到具体网页访问的url,报文信息等。
chrome.webRequest.onCompleted.addListener(details => {
// cancel 表示取消本次请求
//return {cancel: true};
console.log(details.url);
if(details.url.indexOf("api-docs")!=-1){
sendMessageToContentScript({cmd:'start-api-docs',is_pa:is_pa}, function(response){});
}
}, {urls: ["<all_urls>"]});
之后调用sendMessageToContentScript
,通过内置的进程通信
,向content发送可以注入的消息start-api-docs
。
function sendMessageToContentScript(message, callback)
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
chrome.tabs.sendMessage(tabs[0].id, message, function(response)
{
if(callback) callback(response);
});
});
}
则content.js就会接收到对应的消息,之后会执行injectApiDocsJs
方法,注入js代码。
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
if(request.cmd == 'start-api-docs') {
sendResponse('');
if(!is_injectApiDocs){
injectApiDocsJs();
is_injectApiDocs=true;
}
}
});
注入的js代码这里不贴了,就是传统的jquery代码,以及对元素的一些查找,新建,可以直接看代码文件swagger-ui-script-inject.js
代码已经上传到GitHub上.给个star吧! 点击这里访问
Chrome插件
本文来自:Chrome插件 - SwaggerApi-Docs增强-小码农,转载请保留本条链接,感谢!
温馨提示:
本文最后更新于 2020年10月29日,已超过 1,471 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我。
正文到此结束
- 本文标签: chrome 扩展 extensions 谷歌 swagger swaggerui
- 本文链接: https://djc8.cn/archives/chrome-plug-in-swaggerapi-doc-enhancement.html
- 版权声明: 本文由小码农原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
热门推荐
该篇文章的评论功能已被站长关闭