Chrome插件开发 popup.html Click事件

df_for_csdn 2016-10-07 03:15:38

请问html页面如何与js文件进行交互，可能我描述的不太准确，我目前想要实现这个chrome插件单击按钮在指定域进行ajax操作



function get_token() {

    return location.href.substring(location.href.length, location.href.length - 10);

}

function get_csrf_token(token) {

    var csrf_token = '';

    $.ajax({

        type: 'GET',

        url: 'https://mp.weixin.qq.com/pay/index.php/dev_setting?token=' + token + '&lang=zh_CN',

        async:false

    }).success(function (data) {

        var regCode = 'wx_csrf_token" value="(.*?)"';

        csrf_token = data.match(regCode)[1];

    });

    return csrf_token;



}

function add_domain_publicPay(csrf_token, url) {

    $.ajax({

        type: 'POST',

        url: 'https://mp.weixin.qq.com/pay/index.php/dev_setting/set_test_dir?g_ty=ajax',

        data: 'wx_csrf_token=' + csrf_token + '&paydir='+url+'&dir=',

        async: false

    }).success(function (data) {

        console.log(data);

    });

}

function add_domain_callback(token,domain) {

    $.ajax({

        type: 'POST',

        url: 'https://mp.weixin.qq.com/merchant/myservice?action=set_oauth_domain&f=json',

        data: 'token='+token+'&lang=zh_CN&f=json&ajax=1&random=0.1394041796069092&domain='+domain,

        async: false

    }).success(function (data) {

        console.log(data);

    });

}

  

 

alert(document.cookie);

我现在遇到的问题是当我单击插件图标按钮时,此刻alert(document.cookie);生效,但popup页面没有被弹出显示,把这一句注释掉之后可以显示页面,但我注册了#btn-update的单击事件之后就不知道该怎么向js那边发起命令,总之就是html页要接收两个参数,然后单击按钮。

以下是我json文件跟html代码：



{

  "manifest_version": 2,

  "name": "WeCatApp",

  "description": "weixin.qq.com",

  "version": "1.0.0.0",

  "icons": {

    "32" : "icon.png"

  },

  "permissions": [

    "tabs", "http://*/*","https://*/*"

  ],

  "content_scripts": [

    {"js":["jquery-1.7.1.js","wxpay.js"],"matches":["https://*.weixin.qq.com/*"]}

  ],

  "browser_action": {

    "default_title": "IT.HongWei",

	"default_popup": "popup.html"

  },

  "manifest_version": 2

}



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style>

        * {

            margin:0px;

            list-style:none;

            font-family:微软雅黑;

        }



        div {

            margin:0px auto;

            width:300px;

        }



        ul {

            padding-top: 15px;

            padding-left: 0px;

        }



            ul li {

                line-height:20px;

            }



        #btn-update {

            margin-top: 10px;

            /*margin-left: 112.375px;*/

            margin-left: 60px;

            width: 60%;

        }



        #li-btn-update {

            height:50px;

        }



        span {

            margin-left: 60px;

        }



        .form-control-user {

            display: block;

            width: 60%;

            height: 34px;

            padding: 6px 12px;

            font-size: 14px;

            line-height: 1.42857143;

            color: #555;

            background-color: #fff;

            background-image: none;

            border: 1px solid #ccc;

            border-radius: 4px;

            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;

            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

            margin-left: 60px;

        }

    </style>

    <link href="bootstrap.min.css" rel="stylesheet">

    <script src="wxpay.js"></script>

    <script src="jquery-1.7.1.js"></script>

    <script>

        //<meta http-equiv="refresh" content="20">

        function btnClickEvent() {



        }

    </script>





</head>

<body>

    <div>

        <ul>

            <li><h6><span class="label label-Default">支付域名</span></h6></li>

            <li><input id="txt-payUrl" type="text" class="form-control-user" placeholder="支付授权目录" required autofocus value="onelaughcs.cn" /></li>

            <li><h6><span class="label label-Default">回调域名</span></h6></li>

            <li><input id="txt-callUrl" type="text" class="form-control-user" placeholder="OAuth2.0授权回调" value="onelaughcs.cn" /></li>

            <li id="li-btn-update"><input type="button" id="btn-update" class="btn btn-primary " value="确定更新" onclick="btnClickEvent()"/></li>

        </ul>

    </div>

    

    

</body>

</html>