手写一个谷歌post插件

最新推荐文章于 2024-05-17 07:05:35 发布
最新推荐文章于 2024-05-17 07:05:35 发布
阅读量714 收藏
点赞数
分类专栏： 工具软件 文章标签： chrome javaScript 跨域请求 post 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fwx426328/article/details/82194666
版权

手写一个谷歌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

三和小钢炮
关注
专栏目录
Chrome插件开发入门
m0_67400973的博客
08-01 3875
content_scripts是在web页面运行的JavaScript脚本，通过使用标准的DOM，它可以获取浏览器访问页面的详细信息，并可以修改这些信息。1、获取DOM元素2、修改DOM元素3、修改样式1、不能使用除了chrome.extension之外的chrome.*接口2、不能访问它所在扩展中定义的函数和变量3、不能访问web页面和其他content_scripts中定义的函数和变量4、不能做cross_siteXMLHttpRsquest。...
30分钟开发一款抓取网站图片资源的浏览器插件
趣谈前端
04-10 1380
前言由于业务需求, 笔者要为公司开发几款实用的浏览器插件,所以大致花了一天的时间,看完了谷歌浏览器插件开发文档,在这里特地总结一下经验, 并通过一个实际案例来复盘插件开发的流程和注意事...
谷歌浏览器POST/GET/HTTP请求测试插件Postman
11-28
用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的，用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具。今天给大家介绍的这款网页调试工具不仅可以调试简单的css、html、脚本等简单的网页基本信息，它还可以发送几乎所有类型的HTTP请求！Postman在发送网络HTTP请求方面可以说是Chrome插件类产品中的代表产品之一。
手写插件：使 Chrome 增加 右键菜单项 实现多搜索
Gamers's blog
03-15 1260
参考： https://www.cnblogs.com/kevin-Y/p/10119838.html 1、随地创建一个文件包并命名 2、文件包内创建以下文件： 2.1 ./manifest.json { "manifest_version":2, //必需是2 "name": "BaiduSeachString", "version": "0.1.0", ...
Google Input Tools 输入工具 | 谷歌（Chrome）浏览器插件
03-03
【插件简介】 Google Input Tools 是一款浏览器内置的云输入法，和传统PC或手机输入法相比，云输入法可支持90多种不同的语言并且还支持音译和手写输入。 【插件开发者】 @cloud-input-team 【插件更新】 2020-12-29 14:52:03 【插件版本】 10.1.0.3 【插件标签】 工具 办公效率 Chrome插件 【插件安装教程】 请下载文件后先解压，然后进入页面： chrome://extensions/ 将文件拖拽到该页面，完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手： https://plugin.csdn.net/
Go最新谷歌浏览器扩展postman插件，亲测有效_谷歌发送请求扩展插件(3)，2024年京东Golang岗面试必问
最新发布
2401_84911559的博客
05-17 380
网上看了许多文章，大多都一开始就是介绍postman有什么用，或者去chrome商店下载，亦或者去三方网站下载crx文件进行解压。但是这样的话，就很烦躁，就不能直接一点吗？为了让各位开发者们能迅速的在谷歌浏览器上扩展好postman插件，于是我将解压好的扩展程序放在了百度网盘，供各位下载使用。1.解压文件到你想要存放的目录，当然是越方便查找越好。点击进去，选择加载已解压的扩展程序。首先，打开设置，找到扩展应用程序。2. 打开谷歌浏览器加载扩展程序。选择你存放扩展程序的文件夹即可。
跨域问题以及如何手写一个代理服务实现postman功能
jakeswang的博客
01-07 583
写一个代理工具服务，所有的请求经过此服务转发到不同的服务，可以统一处理跨域问题，只要允许这个服务的请求即可。 中转工具： https://blog.csdn.net/xxssyyyyssxx/article/details/72954499 1. 用户浏览器自己放开跨域限制： https://www.jianshu.com/p/2db73311fcbe 2. nginx部分一些对域名的操作：...
如何从零开始写一个网关
stupid_Java_learner的博客
01-11 4625
一、前言 最近在github上看了soul网关的设计，突然就来了兴趣准备自己从零开始写一个高性能的网关。折腾了大概三周时间，我的网关ship-gate核心功能基本都已完成，写这篇文章是记录我是如何从零开始手写一个网关的。 二、设计 2.1技术选型 网关是所有请求的入口，所以要求有很高的吞吐量，为了实现这点可以使用请求异步化来解决。目前一般有以下两种方案： Tomcat/Jetty+NIO+Servlet3 Servlet3已经支持异步，这种方案使用比较多，京东，有赞和Zuul，都用的是这种
使用Nginx将请求转发至Google Analytics实现后端数据统计
Mr_EasonYang的博客
06-20 732
前言 Google Analytics 加载缓慢是本博客在国内访问缓慢的原因之一。虽然通过使用大公司的 ga.js 的 CDN ，可以很大程度上加快加载 ga.js 文件的速度（ ga.js 的更新频率很高，并不适合缓存到本地或服务器，所以最好自己反代或者借大公司的光，参见 谷歌分析(Google Analytics) 加速实现秒加载页面 ），但无论如何还是要向 Google 发送一个请求来发送访客数据，所以取巧地使用 CDN 并不能从根本上解决问题。前段时间翻看一个知名博主的文章时，有一篇名为 本博客零散
三、mock与umi-plugin-react插件
rocktanga的博客
02-13 1258
一、Mock 数据 umi 里约定 mock 文件夹下的文件或者 page(s) 文件夹下的 _mock 文件即 mock 文件。 这个mock数据，默认导出的结果，前面为请求方式和请求的url，后面的为返回前端的结果。结果可以是函数，也可以是对象 关闭mock：直接返回mock：false，就可以关闭mock了。如果是用的ant design pro那么直接运行命令的时候就可以关闭mock 注：返回值为函数的时候就很灵活，函数里面就相当于在写java代码一样(只不过还是js语法)，可以设置
chrome http请求插件(可离线安装)
11-21
DHC是一款可以帮助用户使用chrome插件模拟HTTP客户端发送测试数据到服务器的谷歌浏览器插件，在chrome中安装了DHC插件以后，就可在服务器端代码初步完成的时候，使用DHC进行数据测试，支持get、post、put、delete请求，可离线安装
postman接口流程总结（纯手打）
weixin_47026288的博客
09-06 1674
postman接口流程总结（纯手打）
Postman用法简介
热门推荐
透明
10-10 29万+
Postman用法简介-Http请求模拟工具 　　在我们平时开发中，特别是需要与接口打交道时，无论是写接口还是用接口，拿到接口后肯定都得提前测试一下，这样的话就非常需要有一个比较给力的Http请求模拟工具，现在流行的这种工具也挺多的，像火狐浏览器插件-RESTClient，Chrome浏览器插件-Postman等等。这里主要介绍一下Postman。  一、Postman说明
chrome组件开发--填表组件简单例子
xiejx618的专栏
08-13 4381
主要参考开发指导(在大陆想打开,必要时,翻墙!):https://developer.chrome.com/extensions/devguide 这周末公司组织旅游,那边发过来了一个填表页的页面,填的信息多,我们人数也不少.如果一个字段一字段复制,我觉得是比较麻烦事.我想是否有一个可以自动填写的工具.于是萌发了怪想法.开发完最后的效果如下图 1.split就是分隔符; 2.keys就是填写
postman中常用的tests模板以及对应的手写断言
自动化测试学习笔记
09-18 1487
#2、模板 Response body: contains string。注意 ：200与201之间为或的关系 用户“||”连接。注意：只能写两个状态码，二选一。中英文符号错误，必须是英文符号。###检查响应时间范围。：tests少写s；
POST谷歌插件
weixin_34297704的博客
02-23 1084
2019独角兽企业重金招聘Python工程师标准>>> ...
【学术】希腊字母的发音、手写、区分
小白兔的窝
07-18 7万+
1. 发音 希腊字母常用指代意义及其中文读音 序号 大写 小写 英语音标注音 英文 汉语名称 常用指代意义 1 Α α /'ælfə/ alpha 阿尔法 角度、系数、角加速度、第一个、电离度、转化率 2 Β β /'bi:tə/ 或 /'beɪtə/
数学物理中希腊字母的手写体笔顺及写法
Dunkle.T的博客
08-18 3万+
一篇外籍论文中的书写法： 读音及入笔点： 手写印刷体（推荐使用，方便阅读及老师评阅。）： 扩展阅读：手写希腊字母说明（外文翻译）        下面给出了手写希腊字母的说明。每个字母在左侧以大写形式给出，在右侧以小写形式给出。如果希腊字母与某个罗马字母相同（即使希腊字母代表不同的发音），则不会给出任何说明，假设读者知道如何绘制罗马字母。否则，绘制希腊字母所需的笔画会被编号 (1, 2, 3,…)，除非只有一个笔画，并且每个笔画的起点
手摸手教你写个chrome插件
Pluto
07-02 2242
目录 需求分析 官网Demo入门 Manifest配置文件 实现思路 核心代码 实现效果 不知道大家有没有过类似的经历，查阅资料时经常会打开一堆临时tab标签，不至于到要加入收藏夹的地步，但是直接关了再找又麻烦，而且挤挤挨挨的一堆找起来也很费眼睛… 有没有什么工具能保存下我打开的tab，并且能方便地查看？ 受到印象笔记剪藏插件的启发，我找到了个插件OneTab，可以一键关闭所有标签页并保存到一个页面中： 出于好奇，我去了解了下：如何写一个chrome插件？ 再次打开一堆tab… 写一个chrom
手写一个简单 浏览器插件并测试
06-08
好的，我可以为你提供一个简单的浏览器插件，并教你如何在浏览器中测试它。假设你使用的是 Google Chrome 浏览器。 1. 首先，打开 Chrome 浏览器并在地址栏中输入 chrome://extensions/ 进入扩展程序页面。 2. 在页面右上角打开开发者模式。 3. 点击“加载已解压的扩展程序”，选择一个包含插件文件的文件夹并打开。 4. 插件就会被加载到浏览器中。现在，你可以在浏览器中测试它了。 5. 假设你想测试一个简单的插件，比如一个能够在页面上显示当前时间的插件。你可以创建一个名为 popup.html 的文件，并添加以下代码： ``` <!DOCTYPE html> <html> <head> <title>Current Time</title> <script src="popup.js"></script> </head> <body> <p id="time"></p> </body> </html> ``` 6. 在同一个文件夹中创建一个名为 popup.js 的文件，并添加以下代码： ``` document.addEventListener('DOMContentLoaded', function() { var time = document.getElementById('time'); var currentTime = new Date().toLocaleString(); time.textContent = 'Current time: ' + currentTime; }); ``` 7. 现在，你可以重新加载插件并测试它了。点击插件图标，应该会弹出一个页面，上面显示当前时间。 这只是一个简单的例子，但你可以根据自己的需求编写更复杂的插件，并在浏览器中测试它们。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三和小钢炮

谢谢客官~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值