SEO Functions for Chrome Developer Tools

=> Quick link to code: Github repo here.

What if you could run functions Chrome’s Developer Console to run page checks, copy links, and run multiple tests through opening background tabs?

It’s possible and in fact, there’s a lot more opportunity for smarter functions.

At a glance, this is what the current interface looks like:

Why even bother when we have extensions?

While Chrome Extensions are handy, they can drastically slow down your browser and you really don’t know what they’re doing behind the scenes. Having open source code you can manipulate and only run when you want will give you flexibility to create your own functions.

How to install in under 2 minutes

This console tool is only possible because of (the incredible) Chrome and a clever add-on called TamperMonkey.

1 – Install TamperMonkey extension for Chrome (official instructions for TamperMonkey)

2 – Go to the Dashboard from the extension menu

3 – Install a new user script by clicking on the + icon

4 – Copy the code from my Github repository and paste it into the new userscript, then save it.

5 – All done. In the extension menu, you can turn the script on or off easily.

Usage

By default, I inject a CSS file that colors nofollow links.

You can change this to whatever you want, that’s the whole point of doing this 😉

//add your custom css in the css variable below. for example, you can add specific styling for any element here
seo.addCss = ()=>{
 let css = a[rel~=nofollow] { text-decoration: underline wavy red !important; }
 let head = document.head || document.getElementsByTagName('head')[0]
 let seoScriptStyle = document.createElement('style');
 seoScriptStyle.setAttribute("id", "seoScriptsMainCss");
 head.appendChild(seoScriptStyle);
 seoScriptStyle.type = 'text/css';
 seoScriptStyle.appendChild(document.createTextNode(css));
}

You’ll also notice a little button that appears in the bottom right of your page that says CSS ON/OFF. This quickly toggles the CSS you’ve injected. By default, this means that you’ll toggle the nofollow styling.

If you want to hide the button, just right click on it! If you never want to see this button, just remove line 233 in the code:

_privateseo.createDiv();

When the script is running, you can step into the dev console and you’ll see the initial welcome message which details all of the current functions. You’ll probably want to keep the filter to “user messages” by default because there are lots of sites that like to log things to the console and of course, there will be errors.

If you clear the initial message, don’t worry, just use the following function to bring it back:

Please pay attention to the instructions for each function. For example. seo.getAllLinks() will output to the console AND automatically copy the output to your OS clipboard for easy pasting.

Future development and contributing

This was a proof of concept project for my TTT Live presentation on May 16th 2020. It works but it can be vastly improved.

I still have to figure out if I can access HTTP requests properly and that way, I can completely eliminate all of my current Chrome extensions, which is my personal goal with this project.

Contributions as pull requests on Github are welcomed and encouraged.

That’s it! Have fun with it and let me know if you have questions on Twitter (@dsottimano)

Table of Contents

Recent Posts Categories Newsletter

Scroll to Top