How to commit part of html code on button click

i have this java-script code on my html page
but first let me explain the purpose of this code …
this script will fire when the F12 / developer tool on chrome is opened so it will keep resetting the console as long as the developer tool is opened ..
its working fine with no issue .. the only issue is that i want it to stop when user actually close the developer tool console.

to make this clear … replace this line

 $el('.info').innerHTML = 'Chrome Console is - ' + (opened ?  'opened' : 'Closed');

with this one

 $el('.info').innerHTML = 'Chrome Console is - ' + (opened ?  alert('f12 developer tool is opened') : 'Closed');

you will notice that it will keep alert the msg about developer tool is opened once the user open the f12 tool … now my concern is about the user closing the f12 .. the alert msg will keep going and going with none stop …

so i end up with the idea of committing part of the script when the f12 is closed .. so any idea how to commit part of html code when a user click on a button … or any idea how to resolve this issue ?

its working fine with no problem on chrom v69 and most versions ....

please help me

How to search for HTML element type using browser web dev tools?

I want the browser dev tools source code search to find every HTML element of a certain type on the page, let’s say

. I think the CSS selector for that is simply form, yet in DevTools search, form also returns every string containing “form” (e.g. “format”). How do I search for elements only?

Edit: To clarify, searching by IDs (#), classes (.), etc works fine. But I just want to search by element type.

Edit 2: Wow, I though dev tool search was doing ONLY CSS selector search, but it’s always doing both CSS & text search. Like I thought searching by . would only find elements with the class , but it also finds the text ".". Lesson learned.

implement Auth0 into chrome extension with one time use tokens

Im making a chrome extension where I want to create a security method for my chrome extension to stop it from getting shared without me in the process

I have an idea to generate a token somewhere (usually some backend, maybe server of the website that gets user registrations/payments my website which I am building with worpress), send token via email, get email+token in extension, make request to webserver to verify that they’re valid. This seems like a typical auth flow except the password is now the token, which is generated instead of set by the user. In other news, I have more ideas (Extension-side prng with shared seed, can check to see if token is within X generations for eg.)

I want to be able to sell tokens on my website which only allow one use to prevent the token from being shared.

I tried to setup the Auth0 for the chrome extension but I keep getting errors and the process doesnt lead to how I would want done.

is a great example of what I want to be able to do. Can anyone help me doing this? I am building my website in wordpress not hard coding it so Im not sure on How to do this exacly

If anyone can point me in a direction of what I am supposed to do or maybe provide some code that could help me?

I really appreciate the help Thank you <3

Can’t select element on a webpage even though it is present

I am trying to select an element on a table which is on a webpage. The inner text which is on the table is a name of a professor. I am using this line of code to grab the elements.

var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");

And yes it works with the tables on the main webpage and grabs the elements I need. However when i try going on a different course page to grab the elements of another table it does not work even though all the tables have the same format. Its as if the tables are invisible to the code and only grabs the ones on the main webpage.

However every so know and then it grabs all the elements I need on a different course page but on very rare occasions.

The last line on the code below is the element I am trying to grab.

COP 3514 001 Class Lecture
Wang, Jing

Someone mentioned that it may be an ajax driven site and thats why its not grabbing all the elements all the time. Ive even tried getting the xpath of that element but it is still not being found. Why is this element invisible to my code?

How hover on multiple elements but affect just one element in CSS

I have .tabCapture:hover and it self it work fine it put a box-shadow when I mouse over.

My problem is that over the .tabCapture element I have others elements like: tabFooter, tabIcon and tabDescription and when the mouse ran over those the box-shadow disappear.

I’d like to know how I could have the box-shadow even when the mouse is over tabFooter, tabIcon and tabDescription ?

enter image description here

querySelectorAll not selecting all the selected elements

I’m creating a chrome extension and one of my first steps is to create an array of college professor names that are in a table which is listed on a website. Here is the JS and it works perfectly on the main page. However when I go on to a course which list’s specific professor names, it wont work most of the time. It will still grab the professors that are in the main page all the time because it’s all in the same document. Every so often when i keep refreshing the page it randomly grabs all the professors but most of the time it will not. So it looks like my selectors are working but why does it not work every time?

var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");

Here is a snippet of the html on the main webpage (which is the same on all other course pages). The JS code above grabs the professor “Burgos” and lists it on to the log.

Here is a snippet of the html on a certain course webpage and the JS code doesn’t seem to grab the professor name(Wang, Jing) here.

CRN # Status Subject Course Section Instructor Day(s) & Location(s) Credits USF System Institution
88047 Enrolled MAC 2283 003
Burgos, Fernando

I’ve looked almost everywhere for a solution and cannot find anything.

Edit: I’ve even right clicked and copied the selector on the element I need and the JS will still not grab the find the element

Set default height in Chrome BrowserAction Popup

I use following code to open a chrome browser action popup. I have specified min-width & min-height to html & body element, but it doesn’t seem to work, as I can see a small white box when I click on icon & then my content & styles get applied. I am trying to set default dimensions so there shouldn’t be a small white box at first at all!

  popup: 'index.html',

In my css:

body {
  margin: 0;
  min-width: 200px;
  min-height: 300px;

Text String Processing from Inline JS

I have the following code that is pulling from inline JS on a webpage to pull the webID. This is being used for a Chrome extension that will display just the site’s webID when clicked:

// payload.js script --> insert into the current tab after the popout has loaded
window.addEventListener('load', function (evt) {
    chrome.extension.getBackgroundPage().chrome.tabs.executeScript(null, {
        file: 'payload.js'

chrome.runtime.onMessage.addListener(function (message) {
    document.getElementById('body').innerHTML = message;
    code: '(' + (() => {

    for (var el of document.querySelectorAll('script[if="inlineJs"]')) 

      var m = el.textContent.match(/"([^"]*webId*[^"]*)"/);
      var webid = m     
        if (webid) return webid[1];
        else {return document.getElementById('body').innerHTML = "This is not a CDK site";}     
  }) + ')()',

  }, results => {
  if (!chrome.runtime.lastError && results) {
    document.getElementById('body').textContent = decodeURI(results[0]);


Currently this returns the following:


I would like it to just return the ‘gmps-salvadore’. This would be used on multiple sites and the webID will change from site to site with differing prefixes from “lex” to “motp”. Is it possible to have the extension only pull the webID from various sites?

Jquery. executes in the Console but will not execute when loaded alongside the HTML

I am working on a chrome extension that will pull an identifier from the HTML into a var and that var is going to be used to fill in a form field.

I have tried to accomplish this with Js. but received the following error in the console:

“Uncaught TypeError: Cannot set property ‘value’ of null”


    someId = "some-thing-nice

    document.getElementById("searchInput").value = someId;
    var webID = (document.getElementById("searchInput").value = someId;

I ended up implementing jquery.

//this Id is polled from another piece of code and passed to the var someID
var someId = "some-thing-nice";
//sets the property with the id searchInput to the var above
//this code can be commented out. currSomeId was to be used to validate the copy
var currsomeId = $("#searchInput").val(someId);

  Chrome Extension


someID Extension

Some Text

The end game is to:

  1. populate the searchInput field
  2. then click searchBtn to be redirected to a url with information about someId

NOTE: oddly enough, the Js executes fine when I manually enter it into the browser console and when I entered it into the StackOverflow Code feature.
I just can not get the code to run when the page is loaded.

Website does not recognise form input modified with javascript

I am writing a chrome extension that extends a piece of software that I need to use for my work. I want to be able to copy all the form data from one page to another, but when I click save it immediately reverts to what it was before.

  if (e.shiftKey && ( e.which === 67 )) {
    var inputs = $("input[type|='text'], select");
    for(var i=0; i < inputs.length; i++)
      var id = $(inputs[i]).attr("id");
      var val = $(inputs[i]).val();

      if(id != undefined && id.indexOf("rmaAssetComponents") != -1)
        id = id.split("_")[7];

      writeCookie(id, val, 1);
  if (e.shiftKey && ( e.which === 86 )) {
    var inputs = $("input[type|='text'], select");
    for(var i=0; i < inputs.length; i++)
      var val = $(inputs[i]).val();
      var id = $(inputs[i]).attr("id");
      var searchId = id;

      if(id != undefined && id.indexOf("rmaAssetComponents") != -1)
        searchId = id.split("_")[7];

      if(val == '')

I know the code is spaghetti, please don't judge me too much. The gist is that I am storing the values of text inputs in cookies and then copying them using the .val() jquery function. Any help is appreciated.

So it seems that the only inputs that it messes up on are editable dropdown menues. Not sure why still.

CRN # Subject Course Section Component Instructor Day(s) & Location(s) Credits USF System Institution Parts of Term
80886 COP 3514 001 Class Lecture
Wang, Jing
MW 9:30am - 10:45am - CHE 103
3 Tampa Fall 2018 - Full Term