I'm attempting to make my first ever chrome extension and I want to access the "Compose" button on Gmail via my content.js. I located the div that I want to use by inspecting the page, but I'm not sure how I can access it with Javascript since it's really deeply nested and doesn't have an ID attribute. I tried using document.querySelectorAll(".T-I.J-J5-Ji.T-I-KE.L3") and document.getElementsByClassName("T-I J-J5-Ji T-I-KE L3"), but the returned array was always empty. What am I doing wrong/what is a better way to access this element?
This is the HTML for the element I'm trying to get
here.
It would probably be easier to see the code I'm talking about by logging into Gmail (if you have one and right-clicking the "Compose" button and clicking Inspect).
I tried to type the command document.getElementsByClassName("T-I J-J5-Ji T-I-KE L3") in the console and it returned an array that contains theelement you are searching for.
I would say that your script do not have access to the entire document, so that you can not modify whatever you want, but I don't know enought about Chrome extension to be sure of that.
Good luck !
Try matching for document.querySelector('[gh="cm"]');.
I'm not sure what the gh attribute stands for, but its value cm represents the ComposeMessage button.
Related
I use an Iframe with an external API, which I don't control. My goal is to add Javascript code in my Website, to change the style of a few elements in the Iframe. First I considered using
document.getElementById(iframeId).contentWindow.document.getElementById(elementId);
but I soon recognized that it will not be successful because I am getting security issues. I tested a bit and found out when I inspect the element in the Iframe, which I want to change, I am able to get the element simply by using:
document.getElementById(elementId);
I don't understand. Why does this technique only work when I inspect the correct element first? And is there any way I can use this trick for my normal JS backend?
I wanna retrive a table in this page,and do something
however I cant getElementById directly in console before I use chrome inspecter to select it.
I cant access to the source code
so what should i do?
following screenshot show my issue
Cannot access to
Use Chrome Inspector and clicked on the page .now I cant get this element
If you look at your screenshot, when it is undefined, it is top.
When you select it, the selection changes to content.aspx
So that means the element resides inside of an iframe/frame. So you would need to change it to point to the correct element.
In your first screenshot your console selector is "top", in your second screenshot the selector is "zhuti(content.aspx)" - that could indicate that element is not accessible in top document (maybe it is in an iframe?)
It would be helpful if you provide html or link to source page.
I am getting a javascript object which contains method list but I am not able to access method.
I am integrating tokbox api and i want to call unpublish function when user wants to disconnect the stream.
Please find attached image of my object and whole function list. Please give me solutions as soon as possible.
I don't see the problem from the screenshot attached. The session.unpublish(publisher) method should work as expected. If it is not, can you please show what the errors or the bad behavior look like? Are you passing in the Publisher object? Also be aware that just because you unpublish, does not mean the video element on the page will disappear, for that you must call publisher.destroy(). Lastly, the most simple solution would just be to call session.disconnect() and that will automatically clean up by unpublishing and destroying the publisher.
I do see another error related to a parameter you passed to either OT.initPublisher(element, properties, completionHandler), session.publish(element, properties, completionHandler), or session.subscribe(stream, element, properties, completionHandler). In one of those, as the element parameter, you are passing a reference to window rather than a valid element from the page. You might also have intended to use a String that matches the id attribute of an element on the page. Please fix that.
Goal
I'm making a Chrome extension to perform some manipulations on my university's website since the layout to select a course is bad. For this I need to access elements to read their inner information and also copy their CSS to add certain information that I will obtain from a different site, in a way that fits the style of the page.
Problem
When I open the source code on the exact page I want to use, it doesn't display the correct HTML. Instead it shows the main page's code under the dev tool. The interesting part is that when I highlight a certain element the code shows up and I'm able to make changes within the tool. But if I try to call a specific element under the console using $(id) or $$(id) it would show either null or [].
This causes some problems to because I'm new to any sort of web-related development and I would like to see the complete source so that I can select the elements I want and manipulate the page the way I would like. Maybe there is something I'm overlooking? that's why I need your help.
Possible reasons
I tried many things and try to research and concluded that it might have to do with frames since the url is not changing. However I'm not able to find any resources to teach me about frames (I know nothing about it) if that's the actual problem.
If the problem is another I would appreciate any assistance in solving it or any work around that I am not aware of.
The reason is definitely the use of frames. There are multiple documents at play here, the top level document and each frame has it's own document. This is important because the JavaScript you are executing is 99.9999% the top level document and not a child frame's document. Due to this, it's not finding the DOM nodes because it doesn't search the frames' documents.
Is there a way to find out which JS script created a dynamic element in Chrome's Developer Tools? If I do 'view page source' on the page, the element isn't there. I can see the element though in Chrome's Developer Tools. Is there a way to find out specifically which JavaScript file and what line in my JavaScript file created the element?
To help clarify: I know which element is created...what I don't know is which .js file created it and specifically what line in that .js file
Updated answer:
Below you've said:
I know which element it is...what I don't know is which .js file created it and specifically what line in that .js file
That's not how the question originally read. :-)
If you know which element it is, two options for you:
You can use Dev Tools to trigger a breakpoint when its parent element is modified:
Load the page
Open Dev Tools
Go to the Elements panel
Navigate to the parent element that the target element will eventually be added to
Right-click the parent element and click Break on... > Subtree Modifications
Now, Chrome will trigger a breakpoint when the parent element's subtree is modified, and so you can see what JavaScript code is adding the element.
Unfortuantely, it won't fire that breakpoint if the element is added during the main loading of the page (e.g., during the parsing of the HTML, by script that runs immediately rather than waiting).
If there's any text in the element that seems specific to it (content, id, class, some attribute, whatever), once the page is loaded you can use Chrome's powerful search feature to try to find that text:
Load the page
Open Dev Tools
Go to the Sources tab
Click Ctrl+Shift+F, which is "find in files" — it looks in all of the files associated with the page, not just the "current" file
Type the text that you think might help you identify the code adding the element
Press Enter, all matches will be shown below
You can even use regular expressions.
Original answer:
No, there's no simple way to differentiate an element created via JavaScript after page load from ones created by the initial HTML parsing.
Or at least, there isn't without adding JavaScript to the page that runs before any other JavaScript on the page runs, which I'm guessing is a requirement.
But if you can add JavaScript to the page before any other JavaScript runs, it's actually really easy to do:
Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
element.setAttribute("data-original", "");
});
That marks every single element on the page with an attribute that tells you it was there when that code ran. You can see those attributes in the Elements panel of the Dev Tools. And so, if you see an element that doesn't have that attribute, you know it was added later.
document.querySelectorAll("*") is a big hammer you probably wouldn't want to use in production code, but for temporary use when debugging/developing, it's fine.
And if you want to know about the elements that have been created by other code later, you can do this in the console:
Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
if (element.getAttribute("data-original") === null) {
console.log(element);
}
});
That'll output every element that wasn't on the page when you ran the earlier code, and Chrome's console is really cool — you can right-click the element display in the console and choose "Reveal in Elements panel" to see exactly where that element is.
You can use chrome-devtools-protocol's experimental feature.
Check this, https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getNodeStackTraces
First, send 'DOM.setNodeStackTracesEnabled' to chrome dev protocl.
Second, use 'DOM.getNodeStackTraces' message.
So, you can get call stack information from dynamic creation element.
I wrote my own program using these functions.
Image: https://imgur.com/a/TtL5PtQ
Here is my project: https://github.com/rollrat/custom-crawler