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 responses to “How to Create a Chrome Extension – JavaScript Tutorial”
very helpful.
Do you know how open the extension for google Chrome, automatically?
Thank you.
i've watched countless videos like this and i must say i love your product! Dont listen to the negative feedback, this is a perfect tutorial on the subject at hand. Might need a little background to understand but everything dosn't need to be SUPER beginner friendly. +1 from me!
thanks for the explanation…But how can we know that current tabs is playing some audio or video in chrome extension.
Just a heads up, the chrome web extension documentation is horribly structured. It's good, but by the time you find exactly what you needed, you probably quit programming.
Not that clear..can you do another video in which you can explain in more detail this Chrome extension javascript stuff..thanks in advance
Thank you
Thank you for the video but in future can you please make your code type size larger so we can watch on mobile/ tablet devices too? I can barely make anything out.
example to refresh a chrome tab with php and JavaScript?
what futher reading on this matter? it seems programming chrome apps book were outdated.