Overview
- I have an Edge Extension project that has just display browsing history in the popup dialog of Edge Extension.
- In this post, I will add two new features.
- Detect and Send double click event from tab with using content script injection
- Listen the double click event and display the double-clicked tab title and url in the popup dialog.
The Complete manifest file is saved in the HistoryMark Repository folder.
1. Update manifest file
I added four items to my manifest.json file.
- content_scripts: Edge extension injects the content.js script into all tab’s url. You can add extended script functionality to the URL of each tab.
- background: Edge extension keep running this background.js all the time. And it is possible to listen to receive message from all URL.
{
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-scripts/content.js"]
}
],
"background": {
"service_worker": "background.js"
},
"host_permissions": ["<all_urls>"],
"permissions": [
"history",
"favicon",
"scripting",
"tabs"
]
}The Complete manifest file is saved in the HistoryMark Repository folder.
2. Add EventListner in Content Script
document.addEventListener('dblclick', (event) => {
chrome.runtime.sendMessage({
action: "tabDoubleClicked",
tabInfo: { title: document.title, url: location.href }
});
console.log(document.title);
});
I created “content.js” that has addEventListener() method. This JavaScript is injected into all tab URL and run in each tab page.
This script is waiting for the double click event. Once you get the double click event, the message will send that includes action and tabInfo objects.
The Complete manifest file is saved in the HistoryMark Repository folder.
3. Add Message Listener in the background script
let doubleClickedTab = null;
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
// Listening the double click notification from content.js
if (message.action === 'tabDoubleClicked') {
doubleClickedTab = message.tabInfo;
}
// Listening the popup.html open notification from popup.js
if (message.action === "getDoubleClickedTabInfo") {
if (doubleClickedTab) {
sendResponse({ title: doubleClickedTab.title, url: doubleClickedTab.url });
} else {
sendResponse({ error: "No tab information available" });
}
return true;
}
});
This background.js will receive messages from both “getHistory.js” and “content.js”.
If the background.js receives a message from content.js, it will save the double-clicked tab information (The title and the URL) in “doubleClickedTab” variable.
If the background.js receives a message from getHistory.js, it will return the double-clicked tab information.
The Complete manifest file is saved in the HistoryMark Repository folder.
4. Update popup.html and getHistory.js
At last, I added section to display the double-clicked title and URL in the popup dialog.
<body>
<h1>Double Clicked!</h1>
<div id="tabTitle">Title: Loading...</div>
<div id="tabURL">URL: Loading...</div>
</body>
And, I added new Listener to receive the popup dialog open event in the getHistory.js. This getHistory.js is a script of the popup.html.
Once you open the popup dialog, this script sends a message to the background.js to get the double-clicked tab information.
document.addEventListener("DOMContentLoaded", () => {
chrome.runtime.sendMessage({ action: "getDoubleClickedTabInfo" }, (response) => {
document.getElementById("tabTitle").textContent = `Title: ${response.title}`;
document.getElementById("tabURL").textContent = `URL: ${response.url}`;
});
});
The Complete manifest file is saved in the HistoryMark Repository folder.
5. How does it look??
Now, it is working beautifully. Every time you double click the tab page, it updates the title and URL inside the popup dialog!
Today I learned how to communicate the content script, background script and popup.html file’s script.
Journey of learning 
Leave a comment