Email or Website Summarization Browser Extension

Browser Extensions

Continuing on the journey of browser extension, lets see how a browser extension can help with Email or Website summarization using a Generative AI API integration.

I used NodeJS as my backend to create a API based on VertexAI for summarization. Here is the a documentation to create an API using VertexAI.

Now getting into extension development, basic development content is already available in the blog post here and the important part if the popup.js and content.js

popup.js

document.getElementById("summarizeEmail").addEventListener("click", () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, { action: "getEmailContent" }, (response) => {
if (response.emailContent) {
chrome.runtime.sendMessage({ action: "summarizeEmail", emailContent: response.emailContent }, (response) => {
document.getElementById("summary").innerText = response.summary;
});
}
});
});
});

document.getElementById("summarizeText").addEventListener("click", () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.scripting.executeScript(
{
target: { tabId: tabs[0].id },
function: getSelectedText,
},
(results) => {
if (results && results[0] && results[0].result) {
chrome.runtime.sendMessage({ action: "summarizeText", textContent: results[0].result }, (response) => {
document.getElementById("summary").innerText = response.summary;
});
}
}
);
});
});

function getSelectedText() {
return window.getSelection().toString();
}

content.js

// Function to inject the "AI Summary" button into Gmail
const injectAISummaryButton = () => {
const existingButton = document.getElementById("ai-summary-button");
if (existingButton) {
return; // Button already exists, do not add it again
}

const targetElement = document.querySelector(".AO");
if (targetElement) {
const aiSummaryButton = document.createElement("button");
aiSummaryButton.id = "ai-summary-button";
aiSummaryButton.innerText = "AI Summary";
aiSummaryButton.style.position = "absolute";
aiSummaryButton.style.top = "10px";
aiSummaryButton.style.right = "10px";
aiSummaryButton.style.zIndex = 10000;
aiSummaryButton.style.backgroundColor = "#007bff";
aiSummaryButton.style.color = "#ffffff";
aiSummaryButton.style.border = "none";
aiSummaryButton.style.padding = "10px";
aiSummaryButton.style.cursor = "pointer";

aiSummaryButton.addEventListener("click", () => {
const emailContent = getEmailContent();
if (emailContent) {
chrome.runtime.sendMessage({ action: "summarizeEmail", emailContent: emailContent }, (response) => {
showAISummaryOverlay(response.summary);
});
}
});

targetElement.prepend(aiSummaryButton);
}
};

// Function to extract email content from Gmail's DOM
const getEmailContent = () => {
const emailContentElement = document.querySelector(".AO"); // Selector for the email body content
return emailContentElement ? emailContentElement.innerText : "";
};

// Function to create and show the AI Summary overlay
const showAISummaryOverlay = (summary) => {
// Remove existing overlay if present
const existingOverlay = document.getElementById("ai-summary-overlay");
if (existingOverlay) {
existingOverlay.remove();
}

// Create overlay elements
const overlay = document.createElement("div");
overlay.id = "ai-summary-overlay";
overlay.style.position = "fixed";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
overlay.style.zIndex = 10000;
overlay.style.display = "flex";
overlay.style.alignItems = "center";
overlay.style.justifyContent = "center";

const content = document.createElement("div");
content.style.backgroundColor = "white";
content.style.padding = "20px";
content.style.borderRadius = "10px";
content.style.maxWidth = "500px";
content.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)";

const title = document.createElement("h2");
title.innerText = "AI Summary";
title.style.marginTop = "0";

const summaryText = document.createElement("p");
summaryText.innerText = summary;

const closeButton = document.createElement("button");
closeButton.innerText = "Close";
closeButton.style.marginTop = "20px";
closeButton.style.padding = "10px";
closeButton.style.backgroundColor = "#007bff";
closeButton.style.color = "white";
closeButton.style.border = "none";
closeButton.style.borderRadius = "5px";
closeButton.style.cursor = "pointer";

closeButton.addEventListener("click", () => {
overlay.remove();
});

// Append elements
content.appendChild(title);
content.appendChild(summaryText);
content.appendChild(closeButton);
overlay.appendChild(content);
document.body.appendChild(overlay);
};

// Inject the "AI Summary" button when the content script is loaded
injectAISummaryButton();

// Observe changes in the Gmail DOM to inject the button when necessary
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type === "childList") {
injectAISummaryButton();
}
}
});

observer.observe(document.body, { childList: true, subtree: true });

// Listen for messages from the popup or background script
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "getEmailContent") {
const emailContent = getEmailContent();
sendResponse({ emailContent: emailContent });
}
});

background.js

const API_ENDPOINT = "http://localhost:3001/secure/ai";

const getSummary = (content, callback) => {
const encodedContent = encodeURIComponent(content);

fetch(API_ENDPOINT + "/summary", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ prompt: "Please summarize the below uri encoded content. \n\n" + content }),
})
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok " + response.statusText);
}
return response.json();
})
.then((data) => {
if (callback && typeof callback === "function") {
callback(data);
}
})
.catch((error) => {
console.error("Error: " + error);
if (callback && typeof callback === "function") {
callback({ summary: "Error fetching summary." });
}
});
};

chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "summarizeText",
title: "AI Summary",
contexts: ["selection"],
});
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "summarizeText") {
const selectedText = info.selectionText;

console.log("Selected Text: " + selectedText);

getSummary(selectedText, (data) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
func: (summary) => {
const summaryElement = document.createElement("div");
summaryElement.style.position = "fixed";
summaryElement.style.bottom = "10px";
summaryElement.style.right = "10px";
summaryElement.style.backgroundColor = "white";
summaryElement.style.border = "1px solid black";
summaryElement.style.padding = "10px";
summaryElement.style.zIndex = 10000;
summaryElement.innerText = summary;
document.body.appendChild(summaryElement);
},
args: [data.message],
});
});
}
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "summarizeEmail") {
const selectedText = request.emailContent;

console.log("Selected Email Content: " + selectedText);

getSummary(selectedText, (data) => {
sendResponse({ summary: data.message });
});

return true; // Will respond asynchronously.
}
});

Explanation on whats happening,

  1. Listen to the gmail page for the page loads, Once the page is loaded invoke the injectAISummaryButton in the content.js
  2. “AI Summary button will be injected at the top right corner of the page”
  3. A context menu is also added when a text is selected. The click event i registered in the popup.js.
  4. Upon selecting the text in any web page and clicking on the context menu. or clicking on the “AI Summary” on gmail page will send the data of the email over the api and show the summarized response to the user.

Refer the full chrome extension plugin at GitHub

Browser extension sample – Chrome/Edge – HttpRequestViewer

Browser Extensions

The Evolution of Browser Extensions: From Web Customization to Advanced Development Tools – Part 2
We discussed about The evolution of the Browser extensions in the previous post. Lets quick learn how to create a Chrome/Edge/Firefox extension. I have mentioned “Advanced development tools” in the title, but never got chance to explore those capabilities earlier. We will create a simple extension to explore the power of it.

Creating a browser extension has never been easier, thanks to the comprehensive documentation and support provided by browser vendors. Below, we’ll walk through the steps to create a simple extension for both Chrome and Microsoft Edge using Manifest V3. We will use this tool to print the list of HTTP requests that are fired in a given browser and list it in the page.

Basics of extensions:

Manifests – A manifest is a JSON file that contains metadata about a browser extension, such as its name, version, permissions, and the files it uses. It serves as the blueprint for the extension, informing the browser about the extension’s capabilities and how it should be loaded.

Key Components of a Manifest File:

Here are the key components typically found in a Manifest V3 file:

1. Manifest Version: There are different versions of the manifest file, with Manifest V3 being the latest and most widely adopted version. Manifest V3 introduces several changes aimed at improving security, privacy, and performance with lot of controversies around it. Read more about the controversies at Ghostery.
2. Name and Version: These fields define the name and version of the extension. Choose a unique name and version. An excellent guide of version semantics is available here.
3. Description: A short description of the extension’s functionality.
4. Action: Defines the default popup and icon for the browser action (e.g., toolbar button).
5. Background: Specifies the background script that runs in the background and can handle events like network requests and alarms.
6. Content Scripts: Defines scripts and stylesheets to be injected into matching web pages.
7. Permissions: Lists the permissions the extension needs to operate, such as access to tabs, storage, and specific websites.
8. Icons: Specifies the icons for the extension in different sizes. For this post I created a simple icon using Microsoft Designer. I gave a simple prompt with the description above and I got the below image. Extension requires different sizes for showing it in different places. I used Chrome Extension Icon Generator and generated different sizes as needed.

     

9. Web Accessible Resources: Defines which resources can be accessed by web pages.

Create a project structure as follows:

HttpRequestViewer/
|-- manifest.json
|-- popup.html
|-- popup.js
|-- background.js
|-- history.html
|-- history.js
|-- popup.css
|-- styles.css
|-- icons/
    |-- icon.png
    |-- icon16.png
    |-- icon32.png
    |-- icon48.png
    |-- icon128.png

Manifest.json

{
  "name": "API Request Recorder",
  "description": "Extension to record all the HTTP request from a webpage.",
  "version": "0.0.1",
  "manifest_version": 3,
  "host_permissions": [""],
  "permissions": ["activeTab", "webRequest", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  },
  "web_accessible_resources": [{ "resources": ["images/*.png"], "matches": ["https://*/*"] }]
}

popup.html
We have two options with the extension.

1. A button with record option to start recording all the HTTP requests
2. Link to view the history of HTTP Requests recorded

<!DOCTYPE html>
<html>
  <head>
    <title>API Request Recorder</title>

    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div class="heading">
      <img class="logo" src="icons/icon48.png" />
      <h1>API Request Recorder</h1>
    </div>
    <button id="startStopRecord">Record</button>

    <div class="button-group">
      <a href="#" id="history">View Requests</a>
    </div>

    <script src="popup.js"></script>
  </body>
</html>

popup.js
Two event listeners are registered for recording (with start / stop) and viewing history.
First event is used to send a message to the background.js, while the second one instructs chrome to open the history page in new tab.

document.getElementById("startStopRecord").addEventListener("click", () => {
  chrome.runtime.sendMessage({ action: "startStopRecord" });
});

document.getElementById("history").addEventListener("click", () => {
  chrome.tabs.create({ url: chrome.runtime.getURL("/history.html") });
});

history.html

 
<!DOCTYPE html>
<html>
  <head>
    <title>History</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>History Page</h1>
    <table>
      <thead>
        <tr>
		  <th>Method</th>
          <th>URL</th>
          <th>Body</th>
        </tr>
      </thead>
      <tbody id="recorded-data-body">
        <!-- Data will be populated here -->
      </tbody>
    </table>
    <script src="history.js"></script>
  </body>
</html>

history.js
Requests background.js to “getRecordedData” and renders the result in the html format.

document.addEventListener("DOMContentLoaded", () => {
  chrome.runtime.sendMessage({ action: "getRecordedData" }, (response) => {
    const tableBody = document.getElementById("recorded-data-body");
    response.forEach((record) => {
      const row = document.createElement("tr");
      const urlCell = document.createElement("td");
      const methodCell = document.createElement("td");
      const bodyCell = document.createElement("td");

      urlCell.textContent = record.url;
      methodCell.textContent = record.method;
      bodyCell.textContent = record.body;

      row.appendChild(methodCell);
      row.appendChild(urlCell);
      row.appendChild(bodyCell);
      tableBody.appendChild(row);
    });
  });
});

background.js
Background JS works as a service worker for this extension, listening and handling events.
The background script does not have access to directly manipulate the user page content, but can post results back for the popup/history script to handle the cosmetic changes.

let isRecording = false;
let recordedDataList = [];

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Obtined message: ", message);
  if (message.action === "startStopRecord") {
    if (isRecording) {
      isRecording = false;
      console.log("Recording stopped...");
      sendResponse({ recorder: { status: "stopped" } });
    } else {
      isRecording = true;
      console.log("Recording started...");
      sendResponse({ recorder: { status: "started" } });
    }
  } else if (message.action === "getRecordedData") {
    sendResponse(recordedDataList);
  } else {
    console.log("Unhandled action ...");
  }
});

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    if (isRecording) {
      let requestBody = "";
      if (details.requestBody) {
        if (details.requestBody.formData) {
          requestBody = JSON.stringify(details.requestBody.formData);
        } else if (details.requestBody.raw) {
          requestBody = new TextDecoder().decode(new Uint8Array(details.requestBody.raw[0].bytes));
        }
      }
      recordedDataList.push({
        url: details.url,
        method: details.method,
        body: requestBody,
      });
      console.log("Recorded Request:", {
        url: details.url,
        method: details.method,
        body: requestBody,
      });
    }
  },
  { urls: [""] },
  ["requestBody"]
);

Lets load the Extension

All set, now lets load the extension and test it.

  • Open Chrome/Edge and go to chrome://extensions/ or edge://extensions/ based on your browser.
  • Enable “Developer mode” using the toggle in the top right corner.
  • Click “Load unpacked” and select the directory of your extension.

Load extensionupload extension

  • Your extension should now be loaded, and you can interact with it using the popup.
  • When you click the “Record” button, it will start logging API requests to the console.

  • Click the “Record” button again and hit the “View requests” link in the popup to view the history of APIs.

I have a sample page (https://itechgenie.com/demos/apitesting/index.html) with 4 API calls, which also loads images based on the API responses. You could see all the API requests that is fired from the page including the JS, CSS, Images and API calls.


Now its up to the developers imagination to build the extension to handle these APIs request and response data and give different experience.

Code is available in GitHub at HttpRequestViewer

The Evolution of Browser Extensions: From Web Customization to Advanced Development Tools

Browser Extensions

It’s been a while that I published a post. A week before, I created a new Chrome extension and shared with my team and noticed the new developers didn’t have knowledge on how powerful the browser extensions can be. It pushed me to write a short post about the history and power of browser extensions.

A Brief History

Browser extensions have dramatically transformed how users interact with the internet, offering a plethora of customization options and functionalities that enhance productivity, security, streamline workflows and user experience. These small software modules, integrated into web browsers like Chrome, Edge, Firefox etc., enable users and developers to tailor their browsing experience, automate tasks, and access additional features not available in standard browser installations. The evolution of browser extensions has marked a significant milestone in web development, fostering a community of developers who continuously innovate and simplify complex tasks.

The Early Days

Browser extensions trace their origins back to the early days of web browsers. The first notable implementation was by Internet Explorer in the late 1990s, which allowed for basic plugins to extend browser capabilities. Early days of these extensions allowed developers to add custom menu bars(also known as Browser Bands and Communication Bands), context menu options for seamless integration with extensions. CricInfo cricket score ticker was a popular toolbar that I have used in the early days. Internet download manager extension is one another toolbar which allowed the download of audios and videos, changed the life of lot of Dial-up connection users.

The Rise of Firefox

However, it was Mozilla Firefox that popularized the concept of extensions by providing a dedicated platform for the developers to create and submit the add-ons. Themes and skins are a fun part of extensions world. Greasemonkey,one of the early add-ons, allowed users to write custom code on top of extensions was a boon for customization. I used my first AdBlocker script from UserScripts.org installed using Greasemonkey. This Add-on allowed me to create customize my own scripts without taking the hassle of publishing. Firefox’s various components like Add-ons, Extensions, and Plugins (Flash, Java, SilverLight, etc.) eventually evolved into standardized extensions.

The Chrome Era

Then came the days of Chrome. Google Chrome, introduced in 2008, revolutionized the extension landscape by offering streamlined APIs and a dedicated web store for its extensions. This facilitated easier development and distribution of extensions, leading to a surge in their popularity. The Chrome Web Store, launched in 2010, became a central hub for users to discover and install extensions, further solidifying their importance in the web ecosystem.

Extensions like Web Developer and React Developer Tools provide essential utilities for debugging, testing, and optimizing web applications. By leveraging browser APIs, developers can create tools that integrate seamlessly into their development environment, automating repetitive tasks and offering real-time insights into application performance.

Essential Extensions for Users

Some of the most used extensions include:
AdBlock / AdBlock Plus / uBlock Origin: Blocks ads on websites, improving load times and reducing clutter.
Microsoft Editor / Grammarly: Enhances writing by checking grammar, spelling, and style.
Honey: Automatically finds and applies coupon codes at checkout.
Bitwarden / LastPass: A password manager that stores and auto-fills passwords securely.
Momentum: Replaces the new tab page with a personal dashboard featuring a to-do list, weather, and inspirational quotes.
Dark Reader: Applies a dark theme to websites, reducing eye strain.

Must-Have Extensions for Developers

From a developer’s perspective, extensions are a boon. Some popular developer-friendly extensions are:
TamperMonkey – Modify website layouts, add/remove features, or automate actions – Alternative to Greasemonkey supporting userscripts.
React Developer Tools / Vue.js / – Provides debugging and inspection tools for React and Vue.js applications.
Redux DevTools – Allows developers to inspect every state and action payload for Redux applications.
Postman – A powerful tool for testing APIs by making HTTP requests.
JSON Viewer – Formats JSON data to make it more readable.
XPath Helper – Helps to find XPath expressions for elements on a webpage.
ColorZilla – Advanced color picker and gradient generator.
WhatFont – Identifies fonts used on a webpage.

We will see how to create a simple browser extension in the next post –Browser extension sample – Chrome/Edge – HttpRequestViewer

Best operating system to run older configuration PC – Lubuntu

Choosing Lubuntu:

LatelyI was pushed to use my 7 year old PC for an emergency which had Windows 7 in it. It was very tough for me to use the old PC as compared to my latest one, even though it had 1.5GB or RAM and Dual Core Processor. I even had thoughts to install Windows XP to achive better performance.

Before starting anything, did some research to if I can find a Linux distro that could consume very less resources. I was always fond of the Ubuntu distros for as long as 10 years.
I was very fond of receiving the Ubuntu distro CDs that was transported freely to my remote village earlier in 2004 or 2005.
With that fondness I searched the latest distro and then came the Lubuntu (Lite-Ubuntu). I installed it in my PC with dual boot configuration. I should say that the performance is very impressive.

About Lubuntu:

Lubuntu is a good operating system for many old computers, but not for all of them.
Some computers have too little horsepower or memory. A rule of thumb is that the computer should not be more than 10 years old.
Lubuntu is recognized as a member the Ubuntu family by the developers of Ubuntu and has the same release nomenclature.

System Requirements, as per Lubuntu site:

We have done many tests and we've found out that Lubuntu can be installed on a Pentium II or Celeron system with 128 MB of RAM, but such a system would not perform well enough for daily use.
With 256MB - 384MB of RAM, the performance will be better and the system will be more usable.
With 512MB of RAM, you don't need to worry much.

If you like to use the system for normal activities like general browsing, viewing mails etc., the above config would be great.
But if you intend to use it for video watching like using Youtube, I must warn you, the browser you use could eat up all all memory.

Differences between Lubuntu and Ubuntu:

1. Different Desktop Environment (DE) – Lubuntu uses LXDE (Lightweight X11 Desktop Environment) while Ubuntu uses Unity as the default DE.

  • Both Lubuntu and Ubuntu share two major important things: same Core System and same Repositories.
  • Lubuntu and Ubuntu belong to the same family and talking about each as totally different two systems is not correct since they have some things in common.
  • They even share the same Forum Area and share many Wiki Pages. Other than that, they are the same.
  • The DE is what makes Lubuntu a lightweight OS, and of course the selected applications too because we make sure to use the lightest applications which are not resource hungry.
  • However, you are still free to use any application available in Ubuntu’s repositories, as long as your computer can run it.

2. Different Default Applications

Lubuntu Application Function
Xpad Stickies
Evince PDF Viewer
Gnumeric Spreadsheet
Abiword Docs
Simple-scan Scanner
Gnome-disk-utility Partition Editor
Light-locker Screensaver
Guvcview Webcam Utility
Gucharmap Character Map
Scrot Screenshot
Hardinfo System info
Mtpaint Image Editing
Xfburn Cd Burning
Pcmanfm File Manager
Gcalculator Calculator
Audacious Audio Player
Gnome-mplayer Video Player
Transmission Torrent
Pidgin Instant Messaging
Sylpheed Email Client
Mozilla Firefox Web browser
Leafpad Editor
File-roller (De)Compress files
Lxterminal Terminal
Gpicview Image Viewer

Download Lubuntu:

http://lubuntu.me/downloads/
https://help.ubuntu.com/community/Lubuntu/GetLubuntu

Official Websites:

http://lubuntu.me/
http://lubuntu.net/
https://wiki.ubuntu.com/Lubuntu

Installing OpenStack on AWS

1. Prerequisites – Minimal requirements for hosting in AWS, but not limited to:

  • Ubuntu Server 14.04.3 LTS – 64bit
  • Minimum 2VCPU – Cores
  • Minimum 8 GB RAM for just OpenStack (m4.large), Minimum 16 GB RAM for Sahara and clustering (m4.xlarge)
  • Atleast 40 GB of diskspace

2. Install Ubuntu if you dont have one

3. Verify installed version using

lsb_release -d
free -m
df -h

4. Update to the latest binaries

sudo apt-get update

5. Create a SUDO user – alternatively you can use the /devstack/tools/create-stack-user.sh to create a user after step 8

sudo -i
adduser stack			
	Enter new UNIX password:
	Retype new UNIX password:
	passwd: password updated successfully
	Changing the user information for username
	Enter the new value, or press ENTER for the default
	Full Name []:stack
	Room Number []:
	Work Phone []:
	Home Phone []:
	Other []:
	Is the information correct? [Y/n] Y

6. Add user to SUDOERs group

usermod -aG sudo stack 
echo "stack ALL=(ALL) NOPASSWD: ALL" >> /etc/sudoers

7. Switch to the new stack user

su - stack
check if the user can do sudo operations without password prompts
sudo ls -la /root

8. Switch to user home and install GIT and checkout devstack

cd ~
sudo apt-get install git
git clone https://github.com/openstack-dev/devstack

9. Configure devstack – update local.config and move to /devstack

cd /devstack
cp sample/local.conf .

* Update the passwords for the accounts

ADMIN_PASSWORD=St@ckNewPwd1
DATABASE_PASSWORD=St@ckNewPwd1
RABBIT_PASSWORD=St@ckNewPwd1
SERVICE_PASSWORD=St@ckNewPwd1

* If you are running on a physical machine with a static IP you can update the following property. On AWS its better to leave it commented as the local IP will be changed on each restart, unless the Elastic IP is assigned to the instance

HOST_IP=172.31.26.172

* And add the following line at the end of the file. These entries will add the Sahara plugin (Data Processing) in OpenStack UI

echo "enable_plugin sahara git://github.com/openstack/sahara" >> local.conf
echo "enable_plugin sahara-dashboard git://github.com/openstack/sahara-dashboard" >> local.conf
echo "enable_plugin ceilometer git://github.com/openstack/ceilometer" >> local.conf

10. Start the stack services

./stack.sh

* This takes up sometime and logs will be available at /opt/stack/logs. On successful completion you will find details something similar as below.

=========================
DevStack Component Timing
=========================
Total runtime         1169
run_process            57
test_with_retry         3
apt-get-update          3
pip_install           299
restart_apache_server  10
wait_for_service       11
git_timed             244
apt-get                69
=========================

This is your host IP address: 172.31.26.172
This is your host IPv6 address: ::1
Horizon is now available at http://172.31.26.172/dashboard
Keystone is serving at http://172.31.26.172/identity/
The default users are: admin and demo
The password: St@ckNewPwd1
stack@ip-172-31-26-172:~/devstack$

11. To access the dashboard hit http://172.31.26.172/dashboard in browser (with the ip as displayed in the above step). If you are running in local PC you can directly access with the above url. But if you are running on AWS, this is the internal IP and will not be available to the outside world. In this case, allow HTTP access on 80 port for the outside world and access the service with the Public IP or DNS hostname allocated to your instance. This in my case http://54.23.123.43/dashboard.

Enable Registration in WordPress

In WordPress custom installations, the option for Registration of new users is disabled by default. To enable the registrations and allow logins for public you can follow the below steps.

Single site installation:

As soon as the installation is completed go to the WordPress Dashboard -> Settings

You will find an option Allow new registrations, you may need to select the Default Role for the newly registered members.

wp-user-registeration-single-site

Multi-site/Network installation:

In case if you have installed WordPress in Multi site mode go to the Network Admin -> Settings and select the options under Allow new registrations section.

wp-user-registeration-multi-site

Once the registration is enabled it may be needed to add login options at places to find it easily. Follow these methods to do the same.

Method 1:

Add Meta widget in the sidebars or in footers. Select Appearance -> Widgets and select the Meta Widget.  Note that the menu will be available in Individual Site Dashboard, not in the Network Admin dashboard in case of Multi-site installation.

wp-user-login-widget

 

Method 2:

Add the login link in your Posts/Pages and it should be in the pattern, http(s)://HOSTNAME(:PORT)/(SUBDOMAINS)/wp-login.php.

Examples:

  1. http://itechgenie.com/myblog/wp-login.php – MultiSite installation
  2. http://itechgenie.com/wp-login.php – SingleSite installation

Maven and Cloud Foundry Integration

Cloud Fountry provides as easy integration plugins to move the build packages to its servers through Maven. Here is the sample configuration.

Add Servers to settings.xml

<settings> 
	...
	<servers>
		... 
		<server>
			<id>cloud-foundry-credentials</id>
			<username>cf_user_id_you_created</username>
			<password>cf_password_you_created</password>
		</server>
	</servers> 
</settings>

You can encrypt you password in MAVEN settings. Check out here on how to do it.

Add Dependency and Plugin settings in pom.xml

</project>
	...	
	<build>
		...
		<plugins>
				<groupId>org.cloudfoundry</groupId>
				<artifactId>cf-maven-plugin</artifactId>
				<version>1.1.3</version>
				<configuration>
					<server>cloud-foundry-credentials</server>
					<target>https://url.to.cloud.foundry.com</target>
					<memory>512</memory>
					<appname>application-name</appname>
					<org>ORG_NAME</org>
					<space>SPACE_NAME</space>
					<instances>1</instances>
				</configuration>
				<executions>
					<execution>
						<phase>package</phase>
						<goals>
							<goal>push</goal>
						</goals>
					</execution>
				</executions>
		</plugins>
	</build>
</project>

Thats it !!. Build you project using Maven and check if you application gets deployed into your Cloud Foundry server.

Activiti REST in Weblogic

When trying to deploy the Activiti REST WAR in WebLogic servers, we found that the requests are reaching the server, but are filtered by the WebLogic server. To make sure your requests reach the Application bypassing the WebLogic filters, you must set the enforce-valid-basic-auth-credentials property in config.xml -> security-configuration to false

...
<enforce-valid-basic-auth-credentials>false</enforce-valid-basic-auth-credentials>
</security-configuration>

From WebLogic servers 9.2 and above, client requests that use the HTTP BASIC authentication must pass WebLogic Server authentication, even if access control is not enabled on the target resource.

The setting of the Security Configuration MBean flag enforce-valid-basic-auth-credentials determines this behavior. (The DomainMBean can return the new Security Configuration MBean for the domain.) It specifies whether or not the system should allow requests with invalid HTTP BASIC authentication credentials to access unsecured resources.

More info at “Understanding BASIC Authentication with Unsecured Resources“.

Installing Oracle JDK in Amazon AWS EC2 Ubuntu

Lately I tried to install Oracle JDK in one of my Ubuntu servers on Amazon EC2 instance. Unfortunately the inbuilt installers support the installation of OpenJDK.

For some requirements, I was in need of installing a specific version of JDK and test my application, you could get the older version from Oracle Site. I used the following script from one of the blogs, hope it helps someone.

#!/usr/bin/env bash
wget -O 'jdk-7u80-linux-x64.tar.gz' --no-cookies --no-check-certificate --header 'Cookie:gpw_e24=http://www.oracle.com; oraclelicense=accept-securebackup-cookie' 'http://download.oracle.com/otn-pub/java/jdk/7u80-b15/jdk-7u80-linux-x64.tar.gz'
tar -xvf jdk-7u80-linux-x64.tar.gz
sudo mkdir /usr/lib/jvm
sudo mv ./jdk1.7* /usr/lib/jvm/jdk1.7.0
sudo update-alternatives --install "/usr/bin/java" "java" "/usr/lib/jvm/jdk1.7.0/bin/java" 1
sudo update-alternatives --install "/usr/bin/javac" "javac" "/usr/lib/jvm/jdk1.7.0/bin/javac" 1
sudo update-alternatives --install "/usr/bin/javaws" "javaws" "/usr/lib/jvm/jdk1.7.0/bin/javaws" 1
sudo chmod a+x /usr/bin/java
sudo chmod a+x /usr/bin/javac
sudo chmod a+x /usr/bin/javaws

The Key here is Oracle need you to accept the license terms before using the any version of Oracle JDK. You could do the same from the scripting by just adding --no-cookies --no-check-certificate --header 'Cookie:gpw_e24=http://www.oracle.com; oraclelicense=accept-securebackup-cookie' params to the WGET.

Alternative, you could download the installers/zip files from external CDNs, like REUCON, move it to EC2 instance through SFTP and install it.

Adding Oracle Datasource to JBoss EAP server

To add a Oracle Datasource to the JBOSS server, follow the steps

1. In the standalone.xml or in standalone-full.xml

<subsystem xmlns="urn:jboss:domain:datasources:1.2">
		<datasources>
			<datasource jndi-name="java:jboss/datasources/ExampleDS" pool-name="ExampleDS" enabled="true" use-java-context="true">
				<connection-url>jdbc:h2:tcp://localhost/~/jbpm-db-new;MVCC=TRUE;DB_CLOSE_DELAY=-1;DB_CLOSE_ON_EXIT=FALSE</connection-url>
				<driver>h2</driver>
				<security>
					<user-name>sa</user-name>
					<password>sa</password>
				</security>
			</datasource>
			<datasource jndi-name="java:jboss/datasources/JbpmDS" pool-name="JbpmDS" enabled="true" use-java-context="true">
				<connection-url>jdbc:oracle:thin:@localhost:1521:XE</connection-url>
				<driver>oracle</driver>
				<security>
					<user-name>username</user-name>
					<password>password</password>
				</security>
			</datasource>
			<drivers>
				<driver name="h2" module="com.h2database.h2">
					<xa-datasource-class>org.h2.jdbcx.JdbcDataSource</xa-datasource-class>
				</driver>
				<driver name="oracle" module="com.oracle.jdbc">
					<driver-class>oracle.jdbc.driver.OracleDriver</driver-class>
					<xa-datasource-class>oracle.jdbc.xa.client.OracleXADataSource</xa-datasource-class>
				</driver>
			</drivers>
		</datasources>
</subsystem>

2. In $JBOSS_HOME/modules/com/oracle/jdbc/main I have copied the ojdbc6.jar and created the module.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<module xmlns="urn:jboss:module:1.0" name="com.oracle.jdbc">
  <resources>
    <resource-root path="ojdbc6.jar"/>
  </resources>
  <dependencies>
    <module name="javax.api"/>
    <module name="javax.transaction.api"/>
  </dependencies>
</module>

3. Now you could use the JNDI “java:jboss/datasources/JbpmDS” in your application