Application Development Blog Posts
Learn and share on deeper, cross technology development topics such as integration and connectivity, automation, cloud extensibility, developing at scale, and security.
cancel
Showing results for 
Search instead for 
Did you mean: 
nabheetscn
Active Contributor
820

Background


The trigger for this blog is bit interesting. Yesterday i saw this tweet from simen.huuse3 where it was mentioned about upcoming SAP Inside Track in Silicon Valley. On inquiring whether it will be broadcasted live, came to know yes. Next thing for me was to check the agenda and block time in my calendar. Could not find any direct option to create event in my google calendar with fields such as subject and link of the blog defaulted(although i could do manually copy paste details but why, it should be done at the click of a mouse). Searched in chrome extension also but could not find any so thought of coding one.


What we are planning to make?


So we are planning to make a chrome extension which will help us in creating quick appointments for the web pages. The overall solution will work as below.

  • Do a right click on the page where you want to create appointment, in context menu choose add to calendar

  • The title of the appointment will be defaulted from web page title and body shall contain the links

  • Add your date and time press save you are done.



Basic Structure of Chrome Extension


I did not know anything about how does chrome extension work but a quick google will get your up and running in not more than 30 minutes. Good thing is all you have to deal with is HTML, Javascript and CSS so at least we utilize our existing skills and make something. Check these two links  link1 and link2  to get up and running.

The basic structure of an extension contains manifest.json file which describe the overall structure of the extension along with HTML,Javascript and CSS files. Check this link for more details on different options available in manifest.json.  So first we will make a simple Hello World extension where we will display hello world message once user click on the button displayed.

Hello World HTML page


<!doctype html>
<html>
<head>
<title>Hello World</title>
<script src="helloworld.js"></script>
</head>
<body>
<h1>Hello World</h1>
<button id="helloworld">Click Me!</button>
</body>
</html>

Hello World Javascript file


document.addEventListener('DOMContentLoaded', function() {
var helloworld = document.getElementById('helloworld');
helloworld.addEventListener('click', function() {
alert('Welcome to Chrome Extension world');
}, false);
}, false);

Manifest.json file.


{
"manifest_version": 2,
"name": "Hello World",
"description": "Hello World Extension",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "helloworld.html"
},
"permissions": [
"activeTab"
]
}

Load our extension in chrome via extension->Developer mode->Load unpacked.Extension is up and running.


 


 

Now we understand the basics of chrome extension next step is to create our appointment extension.

Making our bit tricky extension


The first challenge for us was to read the loaded page title and url. We all know it is available in DOM but it is not accessible in our earlier javascript file as that file has the DOM content of the loaded basic page of extension. This is where Chrome has provided concept of content_scripts in manifest.json file to access the DOM of active tab . So we have added the content_script for our extension in manifest.json file as shown below.
{
"name": "Add to Calendar",
"version": "1.0.0",
"description": "Create appointment in google calendar, copies the title of the page in subject and url in body automatically",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"permissions": [
"contextMenus",
"tabs",
"activeTab",
"storage"
],
"icons": {
"16": "calendar.png",
"48": "calendar.png",
"128": "calendar.png"
},
"browser_action": {
"default_icon": "calendar.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["contentscript.js"],
"run_at": "document_end"
}
]
}

Since we don’t need any html page all we need is a javascript to run which will call google calendar api in a new tab. So manifest.json provides us background field to specify our background.js file.
  "background": {
"scripts": ["background.js"]
},

In background.js file we have access to chrome object via which we add our Add to calendar option in context menu. It has the option of telling when this option shall be visible in context menu we have chosen always the context field.
chrome.contextMenus.create({
title: "Add to Calendar",
contexts: ["all"],
onclick: makeappointment
});

On clicking the button we are calling a function which is opening google calendar in a new tab. The point where we are stuck right now is how to read DOM data of active tab, as in current method we have access to DOM of the extension not the parent page DOM. So we need to somehow talk to our content script via which we can access it. Chrome provide us a very easy solution of using chrome.tabs.sendRequest  which can make call to content script which can return us the title and url. In content script we already have the listener.

Backrground.JS script
function makeappointment(data) {  
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {title: "title"}, function(response) {
var gCalParams = new URLSearchParams({
"action" : 'TEMPLATE',
"text" : response.title,
"details" : response.URL,
"trp;" : true,
'gsessionid' : 'MyId',
'output' : 'xml'
});
var url = "https://calendar.google.com/calendar/render?" + gCalParams.toString();
chrome.tabs.create({"url": url})
});
});
}

 

Content Script
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.title == "title"){
console.log('title '+document.title);
sendResponse({title: document.title,URL:document.URL});
}
else
sendResponse({});
});

Final Output


So now we have a working extension using which we can create appointments for any page. This has also been uploaded to the chrome web store feel free to try it out


What is next


Since now we have the basic plugin already in place, next step is to enhance it with more features for example it shall be able to predict dates from the text etc.Feel free to provide your feedback open to all years.

Complete source code is available to adapt as per your need.
1 Comment
Labels in this area