原创

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,305 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我
正文到此结束
该篇文章的评论功能已被站长关闭
本文目录