Bookmarklets are an incredibly powerful tool. They are simply anonymous JavaScript functions which execute immediately prefixed with “javascript”: and this tutorial shows you how to create them and use them.
In the example I convert a list of urls listed on a page into clickable links. You’ll see:
– inspect the DOM with Chrome developer tools
– writing JavaScript to find an element with tag
– JavaScript for loop
– using Chrome snippets to write and run code
– amending the DOM using innerHTML
– using a simple bookmarklet creation tool http://compendiumdev.co.uk/apps/eviltester/bookmarklets.html
This video has a related Blog post:
http://blog.eviltester.com/2017/05/javascript-bookmarklets-example.html
*************
► Subscribe to My Channel For more videos like this http://www.youtube.com/subscription_center?add_user=EvilTesterVideos
*************
►► Contact Details:
Read my writing and blogs at:
✓ http://www.eviltester.com
✓ http://www.seleniumsimplified.com
✓ http://www.javafortesters.com
✓ http://www.compendiumdev.co.uk
Follow me on social media:
★ https://uk.linkedin.com/in/eviltester
★ https://twitter.com/eviltester – @eviltester
★ https://www.instagram.com/eviltester/
★ https://uk.pinterest.com/eviltester/
★ https://www.facebook.com/eviltester
*************
►► Read my books
http://compendiumdev.co.uk/page/books
★ “Dear Evil Tester” – explore the tester’s mind
★ “Java For Testers” – learn to code in Java
★ “Automating and Testing a REST API – a case study”
*************
►►Learn skills from my online training courses
http://www.compendiumdev.co.uk/page/online_training
★ Selenium WebDriver With Java
★ Technical Web Testing 101
★ Evil Tester Talks Technical Testing
★ Case Study: Java Desktop Application Technical Training
*************
Original source
2 responses to “JavaScript Bookmarklets Tutorial – How to create bookmarklet, amend DOM to add HTML links to page”
Thanks! Would this still work if the website has a Content Security Policy?
https://www.troyhunt.com/introducing-you-to-browser-security/
Thanks for sharing! Would love to see you do more JS videos. My initial quick thought for the loop was to start at index 5, then while it's less than the array's length, run the code and increase the counter by 3. =)