Flow-tastic Bookmarker using Chrome Extension and Microsoft Flow

Social media is brimming with several great blogs, videos, documentation and information that I want to keep up on. And there isn’t enough time in a day to watch or read all the awesome content. Often I come across great posts on my social media feeds or search results based on a problem I’m trying to solve and end up creating bookmarks or leaving several tabs open for reading later. I hardly get to all those tabs/bookmarks and eventually lose track of what I was looking for in the first place.

It got me thinking on how I can efficiently manage bookmarks with just a browser click and incorporate the brilliance of Microsoft Flow to tie in multitude of supported services. Ideally, I’d like to have a placeholder for such content and take notes while reviewing them for future reference, knowledge sharing and follow up actions. I started building a simple Chrome Extension to capture the Title and URL of a webpage and use Flow to create a OneNote section with the captured details.

Chrome Extension

Chrome Extension is just a group of files that are triggered based on browser events and run behind the scenes to enhance your Chrome browsing experience. Building a Chrome Extension is as cool as it sounds. It may seem complicated at first view but it really is relatively easy to develop. You don’t need to be an expert dev and having a basic knowledge of HTML, CSS and JS can get you started on extensions in no time.

Flowtastic Bookmarker extension comprises of 4 main files:

Manifest file: Think of the manifest.json as a configuration file that tells Chrome what permissions the extension has, version, name, description, supporting libraries, content script location and what action to take when a browser action is triggered. This extension uses the latest minified version of jQuery. It isn’t necessary but I prefer to use jQuery since it makes everything easier.

{
 "manifest_version": 2,
 "name": "Flowtastic Bookmark Helper",
 "description": "Get your bookmarks taken care of via Microsoft Flow",
 "author":"Geetha Sivasailam",
 "version": "1.0",
 "content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": ["jquery-3.3.1.min.js","content.js"]
  }
],
 "browser_action": {
    "default_icon" : {			
		"128" : "extico128.png"
		},
		"default_title": "Bookmark Via Microsoft Flow",
		"default_popup": "popup.html"
	},
	"icons" : {
		"16" : "extico16.png",
		"48" : "extico48.png",
		"128" : "extico128.png"
	},
	"permissions" : [
		"activeTab",
		"tabs",
		"http://*/*",
		"https://*/*"
	]
  }

Content script: This is a Javascript file that runs in the context of the web page the browser visits and can interact with the Document Object Model (DOM) of the page from your Chrome extension. Aha! I see the gears on your heads turning with all the awesome stuff you could do having access to the DOM. Keep those ideas coming!!

This script is responsible for initiating an HTTP request to trigger the bookmarker Flow which we will look at later in this post. Are you asking if this is essentially a Flow button on the browser? Yes and that’s why it’s Flow-tastic!

// content.js
//listen for initiateFlow request, call Flow http endpoint and set callback to sendResponse
chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.action === "initiateFlow") {
            initiateFlow(request, sender, sendResponse);
            return true;
        }
    }
);

//send httprequest to trigger Flow
function initiateFlow(request, sender, sendResponse){
	var title = document.getElementsByTagName("title")[0].innerHTML;
	var url = window.location.href;
	var postBody = {"contentTitle":title,"contentUrl":url};
	var flowhttpPostUrl ="<REPLACE WITH YOUR FLOW HTTP TRIGGER ENDPOINT URL>";
  
    var settings = {    
            "url": flowhttpPostUrl,  
            "method": "POST",  
            "headers": {  
                "content-type": "application/json",  
                "cache-control": "no-cache"  
            },  
            "dataType": 'json',
            "data":JSON.stringify(postBody),
			"error": function(httpRequest, textStatus, errorThrown) {
                           return sendResponse("Sorry! Error occurred...");
			}
 }  
  
        $.ajax(settings).done(function (response) {  
		   return sendResponse("Flow-tastic! Url bookmarked!");
        });  
	
}

Popup Html: When an extension adds a little icon next to the address bar, that’s a browser action. This is an HTML file that is generated when a user clicks on the extension icon. In our case, the popup is used to provide a visual confirmation of the bookmarking action for the user.

<!DOCTYPE html>
<html>
<head>
	<title>Flowtastic Extension</title>
	 <script src="popup.js"></script>
	<style>
		#popupStatusTxt{
			width:200px;
			height:100px;
			text-align:center;
			line-height:100px;
			font-weight:700;
			background-color:#0078D4;
			color:white;
		}
	</style>
</head>
<body>
	<div id="popupStatusTxt">
		Initiating Flow...
	</div>
</body>
</html>

Popup Script: The content script has access to the current page on the browser but it cannot listen to user clicks on extension icons. A popup.js script file is needed to enable communication between the popup html and content script. This script can notify the content script running in the background that the user has requested to bookmark the page.

//popup.js
//listen for DOM loaded event and trigger Flow to bookmark URL
document.addEventListener('DOMContentLoaded', function() {
	triggerFlowRequest();
});

//display Flow bookmark request status
function showFlowResponse(results) {
	 document.getElementById('popupStatusTxt').textContent = results;
}

//send Flow initiation request to content script
function triggerFlowRequest(){
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, { action: "initiateFlow" }, function (response) {
            showFlowResponse(response);
        });
    });
}

Microsoft Flow

The Flow I used for this extension is pretty straight forward. It’s a HTTP trigger based Flow that accepts bookmark related properties: ‘contentTitle’ & ‘contentUrl’ in the JSON request body. And it creates a page in a OneNote section with the ‘contentTitle’ and a hyperlink to the ‘contentUrl’. Finally it returns a status code as the request response to the calling client application which in our case is the chrome extension.

You can download a copy of the Flow for reference, reuse or repurpose at will from my GitHub:
https://github.com/GSiVed/BookmarkerFlow

This Flow can also be extended further to tweet or create a To-Do item or post in Slack or even share via Microsoft Teams channel with just a click from your browser as soon as you come across useful tidbits of information.

You can download the source code for the Flowtastic Bookmarker extension from my GitHub repo:
https://github.com/GSiVed/Flowtastic-Bookmarker

This post is just to get you started with using Flow via Chrome Extensions. The extension is work in progress and open source for you to enhance it based on your needs. You should be able to download the extension and save it locally.

Once you have your version of the bookmarker Flow saved, edit the Flow and grab the HTTP Post Url from the Request trigger action.

Open the content.js file within the extension folder and replace the value for variable ‘flowhttpPostUrl’ with the HTTP Post Url from your Flow. Save the file.

Navigate to chrome://extensions/ and ensure that ‘Developer mode’ is enabled prior to loading the extension else you won’t see the ‘Load unpacked’ button at the top of the browser.

Click on Load unpacked button to upload the extension folder you saved locally and you should see the extension tile with title and description as seen below.

An extension icon is added to the end of your address bar and you are set! Woohoo! Get your creativity Flow-ing and I can’t wait to hear how you intend to extend this extension!

Check out this video for a quick overview of the Flow-tastic Bookmarker in action:

Resources

April Dunnam has an excellent post on how she built the Microsoft Flow Dark Mode extension with a link to download the source code. It’s a great resource to learn how quickly you can create cool extensions.

Check out the official chrome extension documentation for more details.

Chrome API references

Chrome Extension Architecture

One thought on “Flow-tastic Bookmarker using Chrome Extension and Microsoft Flow

  1. Pingback: #HowDoYouFlow: Flowtastic Bookmarker using Chrome Extension & MicrosoftFlow – TDG

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s