手写一个谷歌post插件
程序员文章站
2022-07-10 10:27:39
...
手写一个谷歌post插件
00 前言
公司的mac极不方便，下个postman都下不了，没办法只有自己写一个。
想到两种方法：
1.写一个服务端，做转发。
2.写一个谷歌插件，避开跨域问题。
明显，第二种方法更高效和实用。
01 配置
我们新建一个文件夹取名post
首先配置 manifest.json
{
"name":"post",
"version":"1.0",
"manifest_version":2,
"content_security_policy": "[POLICY STRING GOES HERE]",
"description":"三和小钢炮",
// 权限申请
"permissions":
[
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"webRequestBlocking",
"storage", // 插件本地存储
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
],
"browser_action":{
"default_icon":"icon.png",
"default_popup":"popup.html"
},
"web_accessible_resources":[
"icon.png",
"popup.js"
],
"background":{
"scripts":["background.js"],
"persistent": true
}
}
02 popup.html
新建文件popup.html，用于插件显示页面。
popup.html里面的bootstarp、jquery等均为普通第三方工具，引用即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lib/bootstarp.css">
<link rel="stylesheet" type="text/css" href="lib/jquery.json-viewer.css">
<link rel="stylesheet" type="text/css" href="popup.css">
<script type="text/javascript" src="lib/jquery-1.12.2.js"></script>
<script type="text/javascript" src="lib/jquery.json-viewer.js"></script>
<script type="text/javascript" src="background.js"></script>
<script src="popup.js"></script>
<table class="table table-hover">
<thead>
<tr>
<th colspan="2" class="text-center bg-primary">post工具</th>
</tr>
</thead>
<tbody>
<tr>
<td>请求地址</td>
<td>
<input id="url" type="" name="" style="width: 100%">
</td>
</tr>
<tr>
<td>请求方式</td>
<td>
<select id="type" style="width: 100%">
<option value="get">---get---</option>
<option value="post">---post---</option>
</select>
</td>
</tr>
<tr>
<td>参数</td>
<td>
<textarea id="params" rows="10" cols="30" style="width: 100%"></textarea>
</td>
</tr>
<tr>
<td>结果</td>
<td>
<pre id="result" style="width: 100%;min-height: 40px;"></pre>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-right" colspan="2">
<div class="btn btn-primary" id="sbmBtn">提交</div>
</td>
</tr>
</tfoot>
</table>
</head>
<body>
</body>
</html>03 popup.css
popup.html样式
body{
width:450px;
}04 popup.js
popup.html只能用popup.js操作dom，千万不要写在popup.html里面。
在popup.js里面肯定是发送不了跨越的ajax的，我们下面还要用到background.js。
popup.js代码如下：
$(function(){
// 获取background.js
var winBackgroundPage = chrome.extension.getBackgroundPage();
init();
function init() {
var url = window.localStorage.getItem('post.url');
var type = window.localStorage.getItem('post.type');
var params = window.localStorage.getItem('post.params');
var result = window.localStorage.getItem('post.result');
url && $("#url").val(url);
type && $("#type").val(type);
params && $("#params").val(params);
result && renderJSON(result);
}
function renderJSON(json) {
var rep = '';
try{
rep = JSON.parse(json);
}catch(e){
rep = json;
}
$('#result').jsonViewer(rep, {
collapsed: false,
withQuotes: true
});
};
function sendAjax() {
var url = $("#url").val();
var type = $("#type").val();
var params = $("#params").val().replace(/\s/g,"").replace(/\'/g, "\"");
window.localStorage.setItem('post.url', url);
window.localStorage.setItem('post.type', type);
window.localStorage.setItem('post.params', params);
try {
if (!!params) {
params = JSON.parse(params);
}
} catch(e) {
params = 'JSON入参错误!';
renderJSON(params);
window.localStorage.setItem('post.result', params);
return;
}
winBackgroundPage.ajax($, type, url, params, function(msg){
window.localStorage.setItem('post.result', JSON.stringify(msg));
renderJSON(msg);
});
}
$("#sbmBtn").click(sendAjax);
});
05 background.js
background.js是谷歌里面生命周期最长，权限最高的js。我们在这里面发起ajax，回传给popup.js。这样就可以避开浏览器跨越问题。
background.js代码如下：
// 这里要把jquery对象传进去使用
function ajax($, type, url, params, fn){
$.ajax({
type: type,
url: url,
data: params || {},
success: function(msg) {
fn && fn(msg);
},
error: function(error) {
fn && fn(error);
}
})
}06 图标
icon.png 配置文件已经声明。
别忘了给自己的插件加上一个炫酷的图标。
07 使用
我们打开谷歌扩展工具，把post文件拖进去。
此时右上角就会出现图标：
08 测试
我们简单写一个php文件测试下：
test.php文件如下：
<?php
$a = $_POST["a"];
echo "{\"a\":".$a."}";
?>结果如下：
09 后续
到此，post工具的功能已经实现，体验问题可以做细节优化。
代码在gitHub上
https://github.com/fwx426328/postStar