This Chrome extension is trying to allow users to assign a keystroke to a specific element on a web page, and then use that keystroke to click on the element when the user presses that key combination.
The popup window has a "Start" button that the user can click to start listening for clicks and keystrokes, and a "Save" button that the user can click to save the keystroke assignment. The user selects the element they want to assign the keystroke to by clicking on it, and then presses a key to assign the keystroke.
The background script stores the mapping between keystrokes and elements in Chrome storage and listens for messages from the popup window to reload the key map when necessary. The content script listens for messages from the background script and executes the click event on the specified element when the user presses the assigned key combination.
manifest.json:
{
"name": "Button Clicker",
"description": "Clicker",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "chrome.png",
"32": "chrome.png",
"64": "chrome.png",
"128": "chrome.png"
},
"action": {
"default_popup": "popup.html"
},
"permissions": ["scripting", "activeTab"]
}
popup.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Key Clicks</title>
<link rel="stylesheet" type="text/css" href="popup.css"/>
</head>
<body>
<h1>Button Clicker</h1>
<p>Select a button or function on the current page and press a key to assign it:</p>
<button id="grabBtn">Start</button>
<button id="assignKeyBtn">Assign</button>
<p id="selectedElement"></p>
<p>Press a key to assign:</p>
<p id="assignedKey"></p>
<button id="saveBtn">Save</button>
<script src="popup.js"></script>
</body>
</html>
popup.js:
let assignedKeyElement = document.getElementById("assignedKey");
let grabBtn = document.getElementById("grabBtn");
let assignKeyBtn = document.getElementById("assignKeyBtn");
let assignedKey;
let selectedElement;
function startListening() {
document.addEventListener("click", function(event) {
let target = event.target;
if (!target.closest(".myExtensionClass")) {
console.log("Clicked element:", target);
selectedElement = target;
event.preventDefault();
}
}, {capture: true});
document.addEventListener("keydown", function(event) {
assignedKey = event.key;
assignedKeyElement.innerHTML = assignedKey;
});
}
grabBtn.addEventListener("click", function() {
console.log("Start button clicked");
startListening();
});
assignKeyBtn.addEventListener("click", function() {
console.log("Selected element:", selectedElement);
if (selectedElement) {
let keyMap = {};
keyMap[assignedKey] = selectedElement.outerHTML;
chrome.storage.sync.set({keyMap: keyMap}, function() {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
} else {
console.log("Key mapping saved");
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.runtime.sendMessage({command: "reloadKeyMap"});
});
}
});
} else {
console.log("No element selected");
}
});
background.js:
let keyMap = {};
function reloadKeyMap() {
if (chrome.storage) {
chrome.storage.sync.get("keyMap", function(result) {
keyMap = result.keyMap || {};
});
}
}
reloadKeyMap();
function executeClickEvent(command) {
if (keyMap[command]) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
function: function() {
let element = document.createElement("div");
element.innerHTML = keyMap[command];
let target = element.firstChild;
while (target && target.nodeType !== Node.ELEMENT_NODE) {
target = target.nextSibling;
}
if (target) {
target.click();
}
}
});
});
}
}
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.keyMap) {
keyMap = request.keyMap;
}
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.command) {
executeClickEvent(request.command);
}
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.command === "reloadKeyMap") {
reloadKeyMap();
}
});
My problems:
1.The extension is not properly detecting and capturing elements on the webpage that the user wants to assign a keystroke to.
2.The extension is not saving the key mapping properly, so that when the user presses the assigned keystroke, it doesn't trigger the associated action.
3.The extension is not functioning properly on all webpages, and may have issues with certain types of websites or elements.
4.There may be other bugs or issues with the code that are preventing it from working properly or causing unexpected behavior.
