原创

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,514 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。

正文到此结束

所属分类：JavaScript

本文标签： chrome 扩展 extensions 谷歌 swagger swaggerui
本文链接： https://djc8.cn/archives/chrome-plug-in-swaggerapi-doc-enhancement.html
版权声明： 本文由小码农原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

Chrome插件 - SwaggerApi-Docs增强

热门推荐

相关文章

关于我

本文目录

标签云

近期评论

网站信息