Step 1: Create a Folder
Create a new folder on your computer and name it
something like SearchAndViewExtension.
Step 2: Create the Configuration File (manifest.json)
Inside that folder, create a file named manifest.json and paste the following code. This
tells Chrome to register a background service worker and requests permission to
run scripts:
json
{
"manifest_version": 3,
"name": "Run Snippet from
Right Click",
"version": "1.0",
"permissions": [
"contextMenus",
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
}
}
Use code with caution.
Step 3: Create the Background Script (background.js)
Inside the same folder, create a file named background.js. This script creates the actual
right-click menu item and injects your click automation automation script into
the page when clicked:
javascript
// 1. Create
the right-click menu item when the extension installs
chrome.runtime.onInstalled.addListener(()
=> {
chrome.contextMenus.create({
id: "runSearchAndViewAutomation",
title: "Run Search & View
Automation",
contexts: ["all"] // Makes it
appear on any right-click
});
});
// 2. Listen
for clicks on your custom menu item
chrome.contextMenus.onClicked.addListener((info,
tab) => {
if (info.menuItemId === "runSearchAndViewAutomation")
{
// Inject and execute your snippet script
directly onto the active tab
chrome.scripting.executeScript({
target: { tabId: tab.id },
func: automatedSearchAndView
});
}
});
// 3. Your core
snippet script wrapped in a function
async function automatedSearchAndView()
{
const searchButton = document.querySelector('#search-btn-id');
// <-- Change selector as needed
if (!searchButton) {
console.error("Automation Stopped:
Search button not found.");
return;
}
searchButton.click();
console.log("Search button clicked.
Monitoring DOM for the anchor tag...");
const waitForElement = (selector, timeout = 5000)
=> {
return new Promise((resolve, reject) =>
{
const startTime = Date.now();
const interval = setInterval(() => {
const element =
document.querySelector(selector);
if (element) {
clearInterval(interval);
resolve(element);
} else if (Date.now() - startTime >
timeout) {
clearInterval(interval);
reject(new Error(`Automation Timeout:
Link "${selector}" not found.`));
}
}, 100);
});
};
try {
const viewAnchor = await waitForElement('a.your-class-name');
// <-- Change selector as needed
if (viewAnchor.href &&
viewAnchor.href !== '#' && !viewAnchor.href.startsWith('javascript:'))
{
window.location.href = viewAnchor.href;
} else {
viewAnchor.click();
}
} catch (error) {
console.error(error.message);
}
}
Use code with caution.
Step 4: Load it into Google Chrome
1. Open Chrome and
navigate to chrome://extensions/
2. Turn ON
the toggle switch for Developer mode in the top-right corner.
3. Click the Load
unpacked button in the top-left corner.
4. Select the SearchAndViewExtension folder you
created.
