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:
1 2 | vue init kocal/vue-web-extension <span class="token punctuation">[</span> NAME OF YOUR EXTENSION <span class="token punctuation">]</span> |
The create option will depend on your extension, but here I use almost nothing.
1 2 3 4 5 6 7 8 9 10 11 12 13 | ? Project name new-tab-page ? Project description A Vue.js web extension ? Author nghianv-0795 <span class="token operator"><</span> <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> <span class="token operator">></span> ? License MIT ? Use Mozilla's web-extension polyfill? No ? Provide an options page? No ? Install vue-router? No ? Install vuex? No ? Install axios? No ? Install ESLint? No ? Install Prettier? No ? Automatically <span class="token function">install</span> dependencies? <span class="token function">npm</span> |
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 below123456789101112131415161718192021222324252627<span class="token punctuation">{</span><span class="token property">"name"</span> <span class="token operator">:</span> <span class="token string">"Extension Get Members Group FB"</span> <span class="token punctuation">,</span><span class="token property">"description"</span> <span class="token operator">:</span> <span class="token string">"A Vue.js web extension"</span> <span class="token punctuation">,</span><span class="token property">"version"</span> <span class="token operator">:</span> <span class="token null">null</span> <span class="token punctuation">,</span><span class="token property">"manifest_version"</span> <span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">,</span><span class="token property">"icons"</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token property">"48"</span> <span class="token operator">:</span> <span class="token string">"icons/icon_48.png"</span> <span class="token punctuation">,</span><span class="token property">"128"</span> <span class="token operator">:</span> <span class="token string">"icons/icon_128.png"</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token property">"browser_action"</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token property">"default_title"</span> <span class="token operator">:</span> <span class="token string">"Extension Get Members Group FB"</span> <span class="token punctuation">,</span><span class="token property">"default_popup"</span> <span class="token operator">:</span> <span class="token string">"popup/popup.html"</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token property">"content_scripts"</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token property">"matches"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"https://www.facebook.com/*"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token property">"js"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"content/jquery.3.4.1.min.js"</span> <span class="token punctuation">,</span> <span class="token string">"content/content.js"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token property">"css"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"content.css"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token property">"run_at"</span> <span class="token operator">:</span> <span class="token string">"document_start"</span><span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token property">"background"</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"background/background.js"</span> <span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token property">"permissions"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"tabs"</span> <span class="token punctuation">,</span> <span class="token string">"activeTab"</span> <span class="token punctuation">]</span><span class="token punctuation">}</span>
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 thatYou need to access the group that you have joined in order for the tool to work!
. If you already have access, theGet Profiles
button will be displayed using theurlTrue
variable to hide or show12345678910111213141516window <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"DOMContentLoaded"</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>chrome <span class="token punctuation">.</span> tabs <span class="token punctuation">.</span> <span class="token function">query</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>active <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>currentWindow <span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span> tabs <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> url <span class="token operator">=</span> tabs <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> url <span class="token punctuation">;</span><span class="token keyword">var</span> checkUrlFb <span class="token operator">=</span> <span class="token regex">/https://www.facebook.com/groups/*/</span> <span class="token punctuation">;</span><span class="token keyword">if</span> <span class="token punctuation">(</span> checkUrlFb <span class="token punctuation">.</span> <span class="token function">test</span> <span class="token punctuation">(</span> url <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>self <span class="token punctuation">.</span> urlTrue <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> - Because the popup and content of the current page are unrelated, we need to call the function, just like the API call type.
- Part call123456789101112131415161718192021222324methods <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token function">setDOMInfo</span> <span class="token punctuation">(</span> res <span class="token punctuation">)</span> <span class="token punctuation">{</span>console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"setDOMInfo"</span> <span class="token punctuation">,</span> res <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token function">getLinks</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">;</span><span class="token keyword">this</span> <span class="token punctuation">.</span> trigger <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span><span class="token keyword">this</span> <span class="token punctuation">.</span> processing <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>chrome <span class="token punctuation">.</span> tabs <span class="token punctuation">.</span> <span class="token function">query</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>active <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>currentWindow <span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span> tabs <span class="token punctuation">)</span> <span class="token punctuation">{</span>chrome <span class="token punctuation">.</span> tabs <span class="token punctuation">.</span> <span class="token function">sendMessage</span> <span class="token punctuation">(</span>tabs <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> id <span class="token punctuation">,</span><span class="token punctuation">{</span> trigger <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>self <span class="token punctuation">.</span> setDOMInfo<span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
- Part listener12345678910111213141516171819202122chrome <span class="token punctuation">.</span> runtime <span class="token punctuation">.</span> onMessage <span class="token punctuation">.</span> <span class="token function">addListener</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>message <span class="token punctuation">,</span>sender <span class="token punctuation">,</span>sendResponse<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span> <span class="token punctuation">(</span> message <span class="token punctuation">.</span> msg <span class="token operator">===</span> <span class="token string">"getStatusTrigger"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token function">sendResponse</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>data <span class="token punctuation">:</span> self <span class="token punctuation">.</span> trigger<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">if</span> <span class="token punctuation">(</span> message <span class="token punctuation">.</span> msg <span class="token operator">===</span> <span class="token string">"arrayProfile"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> ws <span class="token operator">=</span> <span class="token constant">XLSX</span> <span class="token punctuation">.</span> utils <span class="token punctuation">.</span> <span class="token function">json_to_sheet</span> <span class="token punctuation">(</span> message <span class="token punctuation">.</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token keyword">var</span> wb <span class="token operator">=</span> <span class="token constant">XLSX</span> <span class="token punctuation">.</span> utils <span class="token punctuation">.</span> <span class="token function">book_new</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token constant">XLSX</span> <span class="token punctuation">.</span> utils <span class="token punctuation">.</span> <span class="token function">book_append_sheet</span> <span class="token punctuation">(</span> wb <span class="token punctuation">,</span> ws <span class="token punctuation">,</span> <span class="token string">"link"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token constant">XLSX</span> <span class="token punctuation">.</span> <span class="token function">writeFile</span> <span class="token punctuation">(</span> wb <span class="token punctuation">,</span> <span class="token string">"linksProfile.xlsx"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>self <span class="token punctuation">.</span> processing <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token punctuation">;</span><span class="token function">sendResponse</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>received <span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span>
- Part call
- I have used the excel export library for this guy, this is xlsx . And here is the complete file of App.vue in the popup123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115<span class="token comment">// App.vue</span><span class="token operator"><</span> template <span class="token operator">></span><span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"extension"</span> <span class="token operator">></span><span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"header"</span> <span class="token operator">></span><span class="token operator"><</span> h2 <span class="token operator">></span> Get Members Groups Facebook <span class="token operator"><</span> <span class="token operator">/</span> h2 <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span><span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">></span><span class="token operator"><</span> div v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"urlTrue"</span> <span class="token operator">></span><span class="token operator"><</span> button <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"learn-more"</span> @click <span class="token operator">=</span> <span class="token string">"getLinks"</span> v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"!processing"</span> <span class="token operator">></span><span class="token operator"><</span> span <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"circle"</span> aria <span class="token operator">-</span> hidden <span class="token operator">=</span> <span class="token string">"true"</span> <span class="token operator">></span><span class="token operator"><</span> span <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"icon arrow"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span><span class="token operator"><</span> span <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"button-text"</span> <span class="token operator">></span> Get Profiles <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> button <span class="token operator">></span><span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"load-9"</span> v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"processing"</span> <span class="token operator">></span><span class="token operator"><</span> p <span class="token operator">></span> Processing <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span><span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"spinner"</span> <span class="token operator">></span><span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"bubble-1"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span><span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"bubble-2"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span><span class="token operator"><</span> div v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"!urlTrue"</span> <span class="token operator">></span><span class="token operator"><</span> h2 <span class="token operator">></span>You need to access the group that you have joined <span class="token keyword">in</span> order <span class="token keyword">for</span> thetool to work <span class="token operator">!</span><span class="token operator"><</span> <span class="token operator">/</span> h2 <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span><span class="token operator"><</span> <span class="token operator">/</span> template <span class="token operator">></span><span class="token operator"><</span> script <span class="token operator">></span><span class="token keyword">const</span> browser <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">"webextension-polyfill"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token keyword">import</span> <span class="token constant">XLSX</span> <span class="token keyword">from</span> <span class="token string">"xlsx"</span> <span class="token punctuation">;</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span><span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token punctuation">{</span>keyword <span class="token punctuation">:</span> <span class="token string">""</span> <span class="token punctuation">,</span>urlTrue <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span>trigger <span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span>processing <span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token function">mounted</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">;</span>window <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"DOMContentLoaded"</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>chrome <span class="token punctuation">.</span> tabs <span class="token punctuation">.</span> <span class="token function">query</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>active <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>currentWindow <span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span> tabs <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> url <span class="token operator">=</span> tabs <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> url <span class="token punctuation">;</span><span class="token keyword">var</span> checkUrlFb <span class="token operator">=</span> <span class="token regex">/https://www.facebook.com/groups/*/</span> <span class="token punctuation">;</span><span class="token keyword">if</span> <span class="token punctuation">(</span> checkUrlFb <span class="token punctuation">.</span> <span class="token function">test</span> <span class="token punctuation">(</span> url <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>self <span class="token punctuation">.</span> urlTrue <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">;</span>chrome <span class="token punctuation">.</span> runtime <span class="token punctuation">.</span> onMessage <span class="token punctuation">.</span> <span class="token function">addListener</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>message <span class="token punctuation">,</span>sender <span class="token punctuation">,</span>sendResponse<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span> <span class="token punctuation">(</span> message <span class="token punctuation">.</span> msg <span class="token operator">===</span> <span class="token string">"getStatusTrigger"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token function">sendResponse</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>data <span class="token punctuation">:</span> self <span class="token punctuation">.</span> trigger<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">if</span> <span class="token punctuation">(</span> message <span class="token punctuation">.</span> msg <span class="token operator">===</span> <span class="token string">"arrayProfile"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> ws <span class="token operator">=</span> <span class="token constant">XLSX</span> <span class="token punctuation">.</span> utils <span class="token punctuation">.</span> <span class="token function">json_to_sheet</span> <span class="token punctuation">(</span> message <span class="token punctuation">.</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token keyword">var</span> wb <span class="token operator">=</span> <span class="token constant">XLSX</span> <span class="token punctuation">.</span> utils <span class="token punctuation">.</span> <span class="token function">book_new</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token constant">XLSX</span> <span class="token punctuation">.</span> utils <span class="token punctuation">.</span> <span class="token function">book_append_sheet</span> <span class="token punctuation">(</span> wb <span class="token punctuation">,</span> ws <span class="token punctuation">,</span> <span class="token string">"link"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token constant">XLSX</span> <span class="token punctuation">.</span> <span class="token function">writeFile</span> <span class="token punctuation">(</span> wb <span class="token punctuation">,</span> <span class="token string">"linksProfile.xlsx"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>self <span class="token punctuation">.</span> processing <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token punctuation">;</span><span class="token function">sendResponse</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>received <span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">,</span>methods <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token function">setDOMInfo</span> <span class="token punctuation">(</span> res <span class="token punctuation">)</span> <span class="token punctuation">{</span>console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"setDOMInfo"</span> <span class="token punctuation">,</span> res <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token function">getLinks</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">;</span><span class="token keyword">this</span> <span class="token punctuation">.</span> trigger <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span><span class="token keyword">this</span> <span class="token punctuation">.</span> processing <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>chrome <span class="token punctuation">.</span> tabs <span class="token punctuation">.</span> <span class="token function">query</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>active <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>currentWindow <span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span> tabs <span class="token punctuation">)</span> <span class="token punctuation">{</span>chrome <span class="token punctuation">.</span> tabs <span class="token punctuation">.</span> <span class="token function">sendMessage</span> <span class="token punctuation">(</span>tabs <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> id <span class="token punctuation">,</span><span class="token punctuation">{</span> trigger <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>self <span class="token punctuation">.</span> setDOMInfo<span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">;</span><span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span><span class="token operator"><</span> style lang <span class="token operator">=</span> <span class="token string">"scss"</span> scoped <span class="token operator">></span>@ <span class="token keyword">import</span> <span class="token string">"./popup.scss"</span> <span class="token punctuation">;</span><span class="token operator">...</span> <span class="token punctuation">.</span>
- 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 effect12345678<span class="token operator">...</span><span class="token string">"matches"</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">"https://www.facebook.com/*"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token string">"js"</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">"content/jquery.3.4.1.min.js"</span> <span class="token punctuation">,</span> <span class="token string">"content/content.js"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token string">"css"</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">"content/content.css"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span><span class="token operator">...</span> - As above, we only need to access facebook as the js part in
content.js
will be activated. Here I will initialize achrome.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.12345678910111213<span class="token comment">// content.js</span>chrome <span class="token punctuation">.</span> runtime <span class="token punctuation">.</span> onMessage <span class="token punctuation">.</span> <span class="token function">addListener</span> <span class="token punctuation">(</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> msg <span class="token punctuation">,</span> sender <span class="token punctuation">,</span> response <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span> <span class="token punctuation">(</span> msg <span class="token punctuation">.</span> trigger <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> origin <span class="token operator">=</span> window <span class="token punctuation">.</span> origin <span class="token punctuation">;</span><span class="token keyword">var</span> href <span class="token operator">=</span> window <span class="token punctuation">.</span> location <span class="token punctuation">.</span> href <span class="token punctuation">;</span><span class="token keyword">var</span> arrHref <span class="token operator">=</span> href <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">'/'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token keyword">var</span> linkGroupMembers <span class="token operator">=</span> origin <span class="token operator">+</span> <span class="token template-string"><span class="token string">`/groups/</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> arrHref <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">]</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">/members/`</span></span> <span class="token punctuation">;</span>window <span class="token punctuation">.</span> location <span class="token punctuation">.</span> <span class="token function">replace</span> <span class="token punctuation">(</span> linkGroupMembers <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token function">response</span> <span class="token punctuation">(</span> msg <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> - 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
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677<span class="token comment">//content.js</span><span class="token keyword">import</span> <span class="token string">'./content.css'</span> <span class="token punctuation">;</span>chrome <span class="token punctuation">.</span> runtime <span class="token punctuation">.</span> onMessage <span class="token punctuation">.</span> <span class="token function">addListener</span> <span class="token punctuation">(</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> msg <span class="token punctuation">,</span> sender <span class="token punctuation">,</span> response <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span> <span class="token punctuation">(</span> msg <span class="token punctuation">.</span> trigger <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> origin <span class="token operator">=</span> window <span class="token punctuation">.</span> origin <span class="token punctuation">;</span><span class="token keyword">var</span> href <span class="token operator">=</span> window <span class="token punctuation">.</span> location <span class="token punctuation">.</span> href <span class="token punctuation">;</span><span class="token keyword">var</span> arrHref <span class="token operator">=</span> href <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">'/'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token keyword">var</span> linkGroupMembers <span class="token operator">=</span> origin <span class="token operator">+</span> <span class="token template-string"><span class="token string">`/groups/</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> arrHref <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">]</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">/members/`</span></span> <span class="token punctuation">;</span>window <span class="token punctuation">.</span> location <span class="token punctuation">.</span> <span class="token function">replace</span> <span class="token punctuation">(</span> linkGroupMembers <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token function">response</span> <span class="token punctuation">(</span> msg <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token function">$</span> <span class="token punctuation">(</span> document <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">ready</span> <span class="token punctuation">(</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> origin <span class="token operator">=</span> window <span class="token punctuation">.</span> origin <span class="token punctuation">;</span><span class="token keyword">var</span> href <span class="token operator">=</span> window <span class="token punctuation">.</span> location <span class="token punctuation">.</span> href <span class="token punctuation">;</span><span class="token keyword">var</span> arrHref <span class="token operator">=</span> href <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">'/'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token keyword">var</span> linkGroupMembers <span class="token operator">=</span> origin <span class="token operator">+</span> <span class="token template-string"><span class="token string">`/groups/</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> arrHref <span class="token punctuation">[</span> <span class="token number">4</span> <span class="token punctuation">]</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">/members/`</span></span> <span class="token punctuation">;</span><span class="token keyword">if</span> <span class="token punctuation">(</span> window <span class="token punctuation">.</span> location <span class="token punctuation">.</span> href <span class="token operator">===</span> linkGroupMembers <span class="token punctuation">)</span> <span class="token punctuation">{</span>chrome <span class="token punctuation">.</span> runtime <span class="token punctuation">.</span> <span class="token function">sendMessage</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>msg <span class="token punctuation">:</span> <span class="token string">'getStatusTrigger'</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span> response <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span> <span class="token punctuation">(</span> response <span class="token punctuation">.</span> data <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">// add phần hiệu ứng loading</span><span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'body'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">append</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`<div class="load-9" id="loading-09"><div class="spinner"><div class="bubble-1"></div><div class="bubble-2"></div></div></div>`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token comment">// giả lập sự kiện sroll down đến khi hiện ra tất cả thành viên</span><span class="token keyword">var</span> totalHeight <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span><span class="token keyword">var</span> distance <span class="token operator">=</span> <span class="token number">1000</span> <span class="token punctuation">;</span><span class="token keyword">var</span> timer <span class="token operator">=</span> <span class="token function">setInterval</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token keyword">var</span> scrollHeight <span class="token operator">=</span> document <span class="token punctuation">.</span> body <span class="token punctuation">.</span> scrollHeight <span class="token punctuation">;</span>window <span class="token punctuation">.</span> <span class="token function">scrollBy</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">,</span> distance <span class="token punctuation">)</span> <span class="token punctuation">;</span>totalHeight <span class="token operator">+=</span> distance <span class="token punctuation">;</span><span class="token keyword">if</span> <span class="token punctuation">(</span> totalHeight <span class="token operator">>=</span> scrollHeight <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'span.uiMorePagerLoader.pam.uiBoxLightblue'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> length <span class="token operator">===</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">// nếu thấy đã hiện tất cả thành viên sẽ thự hiện get thông tin thông qua DOM</span><span class="token function">clearInterval</span> <span class="token punctuation">(</span> timer <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token keyword">var</span> listItem <span class="token operator">=</span> <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'a._60rg._8o._8r.lfloat._ohe'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token keyword">var</span> arrayProfile <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span><span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator"><</span> listItem <span class="token punctuation">.</span> length <span class="token punctuation">;</span> i <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">var</span> arrHref <span class="token operator">=</span> listItem <span class="token punctuation">[</span> i <span class="token punctuation">]</span> <span class="token punctuation">.</span> href <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">'?'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token keyword">var</span> link <span class="token operator">=</span> arrHref <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>arrayProfile <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>Name <span class="token punctuation">:</span> listItem <span class="token punctuation">[</span> i <span class="token punctuation">]</span> <span class="token punctuation">.</span> title <span class="token punctuation">,</span>Link <span class="token punctuation">:</span> link<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment">// gửi mảng thông tin sang bên popup cho bên đó export excel</span>chrome <span class="token punctuation">.</span> runtime <span class="token punctuation">.</span> <span class="token function">sendMessage</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>msg <span class="token punctuation">:</span> <span class="token string">'arrayProfile'</span> <span class="token punctuation">,</span>data <span class="token punctuation">:</span> arrayProfile<span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span> res <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'#loading-09'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">remove</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> - 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 thetrigger
. I will set the variable totrue
when the user clicks theGet 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
1234567891011import './content.css';.....$('body').append(` <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> load-9 <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> loading-09 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> spinner <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> bubble-1 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> bubble-2 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> `); - 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 themanifest.json
file, so that the build will not be found if the path cannot be found.123456789101112131415161718192021<span class="token operator">...</span><span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>mode <span class="token punctuation">:</span> process <span class="token punctuation">.</span> env <span class="token punctuation">.</span> <span class="token constant">NODE_ENV</span> <span class="token punctuation">,</span>context <span class="token punctuation">:</span> __dirname <span class="token operator">+</span> <span class="token string">'/src'</span> <span class="token punctuation">,</span>entry <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token string">'background/background'</span> <span class="token punctuation">:</span> <span class="token string">'./background/background.js'</span> <span class="token punctuation">,</span><span class="token string">'content/content'</span> <span class="token punctuation">:</span> <span class="token string">'./content/content.js'</span> <span class="token punctuation">,</span><span class="token string">'content/jquery.3.4.1.min'</span> <span class="token punctuation">:</span> <span class="token string">'./content/jquery.3.4.1.min.js'</span> <span class="token punctuation">,</span><span class="token string">'popup/popup'</span> <span class="token punctuation">:</span> <span class="token string">'./popup/popup.js'</span><span class="token punctuation">}</span> <span class="token punctuation">,</span>output <span class="token punctuation">:</span> <span class="token punctuation">{</span>path <span class="token punctuation">:</span> __dirname <span class="token operator">+</span> <span class="token string">'/dist'</span> <span class="token punctuation">,</span>filename <span class="token punctuation">:</span> <span class="token string">'[name].js'</span><span class="token punctuation">}</span> <span class="token punctuation">,</span>resolve <span class="token punctuation">:</span> <span class="token punctuation">{</span>extensions <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'.js'</span> <span class="token punctuation">,</span> <span class="token string">'.vue'</span> <span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token operator">...</span> - Our complete directory structure will be as follows
4. Test
Please note that the
package.json
file has the scripts section12345678910<span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token property">"prettier"</span> <span class="token operator">:</span> <span class="token string">"prettier "src/**/*.{js,vue}""</span> <span class="token punctuation">,</span><span class="token property">"prettier:write"</span> <span class="token operator">:</span> <span class="token string">"npm run prettier -- --write"</span> <span class="token punctuation">,</span><span class="token property">"build"</span> <span class="token operator">:</span> <span class="token string">"cross-env NODE_ENV=production webpack --hide-modules"</span> <span class="token punctuation">,</span><span class="token property">"build:dev"</span> <span class="token operator">:</span> <span class="token string">"cross-env NODE_ENV=development webpack --hide-modules"</span> <span class="token punctuation">,</span><span class="token property">"build-zip"</span> <span class="token operator">:</span> <span class="token string">"node scripts/build-zip.js"</span> <span class="token punctuation">,</span><span class="token property">"watch"</span> <span class="token operator">:</span> <span class="token string">"npm run build -- --watch"</span> <span class="token punctuation">,</span><span class="token property">"watch:dev"</span> <span class="token operator">:</span> <span class="token string">"cross-env HMR=true npm run build:dev -- --watch"</span><span class="token punctuation">}</span> <span class="token punctuation">,</span>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, usenpm 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
- So has been successful then. Well there is a little config in the