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

• getLocalStorage
• setLocalStorage
• get current tab
• Message received
• Send Message
• Open new Tab Function
• Close Tab Function
• Execute script
• query selector
• Get Element By XPath Function
• Get All Elements By XPath Function
• Get XPath By Element Function
• Get Element By Text XPath Function
• Click With Debugger API Function
• Print to console
• Ignore Prettier
• className with braces
• className with CLSX

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")}