• Tuesday , 31 March 2020

How to Create a Chrome Extension – JavaScript Tutorial

Code Canyon



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

3d Ocean

Related Posts

11 Comments

  1. Ihor Andreienko
    January 30, 2020 at 17:12

    very helpful.

  2. Julian Ocampo
    January 30, 2020 at 17:12

    Do you know how open the extension for google Chrome, automatically?

  3. Adrik Ivanov
    January 30, 2020 at 17:12

    Thank you.

  4. Fredrik Norling
    January 30, 2020 at 17:12

    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!

  5. Nima Dema
    January 30, 2020 at 17:12

    thanks for the explanation…But how can we know that current tabs is playing some audio or video in chrome extension.

  6. GoeHybrid
    January 30, 2020 at 17:12

    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.

  7. Nicolas Morin
    January 30, 2020 at 17:12

    Not that clear..can you do another video in which you can explain in more detail this Chrome extension javascript stuff..thanks in advance

  8. Sclunger
    January 30, 2020 at 17:12

    Thank you

  9. Michael Pumo
    January 30, 2020 at 17:12

    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.

  10. Adrian Meza
    January 30, 2020 at 17:12

    example to refresh a chrome tab with php and JavaScript?

  11. ForkTrader
    January 30, 2020 at 17:12

    what futher reading on this matter? it seems programming chrome apps book were outdated.

Leave A Comment

You must be logged in to post a comment.