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.

Too many tabs

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.

When a HTTP request is received

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.

When a HTTP request is received

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.

Load unpacked

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.

Extensions

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

About the Author:

Geetha is a Business Applications MVP & Consultant with Artis Consulting based out of Dallas, TX delivering business solutions leveraging O365, Custom App Dev implementations, Azure and various emerging technologies. She is a Power Platform enthusiast and is passionate about helping people expand their possibilities and efficiently transform the way they work.

Reference:

Sivasailam, G. (2019). Flow-tastic Bookmarker using Chrome Extension and Microsoft Flow. Available at: https://svaghub.wordpress.com/2019/04/30/flow-tastic-bookmarker-using-chrome-extension-and-microsoft-flow/ [Accessed: 14th April 2020].

Find more great Power Platform content here.

Share this on...

Rate this Post:

Share: