I am trying to create my first chrome extension that opens up the dev tool via icon click of the extension.
I am trying to simulate the keypress normally required to open the dev tools in chorme mac(Command+Option+i), I tried to first just simulate the ( Enter ) key to test if the code works meaning when I click the chrome extension ICON it simulates the enter key being pressed, but no luck
attached are my 3 files that make the extension.. manifest.js ,background.js content-script.js
Manifest.js
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": [ "activeTab", "scripting","storage"],
"action": {
"default_title":"Click to open dev tools",
"default_icon": {
"16": "/images/i.png",
"32": "/images/i.png",
"48": "/images/i.png",
"128": "/images/i.png"
}
},
"icons": {
"16": "/images/i.png",
"32": "/images/i.png",
"48": "/images/i.png",
"128": "/images/i.png"
}
}
background.js
//// background.js ////
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['content-script.js']
});
});
Content-script.js
//// content-script.js ////
// document.body.style.backgroundColor = '#6C8CA8';
let keyEvent = new KeyboardEvent('keypresc', {key: 'Enter'});
document.window.dispatchEvent(keyEvent);
// alert( "key pressed");
I tried to first get the script injection working when I click the icon to execute the content-script.js after some time and trial It managed to work. I used changed background color to experiment with that.
Next, I tried to create a keyevent that simulates pressing the "Enter" key I would go to the URL bar and type a website hover over it and press click the icon that should've simulated the enter key but did not work.
I added an alert to make sure that the javascript was executing and it showed me that it is, but my actual code to simulate "enter" is wrong.