Zero, preface,

  1. This article shows apps with reference relationships, so only for iOS/Android libraries;
  2. This article relies on the AppSight data for the functionality described in this article. If your SDK is not found in AppSight, this method will not work.

First, find the source data

To display the App that uses a library, we first need to find a data source that can provide the corresponding data. Here we rely on AppSight, and here we take EFCountingLabel as an example. We find its corresponding page on www.appsight.io/sdk/ef-coun… , relevant reference data can be seen after opening, as follows:

Load all data

Now that we have the data, we can use the script to get the data we want. For debugging purposes, we use JavaScript, and execute it in the Chrome Console to get the results we want directly.

Since the reference data here is paginated, we need to write a script to help us automatically load all the paginated data by repeatedly clicking the page load button before the crawl (this step is not significant if the data is small, but is necessary if the data is large).

On the SDK page, open the JavaScript console in Chrome Developer Tools and execute the following script:

function sleep(ms) {
    return new Promise(resolve= > setTimeout(resolve, ms));
}
async function main() {
	var using = document.getElementsByClassName('as-sec-apps-using') [0];
	do {
		if (document.getElementsByClassName('as-sec-loading') [0].style.cssText == "display: block;") {
			await sleep(1000);
		} else {
			if (using.getElementsByClassName('as-but as-but-more btn disabled') [0] = =null) {
				using.getElementsByClassName('as-but as-but-more btn') [0].click();
				await sleep(1000);
			} else {
				break; }}}while (true);
}
main();
Copy the code

Generate HTML code

Once all the paging data is loaded (or as much as you need), proceed to the JavaScript console and execute the following script:

var using = document.getElementsByClassName('as-sec-apps-using') [0]
var items = using.getElementsByClassName('as-list-item-inner')
var result = "<table><tr>"
for(let i = 0, len = items.length; i < len; i++) {
	if(i % 10= =0 && i > 0) {
		result = result + "</tr><tr>"
	}
    let item = items[i]
    var icon = item.getElementsByClassName('as-icon') [0].src;
    var title = item.getElementsByClassName('as-label as-name') [0].innerHTML;
    var href = item.href
    result = result + "<td><a href=\'" + href + "\' title=\'" + title + "\'><img src=\'" + icon + "\'></a></td>"
}
result = result + "</tr></table>"
console.log(result)
Copy the code

The HTML code of the corresponding App information can be obtained, as shown below:

The obtained code is sorted into the following form:

<table>
  <tr>
    <td>
      <a href='https://www.appsight.io/app/toss-%ED%86%A0%EC%8A%A4' title='토 스'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/001/263/485/media/small.png?1530945069'>
      </a>
    </td>
    <td>
      <a href='https://www.appsight.io/app/%EC%87%BC%ED%95%91%EC%9D%84-%EB%9A%9D%EB%94%B1-%ED%8B%B0%EB%AA%AC' title='티몬 - 오 오 은 또 어떤 딜? '>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/001/286/380/media/small.png?1534301992'>
      </a>
    </td>
    <td>
      <a href='https://www.appsight.io/app/%EB%B1%85%ED%81%AC%EC%83%90%EB%9F%AC%EB%93%9C' title='뱅크샐러드'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/001/282/332/media/small.png?1533591669'>
      </a>
    </td>
    <td>
      <a href='https://www.appsight.io/app/climendo-basic' title='Climendo Basic'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/000/304/533/media/small.png?1481531280'>
      </a>
    </td>
  </tr>
</table>
Copy the code

4. Embed in README

Copy the HTML code we obtained earlier and insert it directly into the appropriate location of our project README:

5. Effect display

The actual result is as follows. You can also click on the README of EFCountingLabel to preview:

If you are interested, please try it yourself, 👻

Read another similar article?

GitHub Wiki page additions and Settings

Please correct any intellectual property rights, copyright issues or theoretical errors. Juejin. Cn/post / 684490… Please indicate the original author and above information.