Chrome插件开发

如何获取页面数据在插件进行处理

主要是两个文件：
popup.js和content-script.js
popup.js是popup.html的js脚本，popup.html就是点击插件打开的页面

content-script.js是注入到当前浏览器所在页面到脚本。

如果popup.js想处理浏览器当前页的一些数据，需要在content-script.js获取数据，然后传给popup.js
popup.js代码

sendMessageToContentScript({cmd:'tapd'}, (response) => {
            if(response)
            {
                if (url.includes('/prong/stories/view')) {
                    console.log('字典:'+response);
                    let title = response['title'];
                    alert(title);
                } else {
                    alert("不是tapd网页");
                }
            }

content-script.js代码

// 接收来自后台的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
    else if (request.cmd == 'tapd'){
        let title = $(".story-title").text().replace(/\s+/g,"");
        var dic = {}; //定义一个字典

        dic['title'] = title;      // 添加字典的元素( key:value)
        console.log("dic1:"+dic['title']);
        sendResponse(dic);
    }
    else {
        tip(JSON.stringify(request));
        sendResponse('我收到你的消息了：'+JSON.stringify(request));
    }
});

可以看到，popup和content-script交互方式就是，popup向content-script发送请求sendMessageToContentScript，然后拿到content-script返回的response，对response数据解析处理。
content-script收到request请求，收集数据，发送给popup

# js如何发送get 、post请求

一、使用XMLHttpRequest

主要分三步：

第一步：创建需要的对象，这里主要用到的是XMLHttpRequest，注意需要考虑早期的IE；

第二步：连接和发送；

第三步：接收；

• get请求

var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', 'url', true);//第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var json = httpRequest.responseText;//获取到json字符串，还需解析
                console.log(json);
            }
        };

• post请求

var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
httpRequest.open('POST', 'url', true); //第二步：打开连接
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
httpRequest.send('name=teswe&ee=ef');//发送请求 将情头体写在send中
/**
 * 获取数据后的处理程序
 */
httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
        var json = httpRequest.responseText;//获取到服务端返回的数据
        console.log(json);
    }
};

• post发送json数据

var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
httpRequest.open('POST', 'url', true); //第二步：打开连接/***发送json格式文件必须设置请求头 ；如下 - */
httpRequest.setRequestHeader("Content-type","application/json");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）var obj = { name: 'zhansgan', age: 18 };
httpRequest.send(JSON.stringify(obj));//发送请求 将json写入send中
/**
 * 获取数据后的处理程序
 */
httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
        var json = httpRequest.responseText;//获取到服务端返回的数据
        console.log(json);
    }
};

js如何打开tab页展示数据

//js生成新的html页面
env_content='
' + env_list + '
';
env_web = window.open('about:blank');
env_web.document.write(env_content);
env_web.document.close();
// env_web.print();调出打印页面