Recently, we need to process the crash stack information collected by google play console
Everyone who has used it knows that the information it collects, and each stack type information is separated from different pages
When you quickly open it manually, it will even give you an error. I guess it's anti reptile
At first, I thought that the official might provide an interface for batch export of information. But I looked it over and found that it was no longer available!!! It's amazing
So I'm going to crawl the crash data, open F12, open fiddler, open selenium, and the fishing day has passed
No eggs, I'm not a great God, and there's no relevant information on the Internet for me to copy and paste..
Finally, there is no way, just directly simulate the operation of the browser.
Prepare to write browser plug-in. However, I won't have to learn and write now. Just search the browser plug-in development
Follow the example first https://www.jianshu.com/p/51c650f98d9c
Then download the scaffold, although I don't know how to use it. But how to say, it doesn't matter whether it's study or not

git clone https://github.com/EmailThis/extension-boilerplate.git

Directly execute the installation after downloading? I don't know what to install. Directly install it. After loading, pack it and test whether it can be used

npm install
npm run build

Browser - > tools - > Manage extensions - > developer mode - > Load decompressed extensions
okay. The test seems to have no problem at all. Then start development?
Here, we need to understand some necessary knowledge before we can continue, for example
How does the plug-in get page information?
How to simulate the operation page?
How do I open a new tab?
How to access js?
How can I know that the stack information is loaded?
node_ What's the big lump in the modules folder?
How to import modules?
How to insert and delete an array?
Does JS have operations like + = + + like other languages?
readme. What is NPM run chrome watch written in MD?
Ext.runtime. In the example What's onmessage for? Looks like a callback, but where is the request made?
Wait, a lot of questions

npm run chrome-watch

First, verify what this is for
After I input the terminal, it performs some operations, and there is no following. The first reaction is Haote? Inexplicable??? Then it's gone.. It wasn't until I pressed save that I suddenly found out. Oh, it was originally monitored, saved and updated. Very good.

How do plug-ins communicate

In pop JS example, find the following code, which looks like pop JS to contentscript JS. Can request and return data, OK

ext.tabs.query({active: true, currentWindow: true}, function(tabs) {
  var activeTab = tabs[0];
  chrome.tabs.sendMessage(activeTab.id, { action: 'process-page' }, renderBookmark);
});

function onRequest(request, sender, sendResponse) {
  if (request.action === 'process-page') {
    sendResponse(extractTags())
  }
}

After I try to modify the code and save it, click the plug-in. I want it to return different data
But I failed. The reason is that I reported an error that the port could not be found. I thought there was a problem with my code and changed it back, but it still failed! Continue to report port error
I tried to restart and found that it was OK again. So far, I found that when I need pop JS and contentscript When communicating with JS, you need to restart the browser to communicate normally. The specific reason is unknown. The task is tight and I have no time to study deeply. After that, I will restart the browser every time I modify it
I tried in contentscript JS simulation click Page, successful. However, a port error occurs in a certain period of time. It takes a long time to find the error reported by an empty object. But directly report a port error. Who knows what's going on??? Until I was in contentscript JS ext.runtime onMessage. Exception handling is added to the addListener callback to finally get the error information correctly, rather than the damn port error. If sendResponse is omitted in the callback, port error will also be reported

function onRequest(request, sender, sendResponse) {
    for (var i = 0; i < js.length; i++) {
        var obj = js[i]
        try {
            if (request.action === obj.actionName) {
                sendResponse(obj.action(request))
            }
        } catch (err) {
            alert('error:[' + obj.actionName + ']' + err)
        }
    }
}

ext.runtime.onMessage.addListener(onRequest);

Create a new label

I try to use chrome tabs. Create creates a new tag and waits for the stack information to load. But after several tests, I found that setTimeout didn't wait at all
The tag is accessed all the time. Because accessing the stack page has a high probability of error, which directly leads me to constantly refresh the page.
Then I noticed the background js. After testing, setTimeout can be used in this JS. So I moved the label related operations to background js
Create labels that look like this

function CreateTabs(index) {
    var data = run.listDatas[index]
    if (run.isPageTest) {
        run.log(data.maintext + '  num:' + data.num)
        return
    }

    if (data.maintext.indexOf('java.lang') != -1)
        return

    chrome.tabs.create({ url: data.href, selected: false }, function(tab) {
        createTabs.push({
            tab: tab,
            tabid: tab.id,
            cutTabRun: false,
            url: data.href,
            maintext: data.maintext,
            secondaryline: data.secondaryline,
            count: data.num
        })
    })
}

The link obtained in the list is obtained by opening a new tag. When an error is reported in the loading stack, it is switched to other tag pages to refresh and wait for the loading to complete, so as to avoid the reading failure caused by error

jenkins

Reading is, of course, to translate the so stack into a readable stack. We used jenkins to run the translation. After negotiation, we opened the post permission and used XMLHttpRequest to run the job.
use http://localhost:8080/buildByToken/buildWithParameters The link executes a job with a token and other parameters
About jenkins API. Yes, I learned it now. There is a REST API at the bottom of the page. When I click in, I see the json API. I open it with joy, and the result is a json. I can't start at the moment. I don't know how to get the console information after the Job is completed.. You can only try every link that looks different. After reading other articles, I know that it can directly splice link queries
http://localhost:8080/job/jobName/number/api/json?pretty=true Through the test, it is found that it is feasible. Then guess how to access the console output. Yes, it's a guess. I don't know where there is a detailed explanation, so I can only guess. Fortunately, just guess

    post: function(info) {
        console.log('request :' + info.url)
        console.log('data:' + info.data)

        var xhr = new XMLHttpRequest();
        xhr.withCredentials = true;
        xhr.addEventListener("readystatechange", function() {
            if (this.readyState === 4) {
                console.log(this.status)
                if (this.status == 201) {
                    console.log('request Location: ' + this.getResponseHeader('Location'))
                    GetLocation(info, this.getResponseHeader('Location'))
                } else {
                    Error(info.url)
                }
            }
        });

        xhr.open('POST', info.url)
        var form = new FormData();
        form.append("error", info.data);
        xhr.send(form)
    },
}
function GetLocation(info, url) {
    var settings = {
        'url': url + 'api/json',
        'method': 'GET'
    }
    info.Location = settings.url

    $.ajax(settings).done(function(response) {
        if (response == null) {
            return;
        }
        try {
            info.number = response.executable.number
            WaitBuildComplete(info, response.executable.url)
        } catch (err) {
            console.log('err===================================' + err)
            console.log(response)
            setTimeout(() => { GetLocation(info, url) }, 100)
        }
    })
}

function WaitBuildComplete(info, url) {
    var settings = {
            'url': url + 'api/json',
            'method': 'GET'
        }
        //console.log('request Wait Build: ' + url)
    $.ajax(settings).done(function(response) {
        if (response == null) {
            return;
        }
        //console.log('waitBuild:')
        if (response.result == null) {
            setTimeout(() => { WaitBuildComplete(info, url) }, 100)
        } else {
            GetConsoleText(info, url)
        }
    })
}

function GetConsoleText(info, url) {
    var settings = {
        'url': url + 'consoleText/api/json',
        'method': 'GET'
    }
    info.consoleTextUrl = settings.url
    console.log('request: ' + settings.url)
    $.ajax(settings).done(function(response) {
        if (response == null) {
            Error(settings.url)
            return;
        }
        Succeed(info, response)
    })
}

Then wait for all execution to be completed in positions HTML page outputs original information and translation information. By the way, start the download to prevent careless operation. The error page is lost

function downloadByBlob(fileName, content) {
    let blob = new Blob([content], {
        type: "text/plain;charset=utf-8"
    });
    let reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function(e) {
        let a = document.createElement('a');
        a.download = fileName;
        a.href = e.target.result;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
}