Twitter Linkedin-in Instagram
  • Services
    • Cloud Services / Cloud Solutions
      • Cloud Transformation Strategy / Cloud Migration Strategy
      • Cloud Migration Services | Cloud Data Migration
      • Cloud Managed Services | Cloud Data Management Services
    • Data Engineering & Analytics
      • Data Lakes
      • Data Engineering
      • BI Analytics
    • Artificial Intelligence
    • Professional Services
  • Industries
    • Telecommunications
    • Healthcare & Life Sciences
    • Financial Services
    • Media
    • Retail
    • Startup
    • Manufacturing
  • Aws
    • AWS Automation
    • AWS Migration
    • AWS Development
    • AWS Case Studies
  • Insights
    • Blogs
    • Case Studies
    • Resources
  • Events
  • About Us
    • About Virtuetech
    • Leadership Team
  • Career
  • Contact
Menu
  • Services
    • Cloud Services / Cloud Solutions
      • Cloud Transformation Strategy / Cloud Migration Strategy
      • Cloud Migration Services | Cloud Data Migration
      • Cloud Managed Services | Cloud Data Management Services
    • Data Engineering & Analytics
      • Data Lakes
      • Data Engineering
      • BI Analytics
    • Artificial Intelligence
    • Professional Services
  • Industries
    • Telecommunications
    • Healthcare & Life Sciences
    • Financial Services
    • Media
    • Retail
    • Startup
    • Manufacturing
  • Aws
    • AWS Automation
    • AWS Migration
    • AWS Development
    • AWS Case Studies
  • Insights
    • Blogs
    • Case Studies
    • Resources
  • Events
  • About Us
    • About Virtuetech
    • Leadership Team
  • Career
  • Contact

How To Build A Chrome Extension

Tags: browser,chrome,extension,functionality,web extensions,website design

How To Build A Chrome Extension

Building an extension over chrome browser adds a lot of flexibility and functionality to any website. We can make use of a browser engine to do additional stuff which is not possible using simple html and javascript.

In this blog we will develop a chrome extension named Tab++. This extension will help in searching any text on the opened chrome browser tabs. For example, if we have 20 tabs opened on the chrome browser, any text can be searched using this extension on each of the tabs.By clicking on a result, it will open the tab with yellow highlight. In the long side, this extension can also be used in positioning and managing all open tabs. The Source code of this extension is mentioned in the last section of this blog, for you to manually download and try on your PC.

Our first step is to define a manifest file. Manifest file holds all extension metadata like name, description and certain permissions from the browser to use the extension. Here is the content of manifest.json file:

{

"manifest_version": 2,

"name": "Tab++",

"version": "1.1",

"icons": {

"128": "logo.png"

},

"permissions": [

"tabs",

"storage",

"http://*/*",

"https://*/*"

],

"minimum_chrome_version": "23",

"description": "Arrange the tabs in chrome easily",

"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",

"short_name": "Tabs Search & Navigator",

"update_url": "https://clients2.google.com/service/update2/crx",

"background": {

"scripts": ["jquery-3.2.1.min.js","script.js"]

},

"web_accessible_resources": [

"close.png"

],

"browser_action": {

"default_icon": "logo.png",

"default_popup": "popup.html"

},

"commands": {

"_execute_browser_action": {

"suggested_key": {

"default": "Alt+O",

"mac": "Command+O"

},

"description": "Activate Tab++"

},

"ordertitle": {

"suggested_key": {

"default": "Alt+T"

},

"description": "Order By Title"

},

"orderurl": {

"suggested_key": {

"default": "Alt+U"

},

"description": "Order By URL"

}

},

"content_scripts": [{

"js": ["jquery-3.2.1.min.js","jquery.mark.min.js","content.js"],

"all_frames" : false,

"css": [],

"matches":    ["<all_urls>"],

"run_at": "document_end"

}]

}

A couple of background script files have been added on the manifest. One is a normal Jquery file downloaded to our folder and the other one is our own script. Background scripts are directly injected to the browser. They are more powerful than the normal script files injected into the page. Using them we can call browser’s own API to do things which browser only can do.

There are also a couple of scripts in the content script part of the manifest. Content script is just like normal javascript file that will be embedded on any webpage opened on the browser. Through this we can manipulate with DOM objects just like normal javascript. Additionally, we can also communicate with background script in both directions using content script.

There is one more html file called popup.html in the manifest, which is just like a HTML file that opens a small pop up when you click on the extension icon. In that pop up we can place various html elements like textbox, checkbox etc.

Here is how our background script looks like:

var from="";

var to="";

var url="";

var country="";

var multiply="1";

var conv=0.0;

var alltabs;

var myport=null;

var chk1=false;

var chk2=false;

var chk3=false;

var term="";

var mybookmarks;

var tabmove=false;

chrome.extension.onConnect.addListener(function(port) {

port.onMessage.addListener(function(msg) {

if(msg=="GetTabs")

{

myport=port;

chrome.storage.local.get('tabplusplus', function (result) {

var str = result.tabplusplus;

if(str==undefined)

{

getTabs();

return;

}

var res = str.split("##mysplit##");

var chkk1 = res[0];

var chkk2=res[1];

var chkk3=res[2];

chk1=JSON.parse(chkk1);

chk2=JSON.parse(chkk2);

getTabs();

});

}

if(msg.indexOf("search=")!=-1)

{

msg=msg.replace("search=","");

term=msg;

}

if(msg.indexOf("closetab")!=-1)

{

msg=msg.replace("closetab","");

chrome.tabs.remove(parseInt(msg), function() { });

}

if(msg.indexOf("updatetabs")!=-1)

{

msg=msg.replace("updatetabs","");

var arr=msg.split(",");

var newtabs=[];

var v1 = 'tabplusplus';

var obj= {};

obj[v1] = "false##mysplit##false##mysplit##false";

chrome.storage.local.set(obj);

tabmove=true;

for(var i=0;i<arr.length-1;i++)

{

chrome.tabs.move(parseInt(arr[i]), {index: i});

for(var j=0;j<alltabs.length;j++)

{

if(arr[i]==alltabs[j].id)

{

newtabs.push(alltabs[j]);

break;

}

}

}

setTimeout(function(){

tabmove=false;

}, 200);

alltabs=newtabs;

//myport.postMessage(alltabs);

}

if(msg=="ordertitle")

{

getTabs();

setTimeout(function(){

alltabs.sort(sortOn("title"));

tabmove=true;

for(var i=0;i<alltabs.length;i++)

{

chrome.tabs.move(alltabs[i].id, {index: i});

}

setTimeout(function(){

tabmove=false;

}, 200);

myport.postMessage(alltabs);

}, 100);

}

if(msg=="orderurl")

{

getTabs();

setTimeout(function(){

alltabs.sort(sortOn("url"));

tabmove=true;

for(var i=0;i<alltabs.length;i++)

{

chrome.tabs.move(alltabs[i].id, {index: i});

}

setTimeout(function(){

tabmove=false;

}, 200);

myport.postMessage(alltabs);

}, 100);

}

if(msg.indexOf("changetab")!=-1)

{

msg=msg.replace("changetab","");

chrome.tabs.update(parseInt(msg), {active: true});

if(term!="")

{

chrome.tabs.query({

windowId: chrome.windows.WINDOW_ID_CURRENT

}, function (tabs) {

chrome.tabs.sendMessage(parseInt(msg), {

"functiontoInvoke": "highlight",

"val":term

});

});

}

}

});

});

function getTabs()

{

alltabs=[];

//alert(JSON.stringify(mybookmarks));

chrome.tabs.query({

windowId: chrome.windows.WINDOW_ID_CURRENT

}, function (tabs) {

for(var i=0;i<tabs.length;i++)

{

var tab = new Object();

tab.id=tabs[i].id;

tab.img=tabs[i].favIconUrl;

tab.url=tabs[i].url;

tab.title=tabs[i].title;

tab.data="";

chrome.tabs.sendMessage(tabs[i].id, {

"functiontoInvoke": "getcontent",

"index":i,

});

alltabs.push(tab);

}

setTimeout(function(){ senddata(); }, 100);

});

}

function sortOn(property){

return function(a, b){

if(a[property].toLowerCase() < b[property].toLowerCase()){

return -1;

}else if(a[property].toLowerCase() > b[property].toLowerCase()){

return 1;

}else{

return 0;

}

}

}

function senddata()

{

if(chk1)

{

alltabs.sort(sortOn("url"));

}

if(chk2)

{

alltabs.sort(sortOn("title"));

}

chrome.tabs.query({

active: true,

currentWindow: true

}, function(tabs) {

var tab = tabs[0];

var id = tab.id;

myport.postMessage("activetab="+id);

myport.postMessage(alltabs);

});

}

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {

if(msg.text == "takecontent")

{

var tabid=sender.tab.id;

var data=msg.val;

var index=msg.index;

alltabs[index].data=data.toLowerCase();

}

});

updateTabCount();

function updateTabCount()

{

chrome.tabs.query({

windowId: chrome.windows.WINDOW_ID_CURRENT

}, function (tabs) {

chrome.browserAction.setBadgeText({text: ''+tabs.length});

});

}

chrome.tabs.onMoved.addListener(function() {

if(!tabmove)

{

getTabs();

var v1 = 'tabplusplus';

var obj= {};

obj[v1] = "false##mysplit##false##mysplit##false";

chrome.storage.local.set(obj);

}

});

chrome.tabs.onRemoved.addListener(function(tabid, removed) {

updateTabCount();

//getTabs();

});

chrome.tabs.onCreated.addListener(function() {

updateTabCount();

//getTabs();

});

chrome.windows.onFocusChanged.addListener(function(windowId) {

updateTabCount();

//getTabs();

});

getTabs();

chrome.commands.onCommand.addListener( function(command) {

if(command === "ordertitle")

{

getTabs();

setTimeout(function(){

tabmove=true;

alltabs.sort(sortOn("title"));

for(var i=0;i<alltabs.length;i++)

{

chrome.tabs.move(alltabs[i].id, {index: i});

}

var v1 = 'tabplusplus';

var obj= {};

obj[v1] = "false##mysplit##true##mysplit##false";

chrome.storage.local.set(obj);

setTimeout(function(){

tabmove=false;

}, 200);

myport.postMessage(alltabs);

 

}, 100);

}

if(command === "orderurl")

{

getTabs();

setTimeout(function(){

tabmove=true;

alltabs.sort(sortOn("url"));

for(var i=0;i<alltabs.length;i++)

{

chrome.tabs.move(alltabs[i].id, {index: i});

}

var v1 = 'tabplusplus';

var obj= {};

obj[v1] = "true##mysplit##false##mysplit##false";

chrome.storage.local.set(obj);

setTimeout(function(){

tabmove=false;

}, 200);

myport.postMessage(alltabs);

 

}, 100);

}

});

Here is how our content script looks like:

chrome.extension.onMessage.addListener(function (message, sender, callback) {

if (message.functiontoInvoke == "getcontent") {

var data="";

if(document)

{

if(document.getElementsByTagName('body')[0])

{

data=document.getElementsByTagName('body')[0].innerText;

}

}

chrome.runtime.sendMessage({text: "takecontent",val:data,index:message.index}, function(response) {

});

}

if (message.functiontoInvoke == "highlight") {

var term=message.val;

hightlight(term);

}

});

var currentIndex = 0;

var $results;

var offsetTop = 50;

function hightlight(term)

{

$("body").unmark();

$("body").mark(term, {

separateWordSearch: false,

done: function() {

$results = $("body").find("mark");

currentIndex = 0;

jumpTo();

}

});

}

function jumpTo() {

if ($results.length) {

var position,

$current = $results.eq(currentIndex);

if ($current.length) {

position = $current.offset().top - offsetTop;

window.scrollTo(0, position);

}

}

}

Here is the GITHUB link of the complete project:

https://github.com/sarathisahoovt/tab-

Steps to install any chrome extension from your local PC:

1 - Download the source code to any folder on your PC.

2 - Go to chrome://extensions/ on browser

3 - Click Developer mode checkbox

4 - Click load unpacked extension button

5 - Give the path of the source code folder

6 - That's it. Your extension is ready. Enable it by clicking on the puzzle icon on right top panel of your browser.

 

Recent Posts

  • Popular Tech Company Cut Processing Time and Data Processing Costs by 50% with Delta Lake
  • How To Build A Chrome Extension
  • Dataset Metadata
  • Data Governance And Its Top Use Cases
  • Blockchain & NFT

Category

Categories

  • AI
  • AWS Automation
  • AWS Development
  • AWS Migration
  • Blog
  • Career
  • Case Studies
  • Cloud
  • Data
  • Home
  • IOT
  • ML
  • Virtue Tech

Lets
Build
Your
website

Enquire Now

Follow Us

Twitter Icon-linkedin Instagram

Blog

Related Articles

Popular Tech Company Cut Processing Time and Data Processing Costs by 50% with Delta Lake

Customer Details: Client Name: Under NDA Industry: Technology Company

How To Build A Chrome Extension

Building an extension over chrome browser adds a lot

Dataset Metadata

Gone are the days when data is the only

See More

We are a team of highly skilled professionals with 20+ years of experience, who are lock and step with the industry 4.0 journey and evolution.

Follow Us
Twitter Instagram Icon-linkedin
Services
  • Cloud Services
  • Data Services
  • Internet of things
  • AI | ML
  • Professional
  • Cloud Services
  • Data Services
  • Internet of things
  • AI | ML
  • Professional

Industries

  • Healthcare & Life Sciences
  • Manufacturing
  • Media
  • Retail
  • Telecommunications
  • Financial Services
  • Healthcare & Life Sciences
  • Manufacturing
  • Media
  • Retail
  • Telecommunications
  • Financial Services

About Us

  • About Virtuetech
  • Blogs
  • Case Studies
  • Contact Us
  • Careers
  • About Virtuetech
  • Blogs
  • Case Studies
  • Contact Us
  • Careers

2023 © Copyrights VirtueTech Inc | Privacy Policy | Disclaimer