Awesome Extension Snippets by Awesome Plugins
Welcome to Awesome Extension Snippets, a collection of useful code snippets designed to speed up your development process for Chrome Extensions. Each snippet can be easily triggered within your code editor to help you work faster and more efficiently.
Available Snippets
1. getLocalStorage
- Prefix:
AES_getLocalStorage
- Description: Get Extension local storage
- Body:
chrome.storage.local.get(null, (data) => {
if (data) {
${0}
}
});
2. setLocalStorage
- Prefix:
AES_setLocalStorage
- Description: Get Extension local storage
- Body:
chrome.storage.local.set({ ${1:name} : ${0:value} });
3. get current tab
- Prefix:
AES_getActiveTab
- Description: Get Active Tab
- Body:
chrome.tabs.query(
{ active: true, lastFocusedWindow: true },
([tab]: chrome.tabs.Tab) => {
console.log(tab);
}
);
4. Message received
- Prefix:
AES_receivemessage
- Description: Message listener
- Body:
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
switch (message.action) {
case 'test':
break;
default:
sendResponse('invalid command');
break;
}
return true;
})
5. Send Message
- Prefix:
AES_sendmessage
- Description: Message Sender
- Body:
chrome.runtime.sendMessage({ action: ${1:action}, ${2:message} : ${0:value} });
6. Open new Tab Function
- Prefix:
AES_openTabFunction
- Description: Function to open a new tab using chrome.tabs.create
- Body:
function openTab(options = {}) {
return new Promise(async (resolve) => {
try {
let tab: chrome.tabs.Tab = await chrome.tabs.create(options);
return resolve(tab);
} catch (error) {
console.log(error);
}
});
}
7. Close Tab Function
- Prefix:
AES_closeTabFunction
- Description: Function to close a tab using chrome.tabs.remove
- Body:
function closeTab(tabId) {
return new Promise(async (resolve) => {
try {
await chrome.tabs.remove(tabId);
return resolve(true);
} catch (error) {
console.log(error);
if (String(error).includes('No tab with id')) {
return resolve(false);
}
}
});
}
8. Execute script
- Prefix:
AES_executescript
- Description: execute Script
- Body:
chrome.scripting.executeScript(
{target: {
tabId: tab.id }, // tab idfunc: x, // function name},
(results) => {
let result = results[0].result;
console.log('script execution result', result);
});
9. query selector
- Prefix:
AES_sel
- Description: Element Selector
- Body:
let ${1:name} = document.querySelector$2(`${0:value}`);
10. Get Element By XPath Function
- Prefix:
AES_getElementByXpathFunction
- Description: Function to get an element by its XPath
- Body:
function getElementByXpath(path) {
// prettier-ignore
let result = document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
let node = result.singleNodeValue;
return node;
}
11. Get All Elements By XPath Function
- Prefix:
AES_getAllElementsByXpathFunction
- Description: Function to get all elements by XPath
- Body:
function getAllElementsByXpath(path) {
let elements = [];
// prettier-ignore
let nodes = document.evaluate(path, document, null, XPathResult.ANY_TYPE, null);
let currentNode = nodes.iterateNext();
while (currentNode) {
elements.push(currentNode);
currentNode = nodes.iterateNext();
}
return elements;
}
12. Get XPath By Element Function
- Prefix:
AES_getXPathByElementFunction
- Description: Function to get XPath by element
- Body:
function getXPathByElement(element: HTMLElement | any) {
if (!element) return null;
if (element.id) {
return `//*[@id='${element.id}']`;
} else if (element.tagName === `BODY`) {
return `/html/body`;
} else {
const sameTagSiblings = Array.from(element?.parentNode?.childNodes).filter(
(e: any) => e?.nodeName === element?.nodeName
);
const idx = sameTagSiblings?.indexOf(element);
return (
getXPathByElement(element?.parentNode) +
`/` +
element?.tagName?.toLowerCase() +
(sameTagSiblings?.length > 1 ? `[${idx + 1}]` : '')
);
}
}
13. Get Element By Text XPath Function
- Prefix:
AES_getElementByTextXpathFunction
- Description: Function to get an element by its text content and tag name using XPath
- Body:
function getElementByTextXpath(elementName, text) {
// prettier-ignore
let result = document.evaluate(`//${elementName}[contains(text(), "${text}")]`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
let node = result.singleNodeValue;
return node;
}
14. Click With Debugger API Function
- Prefix:
AES_clickWithDebuggerAPIFunction
- Description: Function to simulate a mouse click using the Chrome Debugger API
- Body:
async function clickWithDebuggerAPI(tabId, x, y, sendResponse) {
//let rects = btn.getClientRects()[0];
//chrome.runtime.sendMessage({ action: 'click', x: rects.x, y: rects.y }, async () => {});
chrome.debugger.attach({ tabId: tabId }, '1.2', function () {
chrome.debugger.sendCommand(
{ tabId: tabId },
'Input.dispatchMouseEvent',
{ type: 'mousePressed', x: x, y: y, button: 'left', clickCount: 1 },
() => {
chrome.debugger.sendCommand(
{ tabId: tabId },
'Input.dispatchMouseEvent',
{ type: 'mouseReleased', x: x, y: y, button: 'left', clickCount: 1 },
() => {
chrome.debugger.detach({ tabId: tabId });
sendResponse({ okay: true });
}
);
}
);
});
}
15. Print to console
- Prefix:
AES_cl
- Description: Log output to console
- Body:
console.log($0)
16. Ignore Prettier
- Prefix:
AES_ign
- Description: Ignore Prettier
- Body:
// prettier-ignore
17. className with braces
- Prefix:
AES_className {}
- Description: Insert className with braces
- Body:
className={"$1"}
18. className with CLSX
- Prefix:
AES_className clsx
- Description: Insert className with braces
- Body:
className={clsx("$1")}