Custom javascript for website

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Custom JavaScript for websites — Chrome Extension

License

guzart/customjs

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Run custom JavaScript on any website. Use this tool to inject custom javascript in any website.

Your scripts are kept in the local storage and applied across domain URLs.

You can use jQuery 1.11.0 or 2.1.0 or your own external scripts.

• site debugging (wrong list sort, etc.)
• hiding annoyng popups and Ads
• anything you can think of 🙂

• Ace Editor (formating, highlight, undo/redo by hotkeys)
• Draft auto save (so doesn’t matter when you close the window without saving)
• Hosts (websites) switch (you can browse customjs of other websites)
• Include external script (eq. Underscore.js is cool)

About

Custom JavaScript for websites — Chrome Extension

Источник

How to Inject JavaScript Code to Manipulate Websites Automatically

Roberto Iriondo

As developers and users of the internet, we often come across websites that display many pop-ups, from subscription requests to paywalls, advertisements to notifications, and so on.

Many times, we use those websites daily for all kinds of things, and seeing those pop-ups over and over gets old!

Developers can get around these by going to the console and finding selectors to manipulate the website’s document object model (DOM) by adding or modifying CSS or JavaScript.

But now, thanks to Google Chrome and its extension store, anyone can inject code into any website automatically. We’ll go through to the process step by step in this small guide.

1. Installing the Extension to Inject the Code

The following only applies if you use Google Chrome. Install the extension custom JavaScript for websites. This small extension allows you to run JavaScript on any website automatically, and it saves the code for future visits in your web browser.

First, visit the website with annoying pop-ups that you use often. For this tutorial, I am using The Washington Post’s website:

2. Locating DOM Elements and Creating the Injection Code

Open your Chrome developer tools by pressing F12, then identify the element with the pop-up.

In this example, the iframe element with ID wallIframe contains the pop-up with some fading background in the back.

Now, we’ll be using a small JavaScript snippet to add custom CSS and check if we can hide the pop-up.

/* DOM Manipulation * If you want to update / add single style in DOM Element style attribute you can use this function: * inject javascript after page reloads. */ function setCssStyle(el, style, value) < var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" + style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")), idx; if (result) < idx = result.index + result[0].indexOf(result[1]); el.style.cssText = el.style.cssText.substring(0, idx) + style + ": " + value + ";" + el.style.cssText.substring(idx + result[1].length); >else < el.style.cssText += " " + style + ": " + value + ";"; >> var element = document.getElementById("wallIframe"); setCssStyle(element, "display","none !important");

As you can see, in the code above we are highlighting the element wallIframe and hiding it by adding inline CSS.

3. Testing the Injection Code

Test your code in the Chrome developers’ console to make sure that it works.

As you can see above, the code works.

Now it’s time to add it to the extension, custom JavaScript for websites, and test if the code will work on future visits. To add it, left-click on the extension icon on your address bar and add the custom snippet, then click save.

The page will immediately reload to try and test your added code.

4. The Injection Code Didn’t Work, What Now?

After testing it, the iframe didn’t disappear as it did when we tested it in the console. One of the reasons could be that the iframe loads after X seconds of the page loading.

We could dig in the network log to see if that’s the case. But for time-saving measures, we are going to try adding a timeout function to our original snippet to see if that helps.

setTimeout( function() < function setCssStyle(el, style, value) < var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" + style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")), idx; if (result) < idx = result.index + result[0].indexOf(result[1]); el.style.cssText = el.style.cssText.substring(0, idx) + style + ": " + value + ";" + el.style.cssText.substring(idx + result[1].length); >else < el.style.cssText += " " + style + ": " + value + ";"; >> var element = document.getElementById("wallIframe"); setCssStyle(element, "display", "none !important"); >, 10000);

Now the code waits 10 seconds before it executes, and voilà it works perfectly.

You can also add an event listener to wait for the page to load completely.

5. Final Thoughts

document.addEventListener("DOMContentLoaded", function() < // Your function goes here >

But, if we add the pop-up code after X seconds, the function above won’t work, so better stick to the timeout function.

You can also use the extension to add many other cool snippets, such as to block ads, block pop-ups, increase the standard font of the website, increase responsiveness, update its appearance, and so on. Once the JavaScript snippets are added, they will always run on future visits to those websites.

A special thanks to Abbey Rennemeyer from freeCodeCamp for editorial feedback in preparation of this article.

DISCLAIMER: The views expressed in this article are those of the author(s) and do not represent the views of Carnegie Mellon University, nor other companies (directly or indirectly) associated with the author(s). These writings are not intended to be final products, yet rather a reflection of current thinking, along with being a catalyst for discussion and improvement.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Run custom JavaScript on any website

License

xcv58/Custom-JavaScript-for-Websites-2

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Custom JavaScript for websites

Run custom JavaScript on any website. Use this tool to inject custom javascript in any website.

Your scripts are kept in the local storage and applied across domain URLs.

You can use jQuery 1.11.x or 2.1.x or your own external scripts.

• site debugging (wrong list sort, etc.)
• hiding annoyng popups and Ads
• custom UI
• anything you can think of 🙂

• Ace Editor (formating, highlight, undo/redo by hotkeys)
• Draft auto save (so doesn’t matter when you close the window without saving)
• Hosts (websites) switch (you can browse customjs of other websites)
• Include external script (eq. Underscore.js is cool)

You can find base.js at extension/lib/base.js . It provides useful functions for you. You can directly use all functions in your JavaScript code. To avoid name conflict, all functions start with customjs .

Now there’re only one function:

customjsReady('.nav', function(element)  // do something >);

The customjsReady wiil be called when an element matching the selector is added to the DOM. You can find more details from: http://ryanmorr.com/using-mutation-observers-to-watch-for-element-availability/

How do I inject large JavaScript

You can host the JS code in public accessible url and dynamically load and eval it. A sample implementation like this:

customjsReady('body', function(element) < fetch('https://gist.githubusercontent.com/xcv58/5aaeda690ace2f468d51dbf9c65a3980/raw/a8b1c59223892fb2be08490b00c84fa4a029bb8e/test.js') .then((res) =>res.text()) .then((js) => < console.log('works in fetch', js) eval(js); >) >); 

Why Custom JavaScript for Websites 2

Since the author haven’t update original extension for almost one year. Its website http://hromadadan.com is also unavailable. I can not find the author.

But the sync feature is urgent. So this repos is here.

Источник