Question Detail

How to Read webpage and pic email ID using Chrome Extension?

11 months ago Views 462 Visit Post Reply

How to develop a Chrome Extention to read whole website page to auto extract email ID, Images, Mobile Number and all contact information. What is the process to develop any Chrome Extention, This is just for Learning purpose.


Thread Reply

Hemant Haritash

- 11 months ago

To read a webpage and extract email addresses from it using a Chrome extension, you can follow these steps:

  1. Create a new directory for your extension and create a file called manifest.json in it. This file will contain metadata about your extension, including its name, version, and permissions.

  2. In the manifest.json file, add the following code:


 

Copy code

{ "manifest_version": 2, "name": "Email Extractor", "version": "1.0", "permissions": ["activeTab"], "background": { "scripts": ["background.js"] }, "browser_action": { "default_icon": "icon.png", "default_title": "Extract Email Addresses" } }

  1. Create a file called background.js in the same directory. This file will contain the code that runs when the user clicks the extension's button in the Chrome toolbar.

  2. In the background.js file, add the following code:


 

Copy code

chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript({ file: 'content.js' }); });

This code listens for a click event on the extension's button and then runs a script called content.js when it occurs.

  1. Create a file called content.js in the same directory. This file will contain the code that reads the webpage and extracts the email addresses from it.

  2. In the content.js file, add the following code:


 

Copy code

// Find all text nodes on the page var nodes = document.querySelectorAll('*'); // Iterate through the nodes and extract any email addresses var emails = []; for (var i = 0; i < nodes.length; i++) { var node = nodes[i]; var text = node.textContent; var matches = text.match(/[\w._%+-]+@[\w.-]+\.[a-zA-Z]{2,}/gi); if (matches) { emails = emails.concat(matches); } } // Remove duplicates and log the results emails = emails.filter(function(email, index, self) { return self.indexOf(email) === index; }); console.log(emails);

This code finds all the text nodes on the page, searches for email addresses in the text, and stores them in an array. It then removes any duplicates and logs the resulting array to the console.

  1. To test your extension, go to the Chrome extensions page (chrome://extensions/) and enable "Developer mode". Click the "Load unpacked" button and select the directory that contains your extension files.

  2. Go to any webpage and click the extension's button in the Chrome toolbar. The email addresses on the page should be logged to the console.

I hope this helps! Let me know if you have any questions or need further guidance.