How to build a chrome Extension using Machine Learning??
“All the negative thoughts and ideas that are in the world have proceeded from this evil spirit of fear.”
-by Swami Vivekanand
This blog helps you how to build a chrome extension using tensorflow.js and node.js(Machine Learning). This Chrome Extension finds explicit content on the web page of the current chrome tab and will change according to the user's requirements(that is will make explicit content star mark and highlight the sentence or remove it).
Prerequisite Topics:
- Why chrome Extension?
- What is chrome Extension?
- Important files in chrome Extension.
- What are Tensorflow.js and Node.js?
- Prerequisite for the NLP model in tensorflow.js.
- Model loading and Running on the local server.
Why Chrome Extension?
There are various ways we can implement explicit text classifier i.e. NLP model. We found 2 best ways that are API and chrome extension.API has some drawbacks like privacy issue hence we choose chrome Extension.
Benefits of chrome extension.
- Security - encryption of all your data while browsing.
- Privacy -As data never leave the device while making a prediction, privacy mentioned additionally, your IP address is masked letting you browse anonymously.
- Ad-free browsing - the Chrome extension doesn’t display ads.
- Unlimited bandwidth - no bandwidth restrictions.
What is chrome Extension?
Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS. To know more>>click the below links Website link: https://developer.chrome.com/extensionshttps://developer.chrome.com/extensions/getstartedhttps://medium.com/fbdevclagos/chrome-extensions-tutorial-lets-build-a-chrome-extension-2a64d9b775f7https://shiffman.net/a2z/chrome-ext/ Youtube link: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bL9VOMT65ahNEri9uqLWfS
Important files in chrome Extension.
Extensions are made of different, but cohesive, components. Components can include background scripts, content scripts, an options page, UI elements, and various logic files. The most important files without a good extension don’t exist are as follow:
- Manifest.json: Contains the configurations, properties, and information about the chrome extension.
- Popup.html: Contains the content that pops-up on the screen when the chrome extension icon is clicked. (a basic GUI to control extension)
- background.js: Loads when the chrome is launched.
- Content.js: contains the content that needs to be performed on chrome.
To know more>>click the below links
What are Tensorflow.js and Node.js?
TensorFlow.js is a JavaScript library for training and deploying machine learning models in the browser and in Node.js How to install or setup tensorflow.js for that follow the below link: https://www.tensorflow.org/js/tutorials/setup What is node.js?
Node.js is an open-source server environment Node.js is free Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) Node.js uses JavaScript on the server
How to install or setup node.js for that follow the below link:
https://thoughtbot.com/blog/how-to-make-a-chrome-extension
https://thoughtbot.com/blog/how-to-make-a-chrome-extension
Prerequisite for the NLP model in tensorflow.js.
For this follow the below link:
Model loading and Running on the local server.
After the preprocessing step model should be loaded on the local server so that we can make HTTP calls. So here we create a python local server for that just type the below command in cmd: Python -m Http.server 8080 Or Python -m SimpleHTTPServer 8080
After that use the following javascript code to load model in the browser. tf.loadLayersModel(): It is used for loading the model.we have to give the path where we hosted our NLP model. This function prevents multiple time model loading.
async function loadModelIfNot() {
try {
model = await tf.loadLayersModel('http://localhost:8080/model.json');
console.log('Model Loaded: ', model);
modelLoaded = true;
} catch (error) {
console.log(error)
}
}
loadModelIfNot();
Chrome Extension In Action
After completing all the prerequisites. Now how to implement this in the chrome?
Follow these steps:
1)Create all the files which are required to make a chrome extension i.e. Menifest.json,popup.html,background.js,content.js and other files.
2)In content.js write the text scrapping logic.
3)In background.js write the model loading and model prediction logic.
Below I explained the text scraping and communication technique between extension pages.
What is Text Scraping?
The content of the website needs to be scrapped in order to be processed and classified by the chrome extension. In order to perform this operation the standard javascript functions like getElementById(), getElementsByTagName(), querySelectorAll(), etc. do not return all the text nodes of the Html-Dom Tree. However, we need all the text nodes so we will need to traverse through the tree completely to ensure we scrape all the nodes of the type ‘Node.TEXT_NODE’ i.e ‘3’.
This is performed by the function text nodesUnder(htmlDomNode node) which takes an htmlDomNode as an argument. So all the nodes of type Node.TEXT_NODE which are in the Html Dom subtree with the argument node at the root are accumulated in ArrayList all text nodes and returned. The return type is an ArrayList of HtmlDomNodes.
As this needs to work on dynamic websites where changes to the HtmlDom Tree are made dynamically and frequently we will be calling this function repeatedly. But if a node has already been visited we mustn’t revisit it unless it has been modified. For this purpose, we add the 'b-l-k-i-t' id to the parent node of these nodes so we don’t waste time visiting the subtree under this parent node as all have already been visited unless it's modified (More on this later).
function textNodesUnder(node) {
let allTextNodes = [];
for (node = node.firstChild; node; node = node.nextSibling) {
if (node.id !== 'b-l-k-i-t' && node.isContentEditable !== true && node.nodeName !== 'STYLE') {
if (node.nodeType == Node.TEXT_NODE) {
if (node.textContent.replace(/↵+|\s+/g, '') !== '') {
if (node.textContent.length > 2) {
allTextNodes.push(node);
let textString = node.textContent;
We use regex for splitting the text content of these nodes into sentences using split(/\\b((?!=|\\,|\\.).)+(.)\\b/) and then create reference to the current node and sentence in a global arraylist resArray. After storing the references if all the immediate children of the node have been traversed i.e. all subtrees have been traversed we add the 'b-l-k-i-t' id to the parent of the set of nodes. However, if changes are made to these nodes we need to revisit these nodes, so we add an event listener called MutationObserver for this purpose. In the callback of this function, we clear the 'b-l-k-i-t' id of these nodes so the textNodesUnder revisits this HtmlNode subtree on its next call.
You can learn more about MutationObservers check out: MutationObserver - Web APIs
if (node.nextSibling === null && node.parentNode !== undefined) {
node.parentNode.id = 'b-l-k-i-t';
let targetNode = node.parentNode;
const observer = new MutationObserver(
function (mutationsList, observer) {
mutationsList.forEach((mutation) => {
if (mutation.type === 'characterData' &&
mutation.target.parentNode.isContentEditable !== true) {
mutation.target.parentNode.removeAttribute('id');
}
});
observer.disconnect();
observer = null;
});
observer.observe(targetNode, mutationConfig);
targetNode = null;
}
Message Passing
The message passing in chrome extension works in two scopes: chrome.runtime chrome.tabs When sending messages to the background script we use chrome. runtime, otherwise we use chrome.tabs for messaging from background to other scripts.
Here is a small video that will teach you how to handle your chrome extension and how to add in chrome in the developer mode for testing.
Here is a demo of the extension I built, in the form of an Instagram post.
Thank You,
Happy Machine Learning,
Author: Vikas Maurya
Comments
Post a Comment