How to Create a Chrome Extension – JavaScript Tutorial



In this video I convert a simple JavaScript script that I have been running from Snippets and the Console into an Extension that allows me to right click on the page and insert data into a field.

Previous video in this series:

JavaScript Tutorial Creating a CounterString tool in Chrome Browser Dev Tools Snippets

You will learn:

– how to convert existing javascript code into a Chrome Extension
– the basic structure of an extension, manifest.json, background script and content scripts
– permissions in extensions: contextMenus, activeTab
– how to create context menus for extensions
– how to change where context menus are displayed: contexts, editable
– why to use a persistent background script
– how to dynamically inject content scripts into a page using executescript
– how to use listeners with context menus

The source code is on github:

https://github.com/eviltester/counterstringjs


You can support me on Patreon https://patreon.com/eviltester (watch my videos ad free and receive extra content)

Find my online books and training (some are free) at:

– https://compendiumdev.co.uk
– http://eviltester.com

Original source

11 thoughts on “How to Create a Chrome Extension – JavaScript Tutorial

Leave a Reply