We Keep Coding

How can I scroll in the background using JS?

I'm building a chrome extension where I have to access the innerText of some span elements. I can safely get them using simple document.querySelector commands.
But for some spans, it returns null because they don't exist yet in the DOM> (For security reasons, I cannot disclose which website this happens with but to make it more clear, LinkedIn does a similar thing where the Experience block is only loaded if you scroll down to it.)
Now, to quote the problem using that example: I want to get the value of a span which is inside that Experience section. If I run the script inside window.onload, it returns null because the span isn't there yet.
One solution is to simply scroll the page, (or even worse, ask the users of the extension to first scroll the page before running the extension.) However, I do not want to do that.
Is there a way in JS to scroll the page in the background without visual feedback to the user so that I can get the value of the HTML elements that are initially hidden?
Assume that the span I want to get has the following class: defense-rc4

Best way to identify manually selected element

I'm doing a chrome extension that allows user to click on some links. The extension should analyze the page (1 time per 1 hour, server-side) and if the link is changed - notify. The extension should work on any "normal" web page.
My chrome extension just allows to select element. All other job is done on server side.
What I tried:
ID - the most obvious way, but a lot of web pages don't use ID for elements.
a tag with exact href. But I also need some notifications for position changes. And there is a big chance that the extension will work not only with links.
e.path - Should I keep it like html.child(0).child(2).child(1)... or identify them with their classes and types?
So, is there any good way to identify an element on some unknown page? How should I serialize the identifier?
I'm ok if it will not work after any major changes to html template.
Thank you :)

Assuming I'm reading your question right: You want to select some element on a webpage and have a server re-read that element on a timer loop to see if the element (text, for example) has changed.
Something like an ID would be easiest but, barring that, you might consider XPath, a standard for navigating through XML (or HTML) documents.
W3Schools Reference on XPath
Just a note: from a design perspective, this is going to be challenging because you don't have control over other pages. There's nothing stopping a website from changing IDs, reorganizing elements, etc.

Check what part of JavaScript code is rendering a specific Html element?

On this page https://detail.1688.com/offer/548835845261.html
I want to scrape shipping price and shipping weight as highlighted in image.
I dont know how is this being loaded into DOM.
Its not included in DOM. Its not even loaded by an AJAX call.
Not sure whats going on.
The only relevent part I see on initial page source is
data-unit-config="{"calculationUrl":"https://laputa.1688.com/offer/ajax/CalculateFreight.do","freightTemplateId":"10342228","beginAmount":"1","unitWeight":"1","refPrice":"88.00","isCodOffer":""}"
I tried making GET request to that URL
https://laputa.1688.com/offer/ajax/CalculateFreight.do?freightTemplateId=10342228&beginAmount=1&unitWeight=1&refPrice&88.00&isCodOffer
but not luck.
I want to ask is there any way I can check what part of JavaScript code is rendering a specific Html element?

My recommendation would be:
When the element appears, inspect it.
In the Elements panel, find the first ancestor element to the mystery element that has no mysterious origins (an element that you know how it is getting on the page).
Right-click the ancestor element from step #2 and navigate and select Break on... ==> Subtree modification
Refresh the page _with the devtools on the Elements panel (seems to not work otherwise)
Now anytime JavaScript modifies descendants of the element you set the breakpoint on, the sources panel will pause and allow you to inspect what is going on.

How to properly remove a polymer element from a web page

I'm having some issues with the removal of a polymer element from my web page.
I've build a carousel via an unordered list which list items contain content. Some of this content is simple HTML, some are images, some are videos and some are polymer elements.
Every now and then, the <ul> gets cleared via a jQuery .empty() command.
The issue I'm facing is that the polymer elements don't appear to be cleared correctly.
Inside the polymer elements are timeout events that retrieve content(xml and images) every now and then. When investigating the network load in the chrome developer tools AFTER the polymer element has been removed from the page, you can still see the xml and images being loaded every now and then. So aparantly, a part of the polymer element is still active, most likely somewhere in the shadow-dom.
How do I properly remove an embedded polymer element and everything associated with it from my webpage?

I think setTimeout is not defined within the scope of your element but in global scope.
So you must use clearTimeout function in lifecycle detach function in your element to cancel existing timeouts.

Impossible to get CKEDITOR instances in an iframe

Let's say I have a page with an iframe and within the iframe I have some ckeditor inline instances that I want to manage from the containing page.
From the parent, if I run
console.log(document.getElementById("iframe_id").contentWindow.CKEDITOR);
I have the CKEDITOR object, but don't know why, if I run
console.log(document.getElementById("iframe_id").contentWindow.CKEDITOR.instances);
i get an "undefined" result.
Any idea?
POST EDIT: if I run the last console.log directly in the inspector I get all the instances as normal, the problem seems to exist only in the parent page js.