How To Edit Webpage’s Text (Shorten The Trick Without The Browser Console)
Reduce the steps to edit the text on a web page without so much code. Easy Guide.
After writing the post on essential shortcuts to use in the web browser, I was left with the thorn of looking for an easier way to edit a web page’s text. I was looking to skip the step of opening the browser console and writing the JavaScript code.
In short, this post will be for those who want to shorten the path to achieve the same goal. You can continue using what I mentioned in the post I refer to above for those who do not.
It should be noted that the code will work for browsers that have Chromium as their base, for example, Google’s Chrome and Microsoft’s Edge. Even Mozilla’s Firefox.
The code that we will use here will complement what is exposed in the post, where I show the trick to edit text on a web page (check the post above).
I started to investigate; how can I have this same functionality but faster? I found two ways to achieve it. One, create an extension for the Chrome browser that runs the functionality. Two, create an item in favorites or bookmarks and place it in a place for quick access.
With a programmer soul, I investigated the option to develop an extension in Chrome. I read the documentation that Google provided to make these types of applications. The overview was relatively “short.” I did not find as much documentation for the development of extensions, but the ones that exist are well written.
What put me off creating an extension was managing it in the Chrome Web Store. I was not thrilled. Also, I wondered, how do I get the same functionality without spending so much time programming it? Voilà! Then I got to the second way and the one that I bring you here.
Adding an item to favorites is very quick to accomplish; using it when browsing a web page is much easier.
Let’s find out what the fuss is about.
First step. Open any web page. Add it to your favorites or your bookmarks. There may be variation when naming it. But you have to press the star that is located to the right of the browser’s address bar. Knowing what the address bar is should not be a problem at this point, but to help a bit, check out the screenshot below. The browser I used is Chrome.
Before giving to save or ready, select “bookmarks bar” or “favorites bar” in the field that asks the folder to save it, this will allow you to see the marker at the top of the window when you activate the marker bar.
Now that we have our bookmark saved, we need to have the browser window’s bookmarks bar visible. To achieve this in Chrome, Edge, and Firefox, press the keys:
Ctrl + Shift + B
Now comes the magic!
Position your cursor over the bookmark you saved; press the right click of your mouse or touchpad; select the option “edit” or “properties” from the menu that appears. A new window will be generated that will have two fields that matter for this post. The name of the bookmark and the path or folder where it was saved.
Edit the “name” field with one that is consistent with the functionality, for example, “Edit Page.”
In the box corresponding to the favorite location, replace the content with the following JavaScript code and save it.
When you enter any web page, you can edit it by clicking on the bookmark you set. You have finished setting up your new tool.
Use this browser feature wisely. Do not do absurd things. Also, don’t think that this will allow you to penetrate a web application.
By the way, this trick will not benefit you if you try to use it to increase views or reads on your Medium dashboard. Do not think that magic is so much. Changes made will disappear when you refresh the page.
It would be useful to combine the editing trick created here and the shortcut to make the web pages’ screenshots.
Please take advantage of it, Greetings.
