Use JavaScript to hack the web

JavaScript has many uses today that you can use in different cases, in this article we will talk about another application of JavaScript

Lack of online resources for learning JavaScript, including various courses and educational articles, can cause problems for you. In this article, you do not need any special knowledge to read it and you do not need to have your own application, we will teach you how you can use the JavaScript programming language to hack the web. We hope you find this article useful and that you can get the information you need.

The power of the bookmarklet  

We all know how useful bookmarks are in JavaScript. They allow you to save a page entry link, categorize it, and add additional data (metadata) to them so that you can easily navigate through them based on different features. Search. One of the most important things that people do not know about is that they can easily store their code in it, which puts it in the text of your website page and allows access to its structure and design appearance. .

If you open the Facebook console, you will see that its developers are very opposed to its structure, which has good reasons for doing so. You can easily change their codes without even having access to their codes.

A very important point about this However, you may have forgotten what you typed or part of the text. If you're like me, the process of saving the files you open, copying them, going to different websites, opening the console, pasting information, and running programs can be tedious for you. Here I have written the code that is used for long-term review of a web page in different sizes that you can use in Edge, Firefox, Chromium and any mobile page:

  1. javascript:alert(document.body.scrollHeight / window.innerHeight)  

If I know how long a page is, can I decide whether to read it or not? I'm actually using this code to show users how long a website looks on phones of different sizes.  

Here is another tool to help you remove all margins and images from developer blog posts to see only the important points (In addition, this tool will mark them he does).

  1. javascript:(function(){ []'img, .gist')).forEach(function(elem) { elem.remove(); }); })()  

You have probably noticed by now that most of this code is not complicated. In fact, many of them are quite simple. Since many of these codes are for my personal use, I have designed them in a simple way.

Constant changes on the web when using plugins Many of us who are not web designers are not interested in having problems with different browsers. In addition, we do not want our links to be cluttered with different parts of JavaScript. To put it more bluntly, I'm not advising you to write your own plugins, but rather using the ones that are available to enhance your web experience.

An important issue When I first started using Reddit and Imgur, I realized that editing their gallery was very difficult. I could have stopped myself from using these tools, but then I would have had to find another free service to upload my own pictures and videos. In addition, I could not scroll through my data when I returned to Imgur. The solution I had to solve this problem was to check the console so that I could get what I wanted from their service.

After about 5 minutes I noticed big and small differences between large and small images. I needed small pictures to be able to see well what I picked up and left somewhere.

The solution to this problem in JavaScript (Part 1) The code snippet I came up with to solve this problem in my JavaScript was very simple, with only seven lines. Note, of course, that the point was not to write the shortest code or the cleanest code, but I tried to do it in the simplest way.

  1. (function(jQuery) {  
  3.     jQuery('.sortable-image img, .sortable-image').css({width:'auto',height:'auto'})  
  5.     jQuery('.sortable-image img').each( function(e,elem) {  
  7.         var fixedImg = jQuery(this).attr('src').replace('s.png','.png');  
  9.         jQuery(this).attr( 'src', fixedImg );  
  11.     });  
  13. })(jQuery);  

In this code, I first removed the length and width of the web page, then placed a loop on each customizable file that partially changes its file name. This is definitely not the cleanest code possible and depends heavily on the DOM structure of the program, which uses jQuery libraries, but the main idea here is to get what we need. Bring so we can continue. It was much easier than sending an email to the dev team and sharing my experience with them.

The solution to this problem in JavaScript (Part II)

I used a plugin for this that as far as I know is not available to you in open source (although you can access this code if you can find the Chromium user-profile folder). Using this plugin allows you to do what you want. Additionally, you can use it in JavaScript to implement rules for your script that run on a specific URL or URL template.

Note that Imgur no longer uses that DOM, so the code we wrote in the previous section no longer works. This is true and will remain true for most of the code you publish this way.

Write plugins in JavaScript

The last thing I want to talk about in this JavaScript article is how to write your own JavaScript plugins. I'm going to focus more on Chromium extensions because I have more expertise and experience in this area. However, you can find other tutorials that focus on Firefox and other browsers.

In addition, you may want to do more ambitious things, such as adding keyboard shortcuts to all pages that have been linked before or will be linked later. You can easily do this by writing your own plugins in JavaScript.

To do this you first need a folder to put your files in:

  1. mkdir -p ~/projects/addon-name  

Once you have created a place to put your files, you can open your favorite editor and use it to create two files. manifest.json and content.js are the two files that are the second file for the JavaScript plugin, which is actually a naming rule that I use for content-based JavaScript.  

Manifest.json file  

The code we work with in this section is the most important part of Chromium extensions. This code actually shows when and how this plugin works. Creating these items professionally is out of the question in this article, just like building a plugin in Firefox. You can refer to the document on the official Chromium website for more information.

  1. "manifest_version": 2, "name""Whatever you want to call the plugin""description""A brief description of what the plugin does. I prefer the GNU philosophy of do one thing well""version""2.0""content_scripts": [ { "matches": [ "*://*/*" ], "js": [ "content.js" ], "run_at""document_end" } ] }  

This code simply tells the browser to run content.js on all your web pages (http :, https: etc.) after reading each web page.

Familiarity with the Content.js file in JavaScript  

The code you put in content.js is actually the same code you put in the attributes of your website. 

To browse my gallery, I use a code snippet from a friend used in an old software called Album Express.

  1. document.addEventListener('keyup'function(k) { switch(k.code) { case "ArrowRight": document.querySelector('.nav.controls').click(); breakcase "ArrowUp": document.querySelector('.nav.controls .link.up').click(); breakcase "ArrowLeft": document.querySelector('.nav.controls .link.prev').click(); // window.history.back(); // The software Barry uses actually doesn't think to generate "prev" links, so we have to be creative break; default: console.log("Key Pressed:", k); } });  

Enter the chrome: // extensions / section in your Chrome browser:  

Enter the folder where you saved your manifest.json plugins and then click open.


I hope you enjoyed reading this article and that it has helped you to use your software code without changing it for different people. If you are new to JavaScript, it is time to dump her and move on.  

In addition, if you create new applications, you can share it with us. In fact, you can improve your ideas much faster when you start helping others and sharing your ideas. If you have written a script that you would like to share, you can send it to us.

Java Script

JavaScript Plugins in JavaScript Learn JavaScript JavaScript Programming Language Bookmarks in JavaScript
You must be logged in to post a comment