Create Extension Get All Profile Of Members In A Facebook Group Out To Excel File

Tram Ho

Cause of Birth

This extension has the main function of getting all the individual page links of members in a facebook group that you are already in, and then exporting it to an Excel file. This product comes from an accident when the sisters of the HR division of the company asked me to get the profiles of all members in a certain group.

After a while testing the facebook page’s inspect page group, I feel that it is possible to get information from the DOM DOM after the page has been rendered. But at that time, I still did it quite manually by going to the console screen and running a js command, then copying the result into a text file sent to her.

Also intended to do an extension, but at that time was a bit busy, so it could not be done. Taking advantage of the time to go to Tet holiday is a bit free, so I sat down to learn about extensions and implement ideas.

Exploit Key Point

As shown in the picture, the information of any member will be poured into an <a> tag with class _60rg _8o _8r lfloat _ohe , at a _60rg _8o _8r lfloat _ohe , there are avatars and personal page links. So the key point here is that we need to get all these elements and extract them and export them to Excel file.

Deployment

I will use a Vue template as an existing extension ( Kocal / vue-web-extension ) by running the command:

The create option will depend on your extension, but here I use almost nothing.

The result will look like this

I will explain to you who does not know the structure of an extension, it will look like this:

  • manifest.js : includes all extension metadata such as icon, paths, descriptions, permissions, version, etc.
  • background.js : this is the event handler of the extension. It may contain listeners listening to the browser events that you want to execute inside the extension, which can be roughly understood as its name so it will run in the background below the page.
  • popup.html : will be the UI part of the extension when we open the extension
  • popup.js : is the js part running inside the popup itself, can be considered as a page extension, popup.html is the interface and popup.js is the inner processing part.
  • contentscript.js : will be js executable on the main page you visit

As here I will use only two main parts that are popup and content. Because I will simply get the elements through the html DOM at the page I am opening so I will use content.js and definitely have to use popup already. Because these two guys are two split guys so in the picture I need to call them through the call function that google has specified for the extension.

1. manifest.js

  • Due to slightly modified the structure of the extension, I have revised the paths as below

2. Popup

  • First, when the popup has just mounted() we will check to see if the user is currently in a group or not, because that way we can get the group name that the user wants to get information about. So if the user has not yet accessed the group, we will show you that You need to access the group that you have joined in order for the tool to work! . If you already have access, the Get Profiles button will be displayed using the urlTrue variable to hide or show
  • Because the popup and content of the current page are unrelated, we need to call the function, just like the API call type.
    • Part call
    • Part listener
  • I have used the excel export library for this guy, this is xlsx . And here is the complete file of App.vue in the popup
  • When not access the facebook group
  • Once accessed the facebook group

3. Content

  • I will define in manifest.js that the content ‘s script will only run when the url of the page has the format of facebook and import the js of the content file as well as the jquery library to use. Actually can use pure js also, I tried before not doing this extension, but for your convenience just add it to ease manipulating the DOM. I have to add the css section so that when the get profile will run the loading effect
  • As above, we only need to access facebook as the js part in content.js will be activated. Here I will initialize a chrome.runtime.onMessage.addListener listener, so that just when the popup triggers the event will get the information in the group. No matter if the user is accessing /about , /events or /photos … I will redirect to /members because only here will have members’ information.
  • Then after redirecting to /members then we need to crawl about. But the bad thing is that it only shows a certain number of people and wants to see it all, then we have to scroll down. I have tried to see if there are any requests that can be exploited, then I can find one. But digging into its json pile, the data is in this html format

  • And I tried to put in codepen, it turned out that it was the div containing the members information

  • Well, now that I can’t play data from json, I can play another card. I will simulate the event that the user scrolls the screen so that when it shows up, I will crawl according to the DOM DOM to retrieve. Below will be the complete code of content.js
  • In this code, I will check to see if the url is entered /members , if I have access, I will make a test call on the popup side to see if the popup guy has triggered the trigger. Because there are cases where users have access to /members but they do not want to get information, for example. So I will have one variable in the popup side is the trigger . I will set the variable to true when the user clicks the Get Profiles button and this will make sure that only when the user really wants to activate will the content function run.
  • To let users know the extension is processing, we have to add one more

    loading. Also I have to add 1 css file for this loading

  • Let’s see the results
    • So has been successful then. Well there is a little config in the webpack.config.js file so that when it builds it won’t give an error we need to pay a little attention. That is sometimes when we add a file or change the structure, we need to configure it to match the manifest.json file, so that the build will not be found if the path cannot be found.
    • Our complete directory structure will be as follows

    4. Test

    Please note that the package.json file has the scripts section

    To develop and watch the changes, we use npm run watch:dev it will update directly to the browser, and if you want to build, use npm run build . And then we just need to add the dist directory to the extensions.

    Just like that and run using watch:dev , we can both dev and test very quickly and effectively.

    Feature has not developed

    I think sometimes a lot of groups that I just need to get about 100, 1000 or 2000 people for the first time. Maybe if I have time, I will develop more get under limited feature too. And if someone contributes, there’s nothing more wonderful ??

    Conclude

    So we have completed the extension. The thing now is to share it with everyone, I want to make it convenient for everyone so I also try to push it to the google gadget store and let people simply click to install the gadget. But miserable after publishing, then look at this notice, afraid to register payments too with the extension is not yet at the beginning at beginner level, posted on people laughing so stop to stay so git wait more delicious then post for you.

    Sure, everyone can imagine the simplicity and operation of an extension already. And hope that my product will help someone. Hello and see you in the next article!

    Repo Github: https://github.com/ngovannghia1997kma/extension-get-members-group-fb

Share the news now

Source : Viblo