Permanently change HTML element

Question

I'm browsing a website a few time a day, and one button is disabled, I have to manually enable it from developer menu / Element

<div class="actioning-buttons">
  <button class="action-button one-action-button" disabled="">Number 1</button> 
</div>

Can I automatically have this enabled for this database / website without having to do a manual edit all the time?

PS Im using Google Chrome for OSX

Answer 1

You can create a simple bookmarklet to achieve this. When you trigger the bookmark, your browser will run the code in the context of the current page. I know this isn't really automating the process but since you don't have a fixed URL for the page, this will probably have to do. It's definitely an improvement over opening your developer tools each time and manually editing the code.

Here's a bookmarklet that, when run, will look for all buttons with the classes action-button and one-action-button, then remove the disabled attribute.

javascript:Array.from(document.getElementsByClassName('action-button one-action-button')).forEach(function(v){v.removeAttribute("disabled");});

Just add a new bookmark, type the above code as is in the URL/location field and save it some place handy. Click on it each time you want to remove the disabled attribute.

Let me know if you need anything else!

Answer 2

That is the Job of a userscript manager.

A userscript manager does the task of injecting scripts defined by user to sites they visit automatically.

For Firefox, Greasemonkey is there and for Chrome, Tampermonkey is there

After you install the extension, do the steps

• Go to the site where you want it to work

• click on the icon and choose Create new script

• It will give a page like this

• Enter the script and save it.