Geek Answers Handbook

When DOM object crashes with jQuery in script content

I have a button on google page. DOM Inspector gives its identifier. However, an attempt to retrieve the object fails. I get undefined result when binding to write its class name in the console. There is only one iframe per page, and my object is not inside it (as far as I know).

manifest.json:

{ "manifest_version": 2, "name": "modify strings", "description": "modify strings in bulk", "version": "1.0", "permissions": [ "tabs", "history", "http://*/*", "https://*/*" ], "content_scripts": [ { "matches": ["https://play.google.com/apps/*"], "js": ["jquery-1.11.1.min.js", "myInject.js"], "all_frames": true } ], "web_accessible_resources": [ "script.js", "jquery-1.11.1.min.js" ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" } }

myInject.js (contents of script):

 var buttonJGET = jQuery("gwt-uid-115", document); console.log(buttonJGET.className);
0
source share
1 answer

jQuery uses a CSS-like selector .

To select an item by its identifier , you need to use #. In addition, jQuery always returns an array of results, even if it is unique.

 var buttonJGET = jQuery("#gwt-uid-115")[0];

JQuery elements are different from DOM elements; they do not have a className attribute. To get it, you can use, for example:

 console.log(buttonJGET.attr('class'));

There are also other functions for handling element classes .

Otherwise, you can extract the DOM element from the jQuery element :

 var buttonJGET = jQuery("#gwt-uid-115").get(0); console.log(buttonJGET.className);

If the code still does not work, this may be due to the fact that the script is currently running, there is no element with this identifier (for now). To achieve “run my code every time this element is added ”, you can use DOM mutation observers (canonical answer here ):

 // Runs a function for every added DOM element that matches a filter // filter -- either function(DOM_node){/*...*/}, returns true or false // OR a jQuery selector // callback -- function(DOM_node){/*...*/} function watchNodes(filter, callback){ var observer = new MutationObserver( function (mutations) { mutations.forEach( function (mutation){ if(typeof filter === "function"){ $(mutation.addedNodes).filter( function(i){ return filter(this); } ).each( function(i){ callback(this); } ); } else { $(mutation.addedNodes).filter(filter).each( function(i){ callback(this); } ); } }); }); // For every added element, a mutation will be processed // with mutation.taget == parent // and mutation.addedNodes containing the added element observer.observe(document, { subtree: true, childList: true }); return observer; }

To use (note, filter and callback use DOM elements):

 function logger(node) { console.log(node.className); } var observer = watchNodes("#gwt-uid-115", logger);

Or, if, for example, you want to catch all the nodes whose identifier begins with gwt-uid , you can write your own filter:

 function filter(node) { if(node.id && node.id.match(/^gwt-uid/)) return true; else return false; } var observer2 = watchNodes(filter, logger);

Entering this value in run_at: "document_start" will capture all added elements.

To stop monitoring, call observer.disconnect() on the returned observer object.

+2
source

More articles:


All Articles